Angular

Angular2



NOTES



Why new Angular - 1. Built for Speed. 2. Modern. 3. Simplified API. 4. Enhances Productivity  

Component - Template + Class + Metadata 

Type script is strong type lang and find types definition based on .d.ts files (difinition files) 
Type script use ES modules (ES 2015) code files. ES modules are type script code files, that we use for import and export. 

Components can be used as directive then define selector in metadata and import that component in appmodule . Structural directives in angular are used with Prefix with an astrisk ex. *ngIf, *ngFor. 
we can use 'in' and 'of' in repetive syntax, 'in' deals with index and 'of' deals with object at that index. ex *ngFor="let product of products". 

Interpolation binding done using curly braces - {{}}, Property binding is done using square brackets - [src]='imagepath' and event binding is done using brackets (click)='checkMe()'. and 2 way binding is done using 2 brackets - [(ngModel)]='name'. we use 2 brackets because outer bracket act as a property binding and inner bracket trigger the event to notify the property in code. ngModel is imported from FormModule from angular/forms. 

Pipes -transform bound properties before display , similiar to filter in angularjs 1.6. we can use pipes in binding in property or interpolcation. pipes support parameters like currency pipe. 

How to make component better - 1. strong typing and interfaces 2. Encapsulating styles 3. Lifecycle hooks 4. Custom Pipes 5. Nested components 

ES 5 or 2015 does not support interfaces, but typescript supoorts. So it transpiles to Java script. 
we can add component specific styles by style:[''] or styleUrl:'' properties in decorator function 
Component Life cycle - Create -Render - Create and Render Children -Process changes -Destroy 

3 main life cycle hooks - 1. Oninit - perform component initialization, retrieve data from backend. 2. Onchanges -Perform action after changes to input properties. 3. OnDestroy - you can perform cleanup similiar to dispose 
For Lifecycle hooks it's optional to implement interface 

Custom Pipes are similiar to custom filters - create Pipes with Pipe decorator function and declare in module to acces the pipe in your html page. 
Angular tam and many experienced developers strongly recommend moving filters and sortings to component itself. 

in nested components if we want to fetch properties data from it's container then define properties with Input() decorator function in nested component and use that property binding in container html binding.
In nested components to send data back to it's parent or to trigger an event we use @Output decorator function with \nEventEmitter<string>=new EventEmitter<string>(); In container html we use that @output event with some function of container.
Input decorator - attached to a property of any type when it needs data from it's container.\nOutput decorator - attached to aproperty declared as an evenEmitter to raise an event to it's container. use the generic argument to define the event payload type. and create instance of eventwmitter with new keyword. and use $event to access the event payload passed from the nested component in directive.\n 

Service - A class with a focused purpose.\nused for features that:\n1. are independent from any particular component.\n2. Provide share data or logic across components.\n3. encapsulate external interactions.\n
Angular injector register the service and provide single instance of that service called singleton. Angular injector manage the instances of service. we can inject service dependency in component constructor for use. This process is called dependency Injection. this is easy for Testing purposes.
In Angular we create the services using @Injectable() decorator function.\n
We can inject the service in root injector to available throughout the application and in Component injector to available the service in that Component and it's child or nested component only. when we need multiple instance of service then register in compoent injector.
register the service by providing 'providedIn':'root' property inside Injectable decorator in service to inject in root injector.\n\nto inject in component injector - use 'providers:[serviceName]' in component decorator function inside component.\n\nin old versions of angular we used to do inject the service in module decorator by property 'providers:[serviceName]'. 

\n// inject depndency we can inject in below 2 ways - \n //by separate variable or direct declare variable inside constructor\n private ProductService\n constructor(productService: ProductService, private pservice:ProductService) {\n this.ProductService = productService;\n } 

Reactive extensions represent data sequence as observable sequences commonly known as observables.\nObservables help manage asynchronous data.\nObservables treat events as acollection - we can think an array whose items arrive asynchronously over time.\nA method in code can subscribe to an observable to receive asynchronous notifications as new data arrives.\nObservables are used in Angular it self in angular event system and in httpclient service.
Obersvable Operators are methods on observables that compose new observables.\nEach observable transform the source observable in some way.\nOperator do not wait for all of the values to process at once instead operators process each value as it is emitted.\nSome exmplae of operators - map, filter, take, merge.....\n
we compose observable operators with the Pipe method hence the reason observable operators some times called "Pipeable operators"\n
observable sourc does not emit any value until it has the subscriber by subscribe() method. 

Promise - provides a single future value, not lazy, and not cancellable. but Observable - emits multiple values over time, lazy- only when subscribe, cancellable and support multiple operators like map filter reduce and similiar other
All HttpClient methods return an RxJS Observable of something. anything can be wrong when working with backend so we hande the error using catchError using pipe method and we tap the response for logging some thing.\n
Observables are lazy so we need to subscribe to get the values.\n
HttpClientModule is required to import in app module to work with httpClient.\n
API call example - \ngetProducts(): Observable<IProduct[]> {\n return this.http.get<IProduct[]>(this.productUrl).pipe(\n tap(data => console.log('All: ' + JSON.stringify(data))),\n catchError(this.handleError)\n );\n}\nand in component - \n \nthis.ProductService.getProducts().subscribe(\n products=>this.products=products,\n error=>this.errorMessage=<any>error\n );\n 

we can also create component using angular CLI as ng g c folder/compoentnname --flat --flat maens dont add folder with name. g- generate, c- component, ng- angular 

we can pass parameters to route as below -\n[routerLink]="['/products', product.productId]"\nin app.module define as below - \n{ path: 'products/:id', component: ProductDetailComponent },\n { path: '', redirectTo: 'welcome', pathMatch: 'full' }, in roots declaration.\n\nWe can get the current route parameters by ActivatedRoute service. \nconstructor(private route:ActivatedRoute){}\nngOnInit(){\nlet id = this.route.snapshot.paramMap.get('id');\n}
we can go to any route by code as well - using Router service \nprivate router:Router in constructor\nthis.router.navigate(['/products']) 

Protecting routes with Guards - means we can protect any route with aceess, or sometimes we wnt to show a save message befor leaving the page. so we have guards as below.\nCanActivate - guard navigation to a route\nCanDeactivate - guard navigation from aroute\nResolve - Pre-fetch data before activating a route\nCanLoad - Prevent asynchronous routing 
We create guard using Injectable decorator and like a service.
We can create guard using angular cli - ng g g products/product-detail press enter 

Angular Module - A class with NgModule decorator: that\n-organize the pieces of our Application.\n-extend our application with capabilities from external libraries.\n-provide a template resolution enviornment.\n - great war to actively aggregate the classes from other modules and re-export that in consolidate way. browser, http, router module are the xample of this.\n-and create your own convinient module when use shared module.\n- can be loaded eagerly or asynchronously by the router\n- Bootstraps app with our root component and declare all Component, Directive and Pipes\n\n
Bootstrap Array defines the starting compoent of Application. Every application must bosststrap at least one compoent, the root application component.\nBootstrap array should be used in the root application module, AppModule.
Delcarations Array - Every component, directive, pipe we create must belong to one and only one Angular module not multiple modules.\n- Only declare components, directives, pipes not other classes or services.\n- Never re-declare the components, directives, pipes that belong to another module.\n- All declared components, directives, pipes are private by default. They are only available to other components, directives and pipes declared in same Module.\n- Angular modules provides the template resolution env for its component templates.
Exports Array - Allow us to share the Components, directives, pipes of current module with other modules.\n- we can re-export angular modules(http forms) and 3rd party modules (dialogs) and our own modules as well.\nwe can re-export something withour importing it first.\n- Never exports a service. because services is injection in root of application.\n
Imports Array - Importinga module makes available any exported components, directives and pipes from that module.\n- Only import what this module needs.\n- Importing a module does not provide access to its importd modules.\n\n
Providers Array -\nfrom Angular 6 onwards Services are injected using @Injectable decorator function not by Providers array in app.module.\n- Any service provider added to the providers array is registered at the root of application.\n- Don't add services to the providers array of ashared module.\n- Consider building a coremodule for services and importing it once in the App module it will insure like services are Singleton.
Feature Module - we create to define new feature or devide application into many modules based on functionality.
AppRouting Module should be registered at last in imports array in app.module because it containes wild chard '*' root.
Core modules are created for Services.
Bootstrap: startup components. \nDeclarations: what belongs to this module.\nExports: what an importing module can use.\nImports: Supporting modules\nProviders: Service Providers. 

angular CLI - is command line interface for angular.\nPurpose: \n- build an angular app.\n- generate angular files.\n- execute the app.\n- run unit and end to end tests.\n- prepare app for deployment.\n\nbefore using we need to install angular CLI in terminal or command prompt -\nnpm install -g @angular/cli - this install cli globally.\n\nTo check installation - ng help in command prompt. it will show all commands- to check version ng v.\n
ng new App-Name create new application under same folder as application name. \n- e2e folder - this folder contains start and end to end test for application.\n-karma.conf.js is java script test runner we use that for unit testing.\n- node_modules -contains all library that installed by CLI as defined in package.json file.\n- src folder contain our source code.\n-Main.ts is the file where bootstrap the application. this is the file u never need to modify.\n-polyfills - this file is for supporting for browsers\n- tsconfig file - type script configuration, it has 2 versions - one os for comiling our code and other is for compiling test specifications.\n- editorconfig file for providing settings for your editor.\n-gitignore - provide info like which files to be ignored while chekin the code.\n- package.json - just manage the packages.\n- tslint - check our code against some set of rules of type script and notify us.\n- angular.json - its CLI configuration file and conatin app level settings.\n\n- ng new --help show some flags for generating new things.\n
ng serve - to run the application, by default run on port 4200. ng serve -o opens browser. ng server generate bundle for js files.
ng generate is used to generate new things. ng g c componentName will generate components. you can ng g --help to see available generate options.
ng test or ng e2e is used to run the tests. ng test runner runs in watch mode.\nng e2e to run end to end test.
ng build command is used to prepare your app for deployment. ng build output is similar to ng serve as it makes the bundles.\n-Before deployment we can minify or uglify our code. its call Tree shaking.\nAOT - Ahead of time compiler - precomile our code.\nso use ng build --prod to build the app.\nuse ng build --help to see other build options.\n

Angular JS 1.X


 Day 1
Introduction
External-resources
Basic Concepts
Databinding

Day 2
Modules
Controller

Day 3
Scope Hierarchy
Scope
Rootscope-and-scope

Day 4
Directory-structure

Day 5
Templates
Expression

Day 6
Interpolation

Day 7
Routing-and-Templating or
Routing Example

Day 8
Forms
Forms and Validation
Angular Forms

Day 9
Practical-guide-angularjs-directives
Directives

Day 10
HTML Compiler
Bootstrap
Manually-bootstrapping-an-angular-application
Angularjs-transclusion-example-tutorial
Transclusion
Isolated-scope using @ = &

Day 11
Dependency Injection
Angularjs-dependency-injection
Dependency-Injection-in-Controller-of-AngularJs

Day 12
Services
Service vs factory
Factory vs Service

Day 13
Filters
Everything-about-custom-filters-in-angular-js
Building-custom-angularjs-filters
Ng-repeat Filters

Day 14
Directive components in ng

Day 15
Directive components in ng Continued.....
Service components in ng

Day 16
Service components in ng Continued......
Service-http

Day 17
Apply Bootstrap CSS to AngularJS Form:
Bootstrap CSS Classes for Styling Validation Messages

Day 18
Exception-handling    Decorators
Service - $q
using-promises-q-handle-asynchronous-calls/

Day 19
Improving-rest-with- Angular ngresource
Angular UI Router
Angular-ui-router

Day 20 Practice Sets just Overview of SPA
AngularJS Good Examples
Angular Examples
Displaying-a-modal-dialog.html


No comments:

Post a Comment

Subscribe to: Posts (Atom)