Comprehensive Angular 2 Review of Day 3

Size: px

Start display at page:

Download "Comprehensive Angular 2 Review of Day 3"

Oscar Lewis
5 years ago
Views:

1 Form Validation: built in validators: added to template: required minlength maxlength pattern form state: state managed through NgModel classes: control has been visited: ng-touched or ng-untouched control s value has changed: ng-dirty or ng-pristine control s value is valid: ng-valid or ng-invalid validation messages: in component: have logic to determine validation state: errors for form errors for form element in template view: bind validation state logic to dom elements: error messages show only when there are errors to display validation styles: define styles for form state classes:.ng-valid{...style goes here } e.g..ng-invalid{border-left: 5px solid #a94442;} apply style: use ngclass directive in html Page 1 of 7

2 e.g. [ngclass]= seterrorclass(projectname) where the method in the component determines the correct style to apply based on state of DOM obejct Data Architecture: options for accessing data: Ajax Http Requests (XHR) WebSockets Indexdb LocalStorage Service workers etc implementation options: Angular s MVW Flux Observables/Reactive Programming etc. HTTP: setup: HTTP: import HttpModule provides API: Http oject: has HTTP methods, e.g. get: supports making calls to RESTful applications can take configuration object to set things like time-out Observables and Reactive Programming: import needed operators: import rxjs/rx //imports all Page 2 of 7

3 import rxjs/add/operator/map //imports map operator Promises: emit a single value code in services: use service to make Http calls and return a Promise object http.get(url).topromise.then(successmethod).catch(errormethod) calling topromise on Http method returns the Promise object the success method works with the Response object the error method uses the Promise object to call reject and port error message code in components: call service s function doing the http work and receive Promise object use Promise to handle output: promise.then(methodtosaveresult).catch(methodforerror) method to save result should copy the response to local variable method to handle error should set up error message for view Observables and Reactive Programming: Angular 2 comes with RxJS module RxJS = Observables + Operators +Schedulers Observables emit many values code in services: http.get(url).map(successmethod).catch(errormethod) httt.get returns an Observable call the methods of the observable: map: Emits the given constant value on the output Observable every time the source Observable emits a value. catch: Page 3 of 7

4 Catches errors on the observable to be handled by returning a new observable or throwing an error. code in components: call service s function doing the http work and receive Observable object use Observable to handle output: Observable.subscribe(methodToSaveResult, methodforerror) method to save result should copy the response to local variable method to handle error should set up error message for view Routing: single page applications challenges: browser records pages downloaded from the server 1 st page all other navigation is handled internally and supported y background server calls: history is not updated url is not updated navigating between sibbling root components requires support Router API: supports navigation adds to browser history updates url set up: have 2 or more root components: update default component view with links to other root component(s) configure router: set up Routes object: path + component default set with path + redirectto + pathmatch Page 4 of 7

5 export import to app module update root html to use the Router Directives: routerlinkactive: adds/removes classes from an HTML element when an associated routerlink contained on or inside the element becomes active/inactive RouterLink: Binds a clickable HTML element to a route Clicking the bound element triggers navigation. Router-outlet: Marks where the router should display a view navigation with parameters: route parameter: value is required for navigation, e.g. project id to get to the projects detail view html link with route parameter: [routerlink]= [ /projects, (project.id+1)]: where projects is a path in the routes and project.id is the required parameter query parameter: value is optional to the navigation, e.g. session id html link with query parameter: [routerlink]= [ /projects, (project.id+1), {testparam: test }] where testparam is an optional parameter implementing in code: html has DOM event bound to method: (click)= onnext(<route parameter>) component s onnext(..) method: call the navigate method of the router: this.router.navigate( <path>, <route parameter> ) reactive navigation: use case: Page 5 of 7

6 routes are defined as objects, injected into the app directly loading is independent from the Components themselves routes have Guards that run whenever the route tree passes through it: completely independent from which Component being loaded changes in url that do not actually change routes, i.e. only parameters changing from /user/1 to /user/2: these do nothing by default required to listen to these changes and trigger behaviour Routes, RouteParams, QueryParams, RouteData all are Observables that any Component can listen to more flexible and simpler: e.g. supports creation of things like a breadcrumb component, or anything more specific or unique can subscribe to navigation events: synchronously: retrieve the matrix parameters scoped to current route to obtain observable and subscribe to it let id = this.route.snapshot.params[<route param>]//snapshot is ActivatedRouteSnapshot this.http.get(this.projectsurl + id).map(this.extractdata).catch(this.handleerror); asynchronously: subscribe to the observable returned from from the ActivatedRoute.params this.route.params.subscribe( )//route is ActivatedRoute Location Strategies: HTML5 navigation / push state: default Page 6 of 7

7 <base href= / > e.g. update root HTML: and/or <script> document.write('<base href="' + document.location + '" />'); </script> HashLocationStrategy: hash mark style-guide.html e.g. update routing configuration (app.routing.ts): RouterModule.forRoot(appRoutes,{useHash: true}); Page 7 of 7

Angular 2 Programming

Angular 2 Programming Course Overview Angular 2 is the next iteration of the AngularJS framework. It promises better performance. It uses TypeScript programming language for type safe programming. Overall you should see better