angularfileadmin.cs.lth.se/cs/education/edaf90/lectures/l9.edaf90.pdf · angular react is the...
TRANSCRIPT
AngularEDAF90 WEB PROGRAMMING
PER ANDERSSON
Singe Page Web Application Framworks
There are three dominating frameworks for the front end• React• Vue• Angular
React is the minimalistic approachAngular aims for a complete package of features and toolsVue is in the middle
EDAF90 Angular 1
Common FeaturesThe application is built from a tree of components.A component have:• a ”template“ for layout• an object with:
– properties for state– functions for behaviour
The framework:• maintain the application component tree (instantiates components)• a mechanism for parent↔ child communication• change detection: update the DOM when the application objects change• life cycle hooks
EDAF90 Angular 2
Templates - React
React:• render() — a pure function generating a tree of react elements• JSX makes it look like html• but uses camelCase for some names• assumption:
– Uppercase names are react components– lower case names are html tags
• JSX can embed JavaScript code• conditions and loops are native JavaScript code• babel translates the templates to JavaScript code (ahead of time)
EDAF90 Angular 3
Templates - Angular
Angular:• is html (text in a separate file, or string template)• components can have any legal XML tag name• conditions and loops — use directives• can embed ”TypeScript“ code• context/namespace is the component object• pipes• angular template compiler - just in time, or ahead of time compilation
EDAF90 Angular 4
Angular Template Syntax
Data Binding:• interpolation <div>{{ expression without side effects }}</div>• event binding: <button (click)="deleteHero()">
• bind DOM properties: <img [src]="myImageUrl">
• two way data binding: <input [(ngModel)]="name">
EDAF90 Angular 5
Angular Template Syntax
Loops and conditions:• <span *ngIf="value>10">
• <li *ngFor="let value of myList">
• <ul [ngSwitch]="me.framework"><li *ngSwitchCase="angular">angular</li><li *ngSwitchDefault>html</li>
EDAF90 Angular 6
Directives
Angular• looks like attributes in the template• functions that have a reference to the DOM
– attribute directives– structural directives
• can be parametrised• you can define own directives
EDAF90 Angular 7
Pipes
Angular• functions that can be chained in the template• angular comes with a stock of pipes:
– date, uppercase, lowercase, currency, percent, json, async
• can be parametrised• you can define own pipes
{{ birthday | date:’fullDate’ | uppercase}}{{ <li *ngFor="let item = http(url) | async"}}
EDAF90 Angular 8
Defining ComponentsReact• render function: function MyComponent(props){ return ... }
• class MyComponent extends React.Componentrender(){ return ... }
Angular
child
@Component({selector: ’app-my-component’,templateUrl: ’./my.component.html’,styleUrls: [’./my.component.css’]
})export class MyComponent { }
EDAF90 Angular 9
Parent-Child Communication
React• no syntax for declaring an component interface• parent→ child:
– parent pass values as html attributes– values are placed in the props object– child→ parent, parent must pass a call back function
EDAF90 Angular 10
Parent-Child CommunicationAngular• child declare interface: @Input() and @Output()• paren uses data binding in template• a parent can access a child object using @ViewChild()
child
export class MyComponent {@Input() item: string;@Output() myEvent = new EventEmitter<string>();
parent
<app-my-component[item]="currentItem"(myEvent)="addItem($event)">
</app-item-detail>
EDAF90 Angular 11
Change Detection
React• the render function:
– must be a pure function of this.state, this.props
• any state change must be done using setState(newState)
Angular• must use data bindings in the template• you do not need to tell angular when the state changes• angular detects any change in your objects and updates the DOM
EDAF90 Angular 12
ServicesReact• not supported: use the global name space
Angular• Dependency Injection: parameters in the component constructor• singleton objects accessible by any component• service: a TypeScript class
@Injectable({providedIn: ’root’,
})export class MyService {}
EDAF90 Angular 13
Modules
React• use JavaScript modules
Angular• encapsulates components, directives, pipes, and services• exports the public parts• can be lazy loaded• modules can import other modules• an application is always a root module
EDAF90 Angular 14
Modules@NgModule({declarations: [AppComponent,ChildComponent
],imports: [BrowserModule,AppRoutingModule,FormsModule
],providers: [],exports: [ ChildComponent ]bootstrap: [AppComponent]
})export class AppModule { }
EDAF90 Angular 15
Routing in Angularconst appRoutes: Routes = [{ path: ’compose-salad’, component: ComposeSaladComponent
},{ path: ’’,redirectTo: ’/compose-salad’,pathMatch: ’full’
},{ path: ’**’, component: PageNotFoundComponent }
];@NgModule({imports: [RouterModule.forRoot(appRoutes, { enableTracing: true })
],})
EDAF90 Angular 16
Routing in Angular
<nav><a routerLink="/compose-salad" routerLinkActive="active">Komponera din egen sallad
</a><a routerLink="/orders" routerLinkActive="active">Order
</a></nav>
<router-outlet></router-outlet><!-- Routed components go here -->
EDAF90 Angular 17
Command Line Tools
React• npx create-react-app my-app
• coderct gc <ComponentName>• npm serve
Angular• ng new my-app
• ng generate <schematic>
• ng build --prod
• ng serve
EDAF90 Angular 18
Libraries
React• many from 3rd party suppliers
Angular• many built in
– http– routing– i18n– reactive forms, template forms
• many from 3rd party suppliers
EDAF90 Angular 19