Please enable JavaScript.
Coggle requires JavaScript to display documents.
Angular 6 (Data binding and async setInterval(, 1000)
digestCycle…
Angular 6
Data binding and async
- setInterval(, 1000)
- digestCycle
Template Interpolation {{}}
- methods calls
- member variables
-Every time value changes, view updates automatically
ngFOR directive:attribute you add to element |
- <p *ngFor = "let phonenumber of user.phone">{{phoneNumber}}</p>
- <div *ngIf="user.phone.length">
Two-way data-binding
- data part of your component, then bind it to view, and have that view bind it back to your component
- use ngModel to do 2 way data-binding
- import FormsModule into app.module.ts from angular/forms
- [(ngModel)] - two way data binding
- banana in a box:
- square bracket picks up value from component and uses it in view
- we used parenthesis on click
- square bracket is data flowing from component to view
- parenthesis is data flowing from view to component
Creating and using multiple modules
- module is a thing that consolidates different components
- container that contains these different things: app-component
- AppModule is container for appContainer and there are others module containers for other components
- when you build app, you create many feature modules
- imports - is used to establish dependency on other modules: AppModule needs AddressCardModule. get to use components in that module
- ng generate module view
- creating component under the view module: ng generate component view/view-component
- import, exports, declarations
- two types of imports: typescript import and angular import (module import)
Creating a service
- component can be just a service instead of view
- Services are classes that have methods used by other components
- ng generate service name
- no html or css gets generates. only ts file
Injectable - means it's a service
- service needs to be part of module: declare it inside providers
How do we call a method from service ?
- using dependency injection
- tell Angular that you need instance of service:
- create argument in constructor with that type:
- constructor(private svc: Testservice)
- take copy of svc and save in member variable
- Angular injects service this way
Service Injection Context
Inner module get services provided to parent module (like app-root). Services don't work like modules. they are different. services not restricted to a module that they are provided in.
- In case of component, component is only available within that module. In case of providers, angular creates common shared api.
- list of services that are available to all the components in your application
- angular created service for us but did not add it to any of the modules
HTTP Client Service
- making REST http calls
- import module that service comes from: import it in root (doesnt matter where): imports: [HttpClientModule]
- Inject http: HttpClient and make it private member var
- make REST api call in ngOnInit(){}
this.http.get("url");
- promise: asynchronous operation: called observable in Angular
- returns observable as response
- obs.subscibe((response)=> console.log("Got the response:"+response))
- response?.login if it can be undefined
Routing
- in single page app, you don't do full page refresh
- DOM dynamically changes
- switch between views happens with concept of routing
- Routing:
- URL based routing: foo.com/view1, foo.com/view2
- First define your routes in your application
- create angular components for each view (one for each route)
- Map it to root component that's responsible for handing view in that route
create angular project with routing
- ng new project-name --routing
- pass object to routes array:
- generate Home component and import in routing.module.ts:
- {path: 'home', component: HomeComponent}
- go to app.component.html:
Angular takes home html page and plug it into <router-outer></router-outlet>
Default route and Handle 404
- {path: ' ', component: DefaultComponent}
- if you wanna redirect if someone goes to /:
- path: ' ', redirectTo: '/home' , pathMatch: 'full'
- Error:
- {path: '**', component: page-not-found}
Configuring Child routes
{} route object has property has children and its value is another route
- nested routes
- create a router outlet in the settings component.html
- wildcards work on their own level
- there are also access route parameters, lazy routes,: look at documentation
Navbar
- don't let browser to load full page url; remember this is single page
- routerLink directive:
- <a routerLink="home">Home></a>
- or use Member variable way:
<a [routerLink]="homeRoute">Home</a>
- or define routes object with url and loop through with ngfor and show in view
Next steps
- Jasmine writing tests
- Deep Dive into Components
- Deep dive into routing
- RxJS (observables)
- State management: ngRx
-
Angular technologies
- Angular
- JS/Typescript
- Angular CLI
- Reactive programming, RxJS, Observables, operators
- Jasmine, Karma (testing)
- Redux, ngRx
Setting up
- nodejs
- editor: Atom
- Angular CLI : creates application that already works, right out of the box
-
App Component
<app-root></app-root>
- app folder: html, css(view), ts(logic)
- use selector
Component
- every angular component is mainly a typescript class. think of the HTML and CSS files as just extra attachments to the main typerscript file.
- first create class
- register class as angular component by adding metadata to class Component
Dynamic component
- compute and render in html
- it is called data-binding
- Data binding in Angular refers to binding the data in the component instance to the HTML template. Any changes to the data automatically get updated in the view!
Lifecycle of an angular component
- created, initialized, destroyed: lifecycle events
- instance of class created when you use selector. when created JS runs with constructor to populate data. You can also feed input into object using Input. After creating it, it populates values. difference between constructor and input. sets input value after Angular creates an object.
- Angular provides lifecycle hooks, certain methods thats called when certain lifecycle occurs
- when component fully initialized, ngOnInit() is called. put your code inside Init.
- other lifecycle events exist. Lifecycle hooks -> angular website
- ngOnChanges()
- ngOnInit()
- ngDoCheck()
- ngOnDestroy()
- Your components can implement that interface:
- Card implements OnInit{}
Taking object as input rather than individual params
- create file called user.model.ts and create your model
- export class User{
name: string;
designation: string,
address: string,
phone: string[]
}
- import user into component
- Input('user') userObj: User;
- now user needs to send instance of the class
- parent component needs to pass that instance to child component. so it should be initialized be a member variable
- then in HTML, <app-comp [user] = "userVariableObj"></app-comp>
Styling Angular Components
- css file.
- styling in certain css file only works for that component
- .name[_ngcontent-c1] : extra appended thing so styling added only to one component. It creates some attribute for your component div
- how about global styling? at root of project, you have styles.css
Handling click events
- create member variable status of collaps
- <div *ngIf="!isCollapsed">
- tell angular to run some function when button is clicked: <button (click)="toggelCollapse()">
Building Angular App
- won't use ng serve in production
- when you load site, it loads many JS files. but you wanna minify those files and apply a lot of optimizations
- When you deploy Angular application, it's basically gonna be 3 files: html, css, JS
- you use ng build and it generates 3 files from your entire project .
- the folder is called build-proj and you can deploy it
- To test it: install http-server npm and host that directory there
- ng build --prod:
- this way Angular will automatically minify files
- also does AOT (ahead of time compilation): performs many optimization
- generates hash value for files for caching purposes