Downloaded 17 times
![Angular2 ecosystem • @Component (Styling) 10 // Styles in Metadata import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Test</h1>`, styles: [` h1 { color: red } `] }) export class AppComponent {} // Style URLs in Metadata import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Test</h1>`, styleUrls: [ 'app/app.component.css' ] }) export class AppComponent {}](https://image.slidesharecdn.com/introtong2ittalkmatiishyn4-160830092939/75/Introduction-to-Angular2-10-2048.jpg)
![Angular2 ecosystem • @Component • @NgModule 12 // decorator defines the metadata for the module import { NgModule } from '@angular/core'; // application service providers, common directives import { BrowserModule } from '@angular/platform-browser'; // root component import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], // importing other modules declarations: [ AppComponent ], // components, directives that are part of this module bootstrap: [ AppComponent ] // root component that Angular should bootstrap }) export class AppModule { }](https://image.slidesharecdn.com/introtong2ittalkmatiishyn4-160830092939/75/Introduction-to-Angular2-12-2048.jpg)
![Angular2 ecosystem • @Component • @NgModule • Bootstrap application • Services 14 import { Injectable } from '@angular/core'; @Injectable() export class AppService { getUsers(): any[] { return [] } }](https://image.slidesharecdn.com/introtong2ittalkmatiishyn4-160830092939/75/Introduction-to-Angular2-14-2048.jpg)
![Angular2 ecosystem • @Component • @NgModule • Bootstrap application • Services (DI) 15 @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent], bootstrap: [ AppComponent ], providers: [ AppService ] }) export class AppModule { } import { Component, OnInit } from '@angular/core'; import {AppService} from './app.service' @Component({ selector: 'my-app', templateUrl: 'app.component.html', providers: [AppService] }) export class AppComponent implements OnInit { users: any[] // Angular Dependency Injection constructor( private appService: AppService){} // Using service ngOnInit() { this.users = this.appService.getUsers(); } }](https://image.slidesharecdn.com/introtong2ittalkmatiishyn4-160830092939/75/Introduction-to-Angular2-15-2048.jpg)
Uploaded byIvan Matiishyn
Introduction to Angular2
This document provides an introduction to Angular 2, including: - Angular 2 is a JavaScript framework for building single-page applications that uses dependency injection, change detection, and components. - TypeScript allows adding types to JavaScript for complex apps and is used extensively in Angular 2. - The Angular 2 ecosystem utilizes decorators like @Component and @NgModule to define metadata for components and modules. Components also have lifecycle hooks. - The document demonstrates how to set up an Angular 2 app using the Angular CLI, including creating modules, components, services, and bootstrapping the app. It compares the component architecture between Angular 1 and 2.
Introduction to Angular2
- 1. AN INTRODUCTION TO ANGULAR2 Ivan Matiishyn Senior front-end developer @DataArt 2016
- 2. Agenda 1. What isAngular2 2. TypeScript 3. Angular2 ecosystem 4. Component Architecture
- 3.
- 4. What is Angular2? •JavaScript framework for SPA (link) • DI, Change Detection • Everything you need for complex app • Current state - RC5 • Server-side Rendering (link) • Lazy Loading • Native App Support (link) • Web Workers 4
- 5.
- 6.
- 7. TypeScript Types: • string • number •boolean • Array • any • Custom types 7 Tools: • VS Code • Playground (link)
- 8.
- 9. Angular2 ecosystem • @Component 9 import{ Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello World</h1>` }) export class AppComponent { }
- 10. Angular2 ecosystem • @Component(Styling) 10 // Styles in Metadata import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Test</h1>`, styles: [` h1 { color: red } `] }) export class AppComponent {} // Style URLs in Metadata import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Test</h1>`, styleUrls: [ 'app/app.component.css' ] }) export class AppComponent {}
- 11. Angular2 ecosystem • @Component(Lifecycle) 11 import { Component, OnInit, OnDestroy } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Test</h1>` }) export class AppComponent implements OnInit, OnDestroy { ngOnInit() { } ngOnDestroy() { } }
- 12. Angular2 ecosystem • @Component •@NgModule 12 // decorator defines the metadata for the module import { NgModule } from '@angular/core'; // application service providers, common directives import { BrowserModule } from '@angular/platform-browser'; // root component import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], // importing other modules declarations: [ AppComponent ], // components, directives that are part of this module bootstrap: [ AppComponent ] // root component that Angular should bootstrap }) export class AppModule { }
- 13. Angular2 ecosystem • @Component •@NgModule • Bootstrap application 13 // Angular's browser platformBrowserDynamic function import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; // application module import { AppModule } from './app.module'; // bootstrapping platformBrowserDynamic().bootstrapModule(AppModule);
- 14. Angular2 ecosystem • @Component •@NgModule • Bootstrap application • Services 14 import { Injectable } from '@angular/core'; @Injectable() export class AppService { getUsers(): any[] { return [] } }
- 15. Angular2 ecosystem • @Component •@NgModule • Bootstrap application • Services (DI) 15 @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent], bootstrap: [ AppComponent ], providers: [ AppService ] }) export class AppModule { } import { Component, OnInit } from '@angular/core'; import {AppService} from './app.service' @Component({ selector: 'my-app', templateUrl: 'app.component.html', providers: [AppService] }) export class AppComponent implements OnInit { users: any[] // Angular Dependency Injection constructor( private appService: AppService){} // Using service ngOnInit() { this.users = this.appService.getUsers(); } }
- 16. Angular2 ecosystem • @Component •@NgModule • Bootstrap application • Services • routing, pipes, forms, http, animations… 16
- 17.
- 18. Component Architecture • Thinkingin React Components (link) 18
- 19.
- 20. Component Architecture • Thinkingin React Components (link) • One way data flow 20
- 21.
- 22.
- 23.
- 24. Angular CLI (GitHub) •create a project from scratch • scaffold components, directives, services, etc. • lint your code • serve the application • run your unit tests and end to end tests. 24
- 25.
- 26. from Directives toComponents 26 app.directive('myApp', function () { return { template: '<div>{{ctrl.name}}</div>', scope: { name: '=' }, controller: function () { this.name = 'John' }, controllerAs: 'ctrl', bindToController: true }; }); app.component('myApp', { template: '<div>{{$ctrl.name}}</div>', binding: { name: '<' // one-way binding }, controller: function () { this.name = 'John' } });
- 27. from Directives toComponents 27 • Components have a well-defined public API - Inputs and Outputs – Inputs should be using < and @ bindings – Outputs are realized with & bindings • Components have a well-defined lifecycle – $onInit() – $onChanges(changesObj) – $doCheck() – $onDestroy() – $postLink() • An application is a tree of components (minimize two-way data binding)
- 28.
Editor's Notes
- #2 Hi guys! My name is Ivan, I work as a front-end developer at DataArt Wroclaw
- #3 And today we are gonna be talking about the Angular2. What is it, Quickly review the TypeScript And discover the NG2 ecosystem After that we’ll take a look at the architectural approach of building ng2 apps
- #4 Now, before we begin, please let me know, how many of you have any experience with Angular 1? Nice. So, you are familiar with some concepts like routing, services, directives, and SPA.
- #5 First of all it’s a JS framework for building SPAs it was rewritten from scratch, improved DI and new Change detection – no more $digest cycles Two weeks ago the RC5 was released with some big changes in there, like modules [universal] a full solution for universal rendering, which means that the initial view of the application can be rendered on a server and shipped as fully populated HTML. Lazy loading - It comes with a router that supports lazily loading the code for routes only when they're first accessed – Lacked in NG1 Native App Support –you can build a cross-platform iOS and Android app with Angular2 and NativeScript and you can build desktop applications using Ng2 and Electron Web Workers - you can configure Angular 2 so that most of your application code runs in a Web Worker
- #6 Before showing any Angular2 code I’d like to quickly review a TypeScript.
- #7 The language we usually call "JavaScript" is formally known as "EcmaScript". ES5 - The 5th edition of ECMAScript, standardized in 2009. This standard has been implemented in all modern browsers ES6 - The 6th edition of ECMAScript, standardized in 2015. This standard has been partially implemented in most modern browsers. It has a lot of cool features, like classes, arrow functions, template strings, module s Does any of you guys use ES6 in your real projects? ES7 – there’s a proposal of es2016 And the TypeScript – which is not a new language but just a superset of JavaScript, that supports all latest features of ES and adds opional typings [FOR EXAMPLE – VS CODE]
- #8 Here are different types in TS, let’s take a look at some of them: s, n, b, A, or it can be ‘any’ if you are not sure or you can create your own type - Interface Interfaces are abstract descriptions of things, and can be used to represent any non-primitive JavaScript object. They produce no code (ES6 or ES5), and exist only to describe types to tsc. Here’s an example: And that’s pretty much it
- #9 Now, Let’s see what do we have in ng2. Let’s dive into the ecosystem
- #10 NG2 is all about components. The whole application can be modelled as a tree of these components. This is how it looks like [CODE] Every Angular app has at least one root component. Components are the basic building blocks of Angular applications. A component controls a portion of the screen, it’s has it’s own template, styles. @Component is a decorator that allows us to associate metadata with the component class. The metadata tells Angular how to create and use this component. TEMPLATES You can write templates inline here or move it to a separate file, let’s do that
- #11 Let’s see how we can style any component There are several ways to add styling to your components 1. we can write inline 2. Style URLs in Metadata One more important thing about Component styles: the selectors we put into a component's styles only apply within the template of that component. Component CSS styles are encapsulated into the component's own view and do not affect the rest of the application.
- #12 A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM. And here’s how it can be implemented [CODE]
- #13 every Component should be part of a module, and every app requires at least one module This feature was introduced in the latest RC about 2 weeks ago Many Angular libraries and third party libraries are modules as well. Similar to what we have in ng1, we find new module, download and include it and directives are available throughout an application. As the app grows, we refactor the root module into feature modules that represent collections of related functionality. We then import these modules into the root module.
- #14 Now let’s see how we can actually run the application We need to import the main module of application and a function to bootstrap it. It’s because Bootstrapping is platform-specific, you may load a module in a different environment, it may be the Cordova or NativeScript for mobile applications or We might wish to render the first page of our application on the server to improve launch performance or facilitate SEO And It’s better to have a separate file for this process at least for separation of concerns.
- #15 Next important feature is a Service As you have an Angular 1 background then you are familiar with this concept, but in NG2 it’s much simplier : there’s no more service/factory. In Angular 2 there are only services, and they are just vanilla ES6 classes. And to make that service injectable into other services and components we need to decorate the class with Injectable function [CODE]
- #16 And the way to use Services: firs of all you have to register it, you can now register services in the module level to be used throughout a whole module. Or you can register your service in the Component level and it’ll be available to that component and its children. Here’s the usage
- #17 There’re much more stuff to check but I’d like to get back to Components and take a quick look at the way of building applications from Architectural perspective.
- #18 So let’s take a look how to build applications using Component Architecture.
- #19 If you ever started learning ReactJS then you’ve probably seen this article – “Thinking in React”. But the Step One can be applied not only to React, it’s actually a short explanation of the “Component Architecture”, which says that your application should be a tree of small components.
- #20 Let’s say we are creating a simple application that has a list of users, search and info about a selected user [1]. Now we need to split all features into separate components, like this [2] But during development you will notice that <userEdit> is not enough for such a big component so better to create few more components, like this [3] Those components have blue background because they are so-called presentational components (stateless, dumb). They don’t know how to read or write data. They receive data via property binding and they output data via events. While those white components are Containers (or stateful or smart) components. They can communicate with services and render child components. It’s useful
- #21 And The data flow. Angular 2 change detection enforces a uni-directional data flow. It runs and updates the view when the data on our classes gets updated.
- #22 By default, Angular 1 implemented two-way data binding, the flow of changes is pretty much chaotic, anything could change anything else. In NG2 the flow of information is unidirectional. As I said, component receive data via property binding and they output data via events.
- #24 And there’s one more tool worth mentioning here – Angular CLI
- #25 f you don’t want to spend much time configuring your building and testing processes then you should definitely consider it I wanted to show it to you in action but it doesn’t support RC5, so no modules, bootstrapping Let’s see it in action
- #27 In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure. This makes it easier to use Angular 2's style of application architecture.
- #28 $onInit() - after all the controllers on an element have been constructed and had their bindings initialized $onChanges(changesObj) - Called whenever one-way bindings are updated. $doCheck() - Called on each turn of the digest cycle. $onDestroy() - Called on a controller when its containing scope is destroyed. $postLink() - Called after this controller's element and its children have been linked. ngAfterViewInit, content