angularfileadmin.cs.lth.se/cs/education/edaf90/lectures/l9.edaf90.pdf · angular react is the...

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