Using Visual Studio with Webpack for Angular Development

Introduction With the release of Angular 2 and ASP.NET Core in 2016, the two technologies have become a common pair for .Net web developers. The .NET Core’s platform agnostic ability has made it more appealing even for the non .Net developers. Moreover, Microsoft has been pushing hard to reach this outside market and introduced Visual […]

Angular AOT Compilation and Lazy Loading

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 […]

Angular Unit Testing

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 […]

Angular Forms

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 […]

Angular Animations

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 } […]

Angular Directives and Pipes

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 […]

Angular Routing and Navigation

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 […]

Angular with RxJS

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 } […]

Angular Services and Providers

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 […]

Angular Components

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 […]

Angular Modules

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 […]

Introduction to AngularJS

This is Angular Version 1 Introduction course to AngularJS (v1) from MVA.   @section scripts{       <script src=”~/Scripts/angular.js”></script>    <script src=”~/Scripts/angular-route.js”></script>    <script src=”~/Scripts/angular-resource.js”></script>    <script src=”~/Scripts/angular-animate.js”></script>    <script src=”~/Client/Scripts/AtTheMovies.js”></script>    <script src=”~/Client/Scripts/MovieService.js”></script>    <script src=”~/Client/Scripts/ListController.js”></script>    <script src=”~/Client/Scripts/DetailsController.js”></script>    <script src=”~/Client/Scripts/EditController.js”></script> } <h1>At the movies</h1> <div data-ng-app>    {{true ? “true” : “false”}} </div> Module = is an abstraction that allows you to […]