Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular2 with type script

1,036 views

Published on

Angular2 with Typescript,
NOTE : The content in the presentation was wrt the current version beta.14. May or may not valid when the version changes

Published in: Technology

Angular2 with type script

  1. 1. 1 Angular2 with TypeScript - Ravi Mone
  2. 2. 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
  3. 3. 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
  4. 4. What is TypeScript?
  5. 5. TypeScript (contd.)
  6. 6. 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
  7. 7. Angular2 Framework Architecture
  8. 8. 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) version https://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
  9. 9. 8 Main building blocks of an Angular2 App 1. Module 2. Component 3. Template 4. Meta Data 5. Data-Binding 6. Services 7. Directives 8. Dependency Injection
  10. 10. 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.
  11. 11. 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:
  12. 12. And in your app.js
  13. 13. 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 value ViewEncapsulation.native, ViewEncapsulation.Emulated, ViewEncapsulation.None. 3. All template expressions and statements are then evaluated against the component instance.
  14. 14. 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
  15. 15. Sample Angular Template
  16. 16. 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.
  17. 17. So far Meta Data Classes
  18. 18. 5. {{ DATA BINDING}}
  19. 19. 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.
  20. 20. 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
  21. 21. 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.
  22. 22. 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
  23. 23. 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>
  24. 24. Directive Vs. Component
  25. 25. 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
  26. 26. 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
  27. 27. 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.
  28. 28. Routing
  29. 29. 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

×