Date post: | 13-Jan-2017 |
Category: |
Technology |
Upload: | rohit-bishnoi |
View: | 322 times |
Download: | 0 times |
-Rohit Kumar @rbdharnia
-Manish Kapoor @kapoormanish_89
Angular2 with TypeScript
AgendaTypeScript
• What is TypeScript• Installation• Hello World!!• Features• Demos
– Types– Class– Inheritance– Interface
Angular2
• Why angular 2?
• Angular 2 quick start
application
• Angular 2 architecture
• Navigation and Routing
TypeScript
Installation:
TypeScript
The “Hello World!!”:
TypeScript
○ Implements ECMA 6 Specification.
○ Has types(number, string, boolean, any)
○ Better Support for OOP(Classes, Interfaces, Inheritance, Enum)
○ Optional typing(Duck typing)
○ Functions(Optional parameters, default parameters)
○ Module System (Exporting & Importing modules)
Features:
TypeScript
Demo: Inheritance
TypeScript
Demo: Types
TypeScript
Demo: Class
TypeScript
Demo: Interface
TypeScriptExercises!!
1. Hello World!2. Create a method with multiple parameters.3. Create a method with default parameters.4. Create a method with optional parameters.5. Create a class with name “Person” and fields ‘firstName’ and
‘lastName’.6. Add a funtion print() in the class which prints firstName and
secondName7. Create a constructor.8. Create another class Employee which extends Person9. Add another field ‘employeeCode’ and method print() . This method
should override the method of base class
Angular 2 Agenda
• Why angular 2?
• Angular 2 quick start application
• Angular 2 architecture
• Navigation and Routing
Why Angular2
• Simple, but Not Simplistic
• Web component oriented architecture
• Mobile First
• Better Foundations (DI, Router, Components)
• Speed & Performance
• Productivity
Angular 2 Quick StartStep 1: Create and configure the project
A. Create the project folder
B. Add package definition and configuration files
C. Install packages
Angular 2 Quick Start
Angular 2 Quick Start
No need to add configuration yourself, just clone and checkout to
branch ‘master’.
[email protected]:rohitbishnoi/angular2-quickstart.git
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Angular 2 Quick Start
Architecture Overview
Architecture Overview
1. Modules
a. Angular apps are modular
b. Generally we assemble our application from many modules
c. Block of code dedicated to a single purpose
d. A module exports some value, typically a class.
e. Modules are optional, but it is highly recommended.
Architecture Overview
2. Componentsa. A component controls a portion of screen, we could call it a
view.b. We define components application logic inside a class.c. Class interacts with view through its API.
Components continued..
Architecture Overview
3. Templatesa. We define a component's view with its companion template.
b. A form of html that tells Angular how to render the component.
c. Most of the time it looks like regular html … and then it get a bit strange.
d. See the example on next page.
Templates continued..
Templates continued..
Let's write some code now
• Create a ToDoListComponent• It will have 2 variables, todos list and a selectedTodo• Bootstrap todo list• Create a template todo-list-component.html• Display a list of bootstrapped todos.
Hint: use directives option in AppComponent config metadata to make it aware about ToDoListComponent.
directives: [TodoListComponent]
Templates continued..
<li *ngFor="let todo of todos" (click)="selectTodo(todo)"> {{todo}}</li>
What is *ngFor and (click) in above code snippet ?
Templates continued..
Template Syntax
• Html
• Interpolations {{selectedTodo}}, {{2+2}}
• Template Expressions [property]="expression"
• Template Statements: responds to an even raised by
a binding target for ex (event)="statement"
• Binding Syntax: binding data value to and from the
data model.
Template Syntax continued..Data Direction Syntax Binding Type
One-wayfrom data sourceto view target
{{expression}}[target] = "expression"bind-target = "expression"
InterpolationPropertyAttributeClassStyle
One-wayfrom view targetto data source
(target) = "statement"on-target = "statement"
Event
Two-way [(target)] = "expression"bindon-target = "expression"
Two-way
Binding types other than interpolation have a target name to the left of the equal sign, either surrounded by punctuation ([], ()) or preceded by a prefix (bind-, on-, bindon-).
Templates syntax continued..
Template Syntax• Built-in directives
– ngClass– ngStyle– *ngIf– *ngSwitch– *ngFor example *ngFor="let hero of heroes"
Architecture Overview
4. Metadata• Metadata tell angular how to process a class.• TodoListComponent was just a class until we tell angular about
it.• We tell angular that TodoListComponent is a component by
attaching some metadata to it.• We attached metadata using a decorator @Component
Metadata continued..
Here are a few of the possible @Component configuration options:
• selector• templateUrl• directives• providers: what the hell is that now?
Architecture Overview
4. Data Binding• You already have some idea about it now.
Exercises
• Create a model class Todo with following fields– Title of string type– Priority of integer type
• Create a FormComponent– It will have a list of todos– A todo object to hold currently editing todo item– A method to which add the todo item in the list
– Add a template which renders form. See screenshot on next slide for reference.
Hint: use ngModel to bind form elements to component variables. For eg [(ngModel)] = “currentTodo.title”
Exercises
Architecture Overview
5. Services• Service is a broad category encompassing any value, function,
or feature that our application needs.• A class with a narrow, well-defined purpose. It should do
something specific and do it well. For example logging service, tax calculator.
• There is nothing specifically Angular about services. Yet services are fundamental to any Angular application.
Services continued..
Here's an example of a service class that logs to the browser console.
Architecture Overview
5. Dependency Injection• Dependency injection is a way to supply a new instance of a
class with the fully-formed dependencies it requires. Most dependencies are services.
• Angular can tell which services a component needs by looking at the types of its constructor parameters. For example
Dependency Injection continued..
How it works: An injector maintains a container of service instances that it has previously created. If a requested service instance is not in the container, the injector makes one and adds it to the container before returning the service to Angular. When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments. This is what we mean by dependency injection.
Architecture Overview
Exercises
● Create a TodoService which maintains a list of todo items.● It will have a method to add a new Todo to the list.● Inject TodoService in TodoListComponent and
TodoFormComponent.● TodoListComponent will just render the list as a unordered
list. (ul > li)● This list should be sorted by priority (high priority task first)
. ● TodoFormComponent will be responsible for rendering the
todo form and it will use service method to add todos in the list.
Hint: use the following syntax to inject services while bootstraping. bootstrap(AppComponent, [BackendService, HeroService, Logger]);
Routing and Navigation
● The Angular Component Router enables navigation from one view to the next as users perform application tasks.
● Angular router is handling browser url change, forward and backward button clicks and link navigations.
● We can bind the router to links on a page and it will navigate to the appropriate application view when the user clicks a link.
Routing and Navigation
Steps to configure the router● Set the <base href="/"> in index.html● Import ROUTER_DIRECTIVES in app component.
● Configure application routes, bootstrap application with an array of routes using the provideRouter function.
Routing and Navigation
Routing and Navigation
● Register our router with bootstrap method, or inject it in bootstrap just like we do with services.
Routing and Navigation
● Add the Router Links and Router Outlet in applications AppComponent.
Routing and Navigation
● Add the Router Links and Router Outlet in applications AppComponent.
Resources• http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-
meteor• http://developer.telerik.com/featured/will-angular-2-be-a-success-you-bet/• https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html• https://angular.io/docs/ts/latest/guide/architecture.html• https://angular.io/docs/ts/latest/quickstart.html• https://angular.io/docs/ts/latest/guide/template-syntax.html• https://angular.io/docs/ts/latest/guide/router.html