Angular IO

Angular IO Overview, including sample app structure, bootstrapping process and the CLI

1. Angular IO Overview Jennifer Jirka Web Application Development SIG Software Engineering TC

2. Jennifer Jirka Senior Consultant, with Avanade for 4.5 years Web Application Development SIG Lead 6 years of experience with JavaScript web development 3 years of experience with Angular JS Project experience with Angular IO I love writing and speaking about Angular Personal career goals focus on teaching and mentoring 6 month old junior analyst developer at home

3. Agenda Foundational Concepts TypeScript Components Putting It All Together Angular CLI

4. Foundational Concepts

5. What is Angular IO? Angular IO is a framework for object oriented web development of single page web applications . It is not an MVC framework, but rather a component-based framework. An Angular IO application is a tree of loosely coupled components . Components are custom HTML elements , which couple structure with functionality. Using custom HTML elements, developers can create a web app declaratively .

6. Review: Single Page Applications Web 1.0 Web 2.0 SPA AJAX Single Page Applications render HTML to the browser once and subsequent communication is AJAX. Server sends static pages.

7. Fond memories: Angular JS Angular JS is a JavaScript framework which allows the user to create custom HTML elements which couple structure and function. Angular JS databinding is built on JavaScript variable scope , and can get confusing. The bootstrap process in Angular JS is based on the ng-app framework HTML directive. Angular JS architecture uses directives and controllers .

8. New Platform: Angular IO Angular IO is a TypeScript -based web development platform . Angular IO is a complete rewrite of Angular JS. Angular IO uses a hierarchy of components for databinding and scope, which is significantly simplified from Angular JS. Angular IO supports named dependency injection . Angular IO is compatible with RxJS reactive programming . Convention: “Angular” == Angular 2.x, Angular IO “Angular JS” == Angular 1.x

9. Angular IO is based on Components Apps built with Angular IO are defined by a tree of components The base of the tree is a root component Entire DOM cascades from the root component

10. TypeScript

11. TypeScript is a Superset of JavaScript TypeScript is a strongly typed superset of JavaScript. .TS files get compiled to .JS files using a TypeScript compiler. The Angular CLI compiles TypeScript in an Angular app (more on this later) You can install a simple TypeScript compiler with NPM: n pm install –g typescript

12. Why switch to TypeScript ? (Skipping TypeScript fundamentals for this talk) JavaScript built from TypeScript is significantly faster , at the expense of human readability. TypeScript strong inline types and decorators add the most run-time efficiency. The authors of Angular JS used a JavaScript optimizer called the Closure Compiler which builds down JavaScript into similar output. The Closure Compiler influenced the decision to move Angular IO to TypeScript You can download the Closure Compiler if you are curious here: https://github.com/google/closure-compiler-js

13. TypeScript Decorators A Decorator can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression , where expression must evaluate to a function that will be called at runtime Example: the @Inject decorator. Inject is defined in the Angular framework and is used to inject named dependencies export class HeroComponent {   constructor( @Inject (' heroName ') private name: string) { } }

14. Components

15. Remember, Angular IO is based on Components Apps built with Angular IO are defined by a tree of components The base of the tree is a root component Entire DOM cascades from the root component

16. Components couple structure and function A component is a TypeScript object class which uses the @Component decorator to tell Angular that it defines a component. Use the @Component metadata to add properties including the HTML template where the structure is defined. Add members to the object class to define functionality. Call member functions on events defined in HTML template Use object class constructor and member functions to work with data /* You n eed to add new component to modules using @ NgModule (more on this later ) */

17. Example Component import { Component, Input } from '@angular/core'; import { Hero } from './hero '; @Component ({ selector: 'hero-detail', template: ` <div * ngIf ="hero"> <h2>{{hero.name}} details!</h2> <div> <label>name: </label> <input [( ngModel )]="hero.name" placeholder="name"/> </div> </div>` }) export class HeroDetailComponent { @Input () hero: Hero ; } Import statements make other exported and platform classes available Use @Component decorator to add metadata. The selector attribute specifies the custom HTML tag which declares your component Match the component class name in UpperCamelCase to the class name in lower-dash-case The template can show inline HTML or point to a file Use @Input decorator to bind local variables to data models. Export your class so other modules cam import it.

18. Code Modules and AppModule Modules organize code into functional units . Modules are loosely analogous to namespaces in C style languages. Organize all modules in a tree structure, with the root module called AppModule at the root. By conve ntion, define AppModule in app.module.ts . AppModule should contain a reference to your base component, called AppComponent by convention.

19. Root AppModule Example import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './ app.component '; @ NgModule ({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } Import AppComponent , where base component is defined. Use NgModule decorator to declare modules

20. Very Basic Angular App src /app/ app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './ app.component '; @ NgModule ({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } s rc /app/ app.component.ts import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: '<h1>{{title}}</h1>', }) export class AppComponent { title = 'Minimal NgModule '; }

21. Putting it All Together Into a Web App

22. Simple JiT Bootstrapping An application is launched by bootstrapping its root module ( AppModule ) The main entry point of the application is main.ts , whi ch contains a statement like below. Angular loads this first. impor t { AppModule } from './app/ app.module '; Index.html should contain an app HTML element. <app></app> Launch your application by adding a bootstrap statement to main.ts : platformBrowserDynamic (). bootstrapModule ( AppModule ); The Angular framework renders AppComponent on the app HTML element and the component tree will cascade from here.

23. Bootstrap Process : Putting it all Together 0. Angular uses a bootstrap statement defined in main.ts to launch the application as discussed above. 1 . On document.ready , the Angular framework looks for a root module defined in your main.ts file using a statement like this: import { AppModule } from './app/ app.module '; 2 . The framework also looks for a root component defined in your app.module.ts file. You will find a statement like this: e xport class AppModule { } 3 . Your AppModule class should contain an import statement pointing to your base app component like this: import { AppComponent } from './ app.component '; 4. When the AppComponent is loaded, it is applied to the <app> HTML element in index.html.

24. Anatomy of an An gular App

25. Angular CLI

26. Angular Command Line Interface Tool The Angular CLI is a Command Line Interface (CLI) to automate your development workflow. The Angular CLI allows you to : C reate a new Angular application R un a development server with LiveReload support to preview your application during development A dd features to your existing Angular application R un your application’s unit tests R un your application’s end-to-end (E2E) tests B uild your application for deployment to production

27. Angular CLI makes Angular easier The Angular CLI streamlines the workflow for creating and building your app. You can use the CLI to set up the basic structure files which we discussed above. The CLI can even set up a basic WebPack server for you so you can serve your new app right away. Once you have Node.js installed, you can install the Angular CLI to get up and running quickly with Angular here: https://github.com/angular/angular-cli

28. Get Started with a basic Angular App Open a command prompt. Use your favorite way to install Node.js globally. Install the Angular CLI using npm install -g angular-cli Find a working directory and switch to it. Think of a catchy name for your new project. Run ng new catchyNameHere Run ng build Run ng serve

29. Useful Links

30. Selected Sources https:// angular.io/guide/architecture http :// www.eclipse.org/community/eclipse_newsletter/2017/january/article1.php https:// github.com/angular/angular-cli https:// angular.io/guide/ts-to-js https://medium.com/dev-channel/closure-compiler-for-js-fun-and-profit-3b6c99f4fd31 https:// www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html https:// toddmotto.com/creating-your-first-angular-2-component https:// scotch.io/tutorials/creating-your-first-angular-2-components https:// toddmotto.com/bootstrap-angular-2-hello-world https:// angular.io/guide/webpack https://angular.io/guide/ajs-quick-reference