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.