1.Prerequisite to Learn Angular 2
    1. Basic Knowledge of HTML
    2. Basic Knowledge of Java Script
    3. Basic Knowledge of Type Script
    4. Basic Knowledge of Node and NPM
    5. Basic Knowledge of Visual Studio Code (Editor)


    2.Difference between Angualar2 and Angular JS
    1. Angular JS is not component based but Angular 2 is component based.
    2. Angular JS app will have View first and for every view we have assigned Controller which is having business logic, it means View is the one who decide the Controller and Model Logic.
    3. Angular 2 app will have Root Component first and for every component we will have template i.e. View and will get Model logic for the template.
    4. Components are the building blocks of an Angular 2 Application.


    3.TypeScript
    1. TypeScript is a Super Set of JavaScript.
    2. TypeScript is an open source Language.
    3. TypeScript is maintained by Microsoft.
    4. TypeScript runs on any JavaScript engine.
    5. As we know, we are not able to compile the JavaScript so its so hard to find out the JavaScript error at run time instead if we can write the code in typescript and compiles to JavaScript and in case of any error will come to know while compilation.
    6. TypeScript used static typing to help for type checking at compile time.
    7. For run time, Transcompiler will transpiled TypeScript code to JavaScript.
    8. TypeScript can be used to develop for Server side as well as Client side execution.
    9. TypeScript code file has an extension “.ts”. e.g. pavan.ts
    10. TypeScript code complied into JavaScript code using Transcompiler
    11. After installing type script compiler, we need to run the command for file pavan.ts
    12. Command: tsc pavan.ts
    13. The above command will create a javascript file i.e. pavan.js and can be included in HTML.
    14. Pavan.ts-----------------------------àtsc.pavan.ts------------àpavan.js


    4.NPM
    1. Node Package Manager.
    2. It is used to manage the Node Js libraries.
    3. It is a command line interface.
    4. It is used as package manager for any project and installer.
    5. It is used to manage dependencies.
    6. It can be used to install all the dependencies of a Project.


    5.Installing NPM and TypeScript
    1. NPM is installed with Node JS.
    2. We need to stall NPM in the same folder where we have Angular2 Project.
    3. After installing Node JS, please go to command prompt and hit… npm -v
    4. C:/>node -v     or C:/>npm -v
    5. To install the TypeScript after npm use following command.
    6. C:/>npm install -g typescript


    6.How to run the type script File
    1. Install NPM using node js
    2. Please check and confirm the installation using following command
      1. C:\>node -v
      2. C:\>npm -v
    3. Install TypeScript using following command
      1. C:\>npm install -g typescript
      2. Check the typescript version
      3. C:\>tsc -version
    4.  Create type script file “second.tsc” in C drive -> Angular2 Folder with below Code.
      1. var   languageName:string="Angular2";
      2. console.log(languageName);
    5. Go to command prompt and fire the below command
      1. C:\Angular2>tsc second.ts
    6. Please check the Angular2 folder, you should see the second.js file, which is compile file of second.ts typescript file.
    7. To run this javascript file you can use following command
      1. C:\Angular2>node second.js


    7.Simple Angular 2 Program
    1. Install NPM using node js
    2. Please check and confirm the installation using following command
      1. C:\>node -v
      2. C:\>npm -v
    3. Install TypeScript using following command
      1. C:\>npm install -g typescript
      2. Check the typescript version
      3. C:\>tsc -version
    4. Install Angular -CLI
      1. C:\>npm install -g @angular/cli
      2. Angular CLI is used to create Projects, library code and perform development task i.e. testing and deployment.
      3. It will download the structure of Angular 2 like following folders
        1. e2e
        2. src
        3. node_modules (All the node packages coming from NPM i.e npm install command)
          1. if we use go to any folder and fire the command i.e. npm install, it will install the npm modules in that folder with new folder name node_modules provided that there should be package.json and angular.json files.
        4. package.json(Files)
        5. angular.json (Files)
    5. To create new Angular Project using Angular-CLI
      1. ng new MyProject
      2. It will create a whole Angular 2 project structure.
    6. How to run the Angular App i.e. my-app
      1. cd my-app
      2. ng serve - - open
        1. ng serve command launches the server and build the app.
        2. - - open   will open the browser and hit http://localhost:4200


    8.Angular2 Project Folders and Files
    1. If we use CLI for Angular2 Project code, we will get following main folders and files
    2. Files
      • main.ts     File
      • angular.js    File
      • main.ts file loaded by angular.js
      • main.ts contains the reference of Root App Module name i.e. AppModule (app.module.ts   File)
      • Root App Module contains the reference of App Component(app.component.ts File)
    3. Folder
      • src Folder- contains (app, asset)
        • app -   Most of the Code will be here
        • asset – We can use this folder as a asset for images, css etc.
      • node_modules Folder – contains all the npm packages and libraries
      • e2e – end to end testing


    9.Process Flow for the Angular Application
    1. Angular.js -   Contains configuration information for build system which will provide the files to build system when we fire the command ng build or ng serve.
    2. Package.json – Contains information about all the packages which are going to used angular application.
      • All the NPM packages contains a file, usually in the project root, called package.json file.
    3. Package-lock.json – It is automatically generated for any operation where npm modifies either node module tree or package.json
    4. Process:
      • First Angular.json file load the main.ts file
      • The main.ts file loads app modules.
      • Through app module, angular will get app component.
      • And then index.html will load app component which has template.


    10.Focused Items of Angular 2
    1. Components
    2. Modules
    3. Meta Data
    4. Templates
    5. Data Binding
    6. Dependency Injection
    7. Services
    8. Directives


    11.Angular Component
    1. TypeScript Class
      • We need to create a class and need to export it.
        • Export class AppComponent {
        • userName: string =” Pavan” ;
        • constructor () {
        • }
        • }
      • We can have all the business logic in this class.
    2. Decorator
      • Decorator describes the metadata, which defines properties of component using @Component Decorator.
      • @Component decorator is of TypeScript.
      • @Component decorator decorates a TypeScript class as a component.
      • IT is a function having object as a parameter.
        • @Component({
        • Selector :’mainapp-container’,
        • Template:’<h5> {{ userName }}</h5>’
        • })
      • Decorator contains following properties
        • Template View
        • TemplateURL
        • Directives
        • StyleUrls
        • Pipes
        • Selector
        • Providers
      • Import required Libraries and modules to create the Component
        • Import {component} from ‘@angular/core’;


    12.Simple Example of Component
    1.                                Import { component } from ‘@angulat/core’;

                                  @Component({

                                                 selector:’appName-container’,

                                                 template:’<h3> {{userName}}</h3>’

                                   })

                                   Export class UserComponent{

                                                 username:string=”Pavan Patil”

                                                 constructor(){

      } }



    12.Angular Decorator

      • Decorator contains following properties
      • Template View (inline template)
        • Template :’<h2>{{userName}}</h2>’
      • TemplateURL
        • templateUrl:’/app/Profile/profile.component.html’
      • Styles
        • Styples:[“h2{color:red}”]
      • StyleUrls
        • stylesUrls:[‘app.profle.css’,’app.profileUser.css’]