angular2 with type script
TRANSCRIPT
1
Angular2 with TypeScript
- Ravi Mone
About me
● I AM Ravi Mone● Have ample year of experience in back-end and Front-end. ● Working on technologies like Symfony2, AngularJS, ReactJS.● Currently serving in Techjini Solution as Team Leader.● You can connect me via
○ https://in.linkedin.com/in/ravi-mone-49b26519
Agenda
• What is TypeScript?• Why use TypeScript?• Angular2 Framework Architecture• What’s happening in Angular2?• Building Blocks of Angular2• Life Cycle Hooks• Bootstrap the application• Routing• Demo
What is TypeScript?
TypeScript (contd.)
Why use TypeScript? (Contd.)
• TypeScript follows a less radical/progressive approach.• It’s a typed superset of JavaScript and existing JavaScript projects can be
converted to TypeScript simply by renaming the source files from*.js to *.ts
Angular2 Framework Architecture
What’s happening in Angular2?
• Angular2 is not yet stable. The features and guidelines are subject to change from time to time.
• Current RC (Release Candidate) versionhttps://github.com/angular/angular/milestones
• To be aware of the weekly updates/modifications, visit: https://github.com/angular/angular/blob/master/CHANGELOG.md
• To know about the Angular2 Style Guide (Alpha-Version), visit: https://github.com/mgechev/angular2-style-guide
8 Main building blocks of an Angular2 App
1. Module2. Component3. Template4. Meta Data5. Data-Binding6. Services7. Directives8. Dependency Injection
Module (Export/Import)
• In ES6 each module is defined in its own file. • The functions or variables defined in a module are not visible outside
unless you explicitly export them. This means that you can write code in your module and only export those values which should be accessed by other parts of your app.
• ES6 modules are declarative in nature. To export certain variables from a module you just use the keyword export.
• Similarly, to consume the exported variables in a different module you use import.
Let’s create a simple module with two utility functions:
generateRandom() : Generates a random number.sum() : Adds two numbers.Next, let’s create a file named utility.js for the module:
And in your app.js
2. Component (@Component({ … }) )
• In Angular 2, Components are the main way we build and specify elements and logic on the page.
• Create reusable UI building blocks for an application.1. Each Angular component requires a single @Component. The @Component annotation
specifies when a component is instantiated, and which properties and hostListeners it binds to.
2. When a component is instantiated, it acts according to the encapsulation valueViewEncapsulation.native,
ViewEncapsulation.Emulated,
ViewEncapsulation.None.
3. All template expressions and statements are then evaluated against the component instance.
3. Template
• We define a Component's view with its companion template. • A template is a form of HTML that tells Angular how to render the
Component.• A template looks like regular HTML, with data/event binding properties
Sample Angular Template
4. @ Meta Data
• Metadata is data that describes other data. • Meta is a prefix that in most information technology usages means "an
underlying definition or description." • Metadata summarizes basic information about data, which can make
finding and working with particular instances of data easier.
So far Meta Data Classes
5. {{ DATA BINDING}}
Data Binding (contd.)
1. The "interpolation" displays the component's hero.name property value within the <div> tags.
2. The [hero] property binding passes the selectedHero from the parent HeroListComponent to the hero property of the childHeroDetailComponent.
Data Binding (contd.)
3. The (click) event binding calls the Component's selectHero method when the user clicks on a hero's name.
4. Two-way data binding is an important fourth form that combines property and event binding in a single notation using the ngModeldirective
6. Service
• If a piece of code is needed by many components in our application then create a single reusable service.
• When a component needs this service we can simply inject it (the service) using DI (@Injectable).
• A service is the mechanism used to share functionalities over Components (or with one Component if our app contains only one Component).
• Service is the best place from where we can bring our external Data to our app. Or do some repetitive task or calculations.
• Service can be shared between as many as Components we want.
7. @Directive
● A directive is simply a class with a specific Metadata (@Directive decorator)
● We have three kinds of directives:○ Components: yes a component is a directive. (@Component)○ Structural directives: conditionally add or remove content from the
DOM.○ Attribute directives: Alters the Element by changing its behavior or the
appearance
Three Kinds of Directives
1. Component<angular-2-hello-world>loading…</angular-2-hello-world>
2. Structural Directive (ngIf, ngFor )<div*myAngular2Directive=”ShowMeIfFalse”> <b>I’m visible => showMeIfFalse=false </b></div>
3. Attribute Directive<p [zoomIn]=”blue”> Some thing goes here </p>
Directive Vs. Component
8. Dependency Injection (Provider, BootStrap(‘’, []))
• In software engineering, dependency injection is a software design pattern that implements inversion of control for resolving dependencies.
• The idea behind dependency injection is very simple. If you have a component that depends on a service. You do not create that service yourself. Instead, you request one in the constructor, and the framework will provide you one. By doing so you can depend on interfaces rather than concrete types. This leads to more decoupled code, which enables testability, and other great things
Demo: http://plnkr.co/edit/CG9HuLzI6KqncxiVeACM?p=preview
Life Cycle Hooks
• When the component class implements some lifecycle_hooks the callbacks are called by the change detection at defined points in time during the life of the component.
Demo: http://plnkr.co/edit/IVn4bb4Fp2eDDPrLODay?p=preview
Bootstrap the App
● You instantiate an Angular application by explicitly specifying a component to use as the root component for your application via:○ bootstrap(‘<root component>’) in case there is a single component ○ bootstrap(‘<root component>’, [<DI>]) in case the component has
dependencies.
Routing
Demo Links• Kick Start: Demo a small component (meet-up folder)
• Forms: http://plnkr.co/edit/aN3LhpwnH2qyRYNfJn8q?p=preview
• Inputs: http://plnkr.co/edit/rV5s4CKZWLfhW63gGnKp?p=preview
• Outputs: http://plnkr.co/edit/7ByGLXviLy4SbrXgdlx7?p=preview
• ViewChild: http://plnkr.co/edit/vhdL7e0SccIbMk0eZKfh?p=preview
• Encapsulation : https://plnkr.co/edit/inF7VaYJvj8uJfuLKV4Z?p=preview
• Directives : http://plnkr.co/edit/P0G8cWYCP8sC7Yrvlo8L?p=preview
• CRUD application : https://github.com/ravi-mone/angular2-crud
• Routes : https://github.com/ravi-mone/angular2-lab