Getting Started With Angular
2 likes784 views
The document provides an extensive guide to getting started with Angular, including comparisons of Angular with other frameworks, a basic Angular setup, and code examples for creating applications. It discusses various Angular concepts such as data binding, forms, and architectural patterns while also introducing tools like Angular CLI and performance tips. Additionally, it includes references to resources for further learning and development within the Angular ecosystem.
![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 { }](https://image.slidesharecdn.com/gettingstartedwithangular-170116170604/85/Getting-Started-With-Angular-20-320.jpg)
![Built-in Components
<div *ngIf="str == 'yes'"></div>
<div [ngSwitch]="myVar">
<div *ngSwitchWhen="'A'"></div>
</div>
<div [ngStyle]="{color: colorinput.value}"></div>
<div [ngClass]="{bordered: true}"></div>
<div *ngFor="let item of items;
let num = index"></div>](https://image.slidesharecdn.com/gettingstartedwithangular-170116170604/85/Getting-Started-With-Angular-25-320.jpg)
![The asterisk (*) effect
<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
Our heroes are true!
</p>
<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
<p>
Our heroes are true!
</p>
</template>](https://image.slidesharecdn.com/gettingstartedwithangular-170116170604/85/Getting-Started-With-Angular-27-320.jpg)
![Template-Driven Validation
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#name="ngModel" >
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
Name is required
</div>](https://image.slidesharecdn.com/gettingstartedwithangular-170116170604/85/Getting-Started-With-Angular-29-320.jpg)
![Reactive Forms Validation
<form [formGroup]="heroForm" *ngIf="active" (ngSubmit)="onSubmit()">
<label for="name">Name</label>
<input type="text" id="name" class="form-control"
formControlName="name" required >
<div *ngIf="formErrors.name" class="alert alert-danger">
{{ formErrors.name }}
</div>
</form>](https://image.slidesharecdn.com/gettingstartedwithangular-170116170604/85/Getting-Started-With-Angular-30-320.jpg)
![Upgrading from Angular 1.x to 2.x
Big Bang
Incremental
ngUpgrade import {UpgradeAdapter} from ‘@angular/upgrade';
var adapter = new UpgradeAdapter();
var app = angular.module('myApp', []);
adapter.bootstrap(document.body, ['myApp']);](https://image.slidesharecdn.com/gettingstartedwithangular-170116170604/85/Getting-Started-With-Angular-34-320.jpg)
Getting Started With Angular
- 1. Getting Started with Matt Raible • @mraible
- 2. Blogger on raibledesigns.com UI Architect and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Web Framework Connoisseur Who is Matt Raible? Bus Lover Stormpath Developer Evangelist
- 4. Speed to Market & Cost Reduction Complete Identity solution out-of-the- box Security best practices and updates by default Clean and elegant API/SDKs Little to code, no maintenance
- 7. Jobs on LinkedIn (US) January 2017 0 1,500 3,000 4,500 6,000 Backbone AngularJS Ember Knockout React
- 8. Jobs on LinkedIn (US) January 2017 0 650 1,300 1,950 2,600 Backbone Angular 2 Ember Knockout React
- 9. Jobs on LinkedIn (US) #ItsJustAngular January 2017 0 2,250 4,500 6,750 9,000 Backbone Angular Ember Knockout React
- 10. LinkedIn Skills January 2017 0 100,000 200,000 300,000 400,000 Backbone AngularJS Knockout Ember React
- 11. LinkedIn Skills January 2017 0 22,500 45,000 67,500 90,000 Backbone Angular 2 Knockout Ember React
- 12. LinkedIn Skills #ItsJustAngular January 2017 0 50,000 100,000 150,000 200,000 Backbone Angular Knockout Ember React
- 13. Google Trends
- 15. Who wants to learn ?
- 16. Hello World with AngularJS <!doctype html> <html ng-app> <head> <title>Hello World</title> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="name" placeholder="Enter a name here"> <hr> <h1>Hello {{name}}!</h1> </div> <script src="http://code.angularjs.org/1.5.8/angular.min.js"></script> </body> </html>
- 18. Hello World with Angular <!DOCTYPE html> <html> <head> <title>Angular QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <body> <my-app>Loading AppComponent content here ...</my-app> </body> </html>
- 19. app/main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
- 20. 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 { }
- 21. app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
- 22. Angular 2+ Choices Choose a language JavaScript (ES6 or ES5) TypeScript Dart Anything that transpiles to JS Setup dev environment Install Node Choose Package Manager Choose Module Loader Choose Transpiler Choose Build Tool
- 23. Easiest ways to get started Angular QuickStart https://github.com/angular/quickstart Angular Seed https://github.com/mgechev/angular-seed Angular CLI https://github.com/angular/angular-cli
- 24. Angular Demo! Start with angular-cli Build Search Feature Data via HTTP Form Validation CSS Frameworks Security
- 25. Built-in Components <div *ngIf="str == 'yes'"></div> <div [ngSwitch]="myVar"> <div *ngSwitchWhen="'A'"></div> </div> <div [ngStyle]="{color: colorinput.value}"></div> <div [ngClass]="{bordered: true}"></div> <div *ngFor="let item of items; let num = index"></div>
- 26. The asterisk (*) effect https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asteris <div *ngIf="hero">{{hero}}</div> <div *ngFor="let hero of heroes">{{hero}}</div>
- 27. The asterisk (*) effect <!-- Examples (A) and (B) are the same --> <!-- (A) *ngIf paragraph --> <p *ngIf="condition"> Our heroes are true! </p> <!-- (B) [ngIf] with template --> <template [ngIf]="condition"> <p> Our heroes are true! </p> </template>
- 28. Angular Forms Template-Driven import { FormsModule } from '@angular/forms'; Reactive Forms import { ReactiveFormsModule } from '@angular/forms';
- 29. Template-Driven Validation <label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div>
- 30. Reactive Forms Validation <form [formGroup]="heroForm" *ngIf="active" (ngSubmit)="onSubmit()"> <label for="name">Name</label> <input type="text" id="name" class="form-control" formControlName="name" required > <div *ngIf="formErrors.name" class="alert alert-danger"> {{ formErrors.name }} </div> </form>
- 31. Data Architectures MVW / Two-way binding Flux Observables
- 32. Observables and RxJS Promises emit a single value whereas streams emit many values Imperative code “pulls” data whereas reactive streams “push” data RxJS is functional Streams are composable
- 33. Style Guides John Papa’s Angular Style Guide https://github.com/johnpapa/angular-styleguide Official Angular Style Guide https://angular.io/styleguide
- 34. Upgrading from Angular 1.x to 2.x Big Bang Incremental ngUpgrade import {UpgradeAdapter} from ‘@angular/upgrade'; var adapter = new UpgradeAdapter(); var app = angular.module('myApp', []); adapter.bootstrap(document.body, ['myApp']);
- 35. Cool Projects Web Workers and Service Workers Universal Angular 2 Electron ng-bootstrap and Fuel-UI Angular Material JHipster, baby!
- 36. ng-book 2 A comprehensive guide to developing with Angular 2 Sample apps: Reddit clone, Chat with RxJS Observables, YouTube search-as-you-type, Spotify Search How to write components, use forms and APIs Over 5,500+ lines of code!
- 37. Who’s using Angular? Made with AngularJS https://www.madewithangular.com Angular Expo http://angularexpo.com Awesome Angular https://github.com/AngularClass/awesome-angular2
- 38. Angular Performance Checklist Network performance Bundling Minification and Dead code elimination Ahead-of-Time (AoT) Compilation Compression Pre-fetching Resources Lazy-Loading of Resources Caching https://github.com/mgechev/angular-performance-checklist
- 39. Shortcut to becoming an Angular Expert JUST DO IT.
- 40. https://github.com/mraible/ng-demo http://gist.asciidoctor.org/?github- mraible/ng-demo//README.adoc Shows what we did today, + unit tests, integration tests and continuous integration! Angular and Angular CLI Demo
- 41. Open Source Angular Projects AngularJS SDK Angular SDK (beta) JHipster 4 (almost beta)