Angular 2

1. Angular 2 - CLI

2. Prerequisites:
Node 6.9.0 or higher
NPM 3 or higher

3. npm install –g @angular/cli
Windows: Start > Node.js command prompt (Run as administrator)
MAC: Terminal window > sudo npm install –g @angular/cli

4. …
ng help
ng new
ng serve

5. IDE Editor Online Editor
https://code.visualstudio.com/
Available for macOS, Linux, and Windows
VS Code includes support for debugging, embedded Git control,
syntax highlighting, intelligent code completion, snippets,
and code refactoring.

6. View Menu > Integrated Terminal
PS H:angular2movie>ng serve
http://localhost:4200

7. e2e
End-to-end (e2e) tests of the application, written in Jasmine and
run by the protractor e2e test runner.
node_modules
The npm packages installed with the npm install command.
karma.config.js
Configuration for the karma test runner described in
the Testing guide.
package.json
Identifies npmpackage dependencies for the project.
protractor.conf.js
Configuration for the protractor end-to-end (e2e) test runner.
tsconfig.json
Tells the TypeScript compiler how to transpile TypeScript source
files into JavaScript files that run in all modern browsers.
tslint.json
The npm installed TypeScript linter inspects your TypeScript code
and complains when you violate one of its rules.
Folder structure

8. angular-cli.json

9. index.html
The application host page. It loads a few essential scripts in a
prescribed order. Then it boots the application, placing the root
AppComponent in the custom <my-app> body tag.
favicon.ico
The application icon that appears in the browser tab.
styles.css
Global styles for the application.
main.ts
Compiles the application with the JIT compiler and bootstraps the
application's main module (AppModule) to run in the browser
app.module.ts
Defines AppModule, the root module that tells Angular how to
assemble the application. Right now it declares only the
AppComponent. Soon there will be more components to declare.
app.component.ts
Defines the same AppComponent as the one in the QuickStart
playground. It is the root component of what will become a tree
of nested components as the application evolves.

10. Focus on the following files in the /src folder.

11. main.ts
app.module.ts app.component.ts
index.html

13. app.component.js app.component.html
app.component.css
up-icon
down-icon
star1-icon
star0-icon

14. Generating Components, Directives, Pipes and Services
Creating a new component movie-rating:
ng generate component movie-rating
https://www.npmjs.com/package/ng-cli-2

15. Next Session:
Implement movie-rating component
Communication between component
ng generate component movie-rating