Tag: angular

In Angular2 the HTTP requests were done using the HTTP module. This module was missing some of the features and so in Angular4 there was a new set of APIs for HTTP requests. This was in the HTTP Request Client module. As of Angular5, the HTTP module (from Angular2) has been deprecated and so developers […]

The Angular CLI can be used to create and setup Angular projects. It follows best practices and utilizes conventions to make the project easily understandable and maintainable. To start, install the Angular CLI through NPM. npm install -g @angular/cli Once installed we call the CLI using the “ng” command. Create a new app as so. […]

Lazy loading is about controlling when modules or components get loaded. Lazy loading only loads objects when directed to. This is controlled through the routing engine with the “loadChildren” property and the path to the module being lazy loaded. { path: ’employees’ loadChildren: ‘app/employees/employees.module#EmployeeModule’ } Note that the module’s name is specifically called out in […]

The unit test framework in Angular is called Jasmine. Jasmine is what creates the tests. These tests are then run in another framework called Karma. When using Angular CLI, a unit test can be created by running ng generate service testable Generally the convention for unit test file names are component.service.ts component.service.spec.ts. The test class […]

Note: material below were from Angular course by Deborah Kurata (see link below). Below are my notes and her charts taken from that course. Some situations where commuication takes place in an Angular application: Component to Template (Child Components) View updates React to user event Perform a task Check form or control state Component to […]

Template Driven Forms To use template driven forms, make sure that FormsModule is imported from @angular/forms. This can be brought in at the app.module level if needed throughout the application. <h3>Position</h3> <form #form=”ngForm”> <input name=”title” ngModel> <div> <button type=”submit”>Submit</button> </div> </form> {{ form.value | json }} In the last line above, the form.value is processed […]

To use Angular animations, it must be installed from NPM. @angular/animations It is then imported in the AppModule as import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’; The animations can now be called inside any component. It is defined inside the component’s decorator underneath the “animations” property. import { Component } from ‘@angular/core’; import { trigger,state,style,transition,animate,keyframes } […]

Directives are attributes that are placed inside DOM elements or inside of a component. For example: <app-org-chart myDirective></app-org-chart> A class is declared as a directive by using the @Directive decorator. The selector is usually set as “[appDefault]”. A directive (or any class) can access the DOM by using the ElementRef service. This needs to be […]

Client-side routing (all done on the client through angular’s routing engine). The index.html must have the <base> element <!doctype html> <html> <head> <metacharset=”utf-8″> <title>Myquickstart</title> <base href=”/”> <metaname=”viewport”content=”width=device-width, initial-scale=1″> <linkrel=”icon”type=”image/x-icon”href=”favicon.ico”> </head> <body> <app-root>Loading…</app-root> </body> </html> The <base> element is recognized by the router and instructs how to compose navigation URLs. The app.module.ts file must have the […]

The HttpModule is Angular’s built-in module for working with HTTP requests/responses. This needs to be imported in the module that will contain the service making the calls. import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { FormsModule } from ‘@angular/forms’; import { HttpModule } from ‘@angular/http’; import { AppComponent } […]

We provide services so that the dependency injection can inject them when needed. By best practice, we name services to be provided with the word “Service”, ex SalaryService. A service is simply a class. Note that services have the “@Injectable” decorator. import { Injectable } from ‘@angular/core’; @Injectable() export class SalaryService { getSalaries() { return […]

Components contain metadata at the top and exported classed on the bottom. Example: @Component({   selector: ‘app-root’,   template: ‘<app-position></app-position>’,   styleUrls: [‘./app.component.css’] }) export class AppComponent {   private jobPosition = “CEO”;   hidePosition = false;   getData() {     return this.jobPosition;   } } Selectors The selector defines how a component is added […]

A module is the bucket that contains the basic building blocks (components, services, etc) of an angular application. Every Angular application must have at least one module. Best practice says we define this as app.module. A module has the following key items defined within it. Declarations – list of components/directives/pipes that included in this module […]