notes on angular cli
it’s now easier than ever to create, run builds, do E2E (end to end) tests, run apps and deploy Angular 2 application.
1.DEFINITION:
Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules.
Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box.
2.INSTALLATION:
npm install -g angular-cli
3.TO CHECK WHICH VERSION IS INSTALLED AND DETAILS ABOUT IT:
ng --version
4.how to create angular 2 app with 3 lines of commmand:
ng new PROJECT_NAME
ng build(inside Project directory)
ng serve
CLI command – ng new to create application
List of files created using CLI command
The newly created application is now GIT repository by default.
As the package.json is already created, CLI command restore the packages. It takes few minutes to restore packages.
5.RENDERING:
and then navigate to localhost:4200(default)
6.CONFIGURATION:
you can also change port number by
this command:
ng serve --port 4201 --live-reload-port 49153
7.Generating Angular components:
ng generate component my-new-component
table to create scaffold with agular 2:https://github.com/angular/angular-cli Ctrl+F : my-new-component
Generating route :
ng generate route hero
This will create a folder which will contain the hero component and related test and style files.
advantage:
The generated route will also be registered with the parent component's @RouteConfig decorator.
8.Creating a build:
ng build
The build artifacts will be stored in the dist/ directory.
9.Running unit tests:
ng test
Tests will execute after a build is executed via Karma.
new feature:If run with the watch argument --watch (shorthand -w) builds will run when source files have changed and tests will run after each successful build.
10.Commands autocompletion:
To turn on auto completion use the following commands:
Windows users using gitbash:
ng completion >> ~/.bash_profile
source ~/.bash_profile
Notes:
1.to start with angular 2 we can write behavior with ES5(no-compile),ES6/ES2015,Typescript or Dart{others have compile}.
2.ES5,ES6/ES2015(no types) but typescript,Dart (types).
3.ES5,ES6/ES2015,typescript(javascript),Dart (no javascript).
4. type ng -help on command prompt to see all the angular 2 cli commands.
11. Deploy to Production:
1. create a new repository to github.com
2. to get your code up on GitHub you need to register that new repo using the git remote command:
git remote add origin <url of the repository on the github>
3. now to push to github.
git push origin master
At this point your code will be up on GitHub, but your hosted app will not be up on GitHub Pages yet. Luckily the Angular CLI has this step
4. now deploy your project:
ng github-pages:deploy
to see the size of all the files within project then type:
ng asset-sizes
Creates a new angular-cli project in the current folder:
ng init <glob-pattern> <options...>
it’s now easier than ever to create, run builds, do E2E (end to end) tests, run apps and deploy Angular 2 application.
1.DEFINITION:
Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules.
Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box.
2.INSTALLATION:
npm install -g angular-cli
3.TO CHECK WHICH VERSION IS INSTALLED AND DETAILS ABOUT IT:
ng --version
4.how to create angular 2 app with 3 lines of commmand:
ng new PROJECT_NAME
ng build(inside Project directory)
ng serve
CLI command – ng new to create application
List of files created using CLI command
The newly created application is now GIT repository by default.
As the package.json is already created, CLI command restore the packages. It takes few minutes to restore packages.
5.RENDERING:
and then navigate to localhost:4200(default)
6.CONFIGURATION:
you can also change port number by
this command:
ng serve --port 4201 --live-reload-port 49153
7.Generating Angular components:
ng generate component my-new-component
table to create scaffold with agular 2:https://github.com/angular/angular-cli Ctrl+F : my-new-component
Generating route :
ng generate route hero
This will create a folder which will contain the hero component and related test and style files.
advantage:
The generated route will also be registered with the parent component's @RouteConfig decorator.
8.Creating a build:
ng build
The build artifacts will be stored in the dist/ directory.
9.Running unit tests:
ng test
Tests will execute after a build is executed via Karma.
new feature:If run with the watch argument --watch (shorthand -w) builds will run when source files have changed and tests will run after each successful build.
10.Commands autocompletion:
To turn on auto completion use the following commands:
Windows users using gitbash:
ng completion >> ~/.bash_profile
source ~/.bash_profile
Notes:
1.to start with angular 2 we can write behavior with ES5(no-compile),ES6/ES2015,Typescript or Dart{others have compile}.
2.ES5,ES6/ES2015(no types) but typescript,Dart (types).
3.ES5,ES6/ES2015,typescript(javascript),Dart (no javascript).
4. type ng -help on command prompt to see all the angular 2 cli commands.
11. Deploy to Production:
1. create a new repository to github.com
2. to get your code up on GitHub you need to register that new repo using the git remote command:
git remote add origin <url of the repository on the github>
3. now to push to github.
git push origin master
At this point your code will be up on GitHub, but your hosted app will not be up on GitHub Pages yet. Luckily the Angular CLI has this step
4. now deploy your project:
ng github-pages:deploy
to see the size of all the files within project then type:
ng asset-sizes
Creates a new angular-cli project in the current folder:
ng init <glob-pattern> <options...>
