NUWebBoot-0

pre-reqs

In order for the tutorial to work, please install the following:

Nodejs

NodeJS provides a batch javascript runtime and a set of tools for managing packages (libraries) in javascript. NodeJS can be downloaded at nodejs.org. Download version 6.8 or better.

after installing you should be able to type the following commands:

node -v
npm -v

This should display the versions of the node engine (>6.8) and the package manager NPM (~4.1)

Git, Github, and a github account

You should have a working version of git with the ability to connect to github.com. The easist way to do that, is to simply install the software at desktop.github.com. After installation, you should be able to go to the command line and type:

git --version

And have it display a version number (mine is git version 2.13.3.windows.1)

The Angular CLI (Command Line Interface)

The information on the Angular CLI can be found on cli.angular.io.

Installing @angular/cli

To install after installing nodejs:

npm install @angular/cli -g

Verifying installation of the Angular CLI

Verify that the cli is correctly installed by typing:

ng --version

your output should look something like:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.1
Node: 8.9.3
OS: win32 x64
Angular:
...

Your CLI version can be higher than the one mentioned (e.g. 1.6.2 or 1.7). If it is a whole number higher (e.g. 2.0); this tutorial may not work.

Generate a first test app to test the setup

From the command line, generate a sample test app to verify. Navigate in the command line to the spot where you want to put your test app and then type

ng new my-test-app

After npm has installed dependencies (this may take a while), make sure the application can be built and run successfully. The root folder of your application can be reached at this point by changing directory to where it is located

cd my-test-app

You can check the versions of all components by running

ng --version

again. Now you should see a screen that looks something like this:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.1
Node: 8.9.3
OS: win32 x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Clone a copy of NUWebBoot 0

To clone a copy of this repository, move to the directory where you would like to place the repostory and then:

git clone https://github.com/toddwseattle/NUwebbootcamp0.git

This will place the repository in the NUwebbootcamp0 folder. you can specify a different folder name at the end of the git clone command.

Follow the step by step

We use git to swtich between a series of steps in the tutorial. These are documented in Step by Step.

What follows is what is automatically generated by the CLI for NUWebBoot-0

This project was generated with Angular CLI version 1.6.1.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.