npm install -g @angular/cli
npm stands for node package manager
for npm we need to install Nodejs.(www.nodejs.org)
node –v(version of node),
npm –v(version of npm)
Now we need to install angular CLI(command line interface ).in www.angular.org.
- npm install –g @angular/cli
- ng –v (to know cli version)
- ng new project-name ( creating new project)
- cd project-name(to enter in to project)
- ng serve(to serve the project)
- dev dependencies
scripts will control angular project like ng-serve, ng-build, ng-test….
ng-serve -to serve the project
ng-build – to build the project production purpose
ng-test- to test the project
Angular is depended upon there technologies like typescript, nodejs, rexjs, cli….etc.
Root:- src-it means this root folder is src
Index:- index.html – this file display on the browser
Main:- main .ts this is the main typescript file for the project and in this file angular is “bootstraping” “ appmodule “.
Bootstrapping – main module (file module) which is located in app folder.
In app folder we contain app module and app component .
App module: every ts file is combination of 3 phases 1 st is import .
Import -> angular telling to typescript this file belongs to angular code
from imports we can import modular component services directives,
Decorator -> decorator will starts with @, decorator contain meta data
in module . Decorator contain declaration, imports, providers,
Bootstrap :- it will call first component (app.component)
Declaration :- in this we can declare components, pipes, directives…
Imports:- this we can declare modules,
Ex:-http modules, form modules, browser module …
Providers :- in providers we declare the services .
Phase –III:- it will export the class logic .
APP . components:-
It contains imports decorator export class logic;
@component decorator:- in this we have a selector templateURL,
Selector :- app-root
Style :- css style.
Selector:- we will consider selector as an element in HTML file, and this
element will shows complete template and styles, ts, properties and
methods in HTML file.
Ex:- from app.component.ts-> we will take app-root selector and call this in index.html, then index.html will show app.component.html data display on browser.
Angular Architecture :
In this architecture that template interact with component is we will call event binding .and component to template that is Property binding.
directives are interactwith template only, and services interact with component .
Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.
To create component ->
>ng generate component componentName
or (>ng g c name).
Directives are similar to components, components are just directives with a view attached. There are three kinds of directives in Angular 2 as given below.
- components — To create HTML template.
b. attribute — To changes the appearance and behavior of DOM element(NgStyle, NgClass).
c. structural — To add and remove DOM elements(NgFor, NgIf).
To create custom directive:
>ng generate directive dname.
Or(>ng g d name)