Angular Material is a UI component framework that follows Google’s Material Design specification. It was created and supported by the Angular development team. More information about Material Design: Material Design Setting up Material Project Create a new ng project as normal. Then run commands to add ng material ng new material ng add @angular/material@11.0.0 […]
Revisiting Angular
Angular is a platform and framework for building client applications in HTML and TypeScript. The basic building blocks of an Angular application are NgModules, which provide a compilation context for components. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a root module that enables bootstrapping, […]
Angular and HTTP Requests (v4.3+)
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 […]
Angular CLI Revisited
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. […]
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 Component Communication
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 […]
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 […]
Using Angular2, Webpack and Visual Studio 2015
Most articles out there about Angular2 with .Net use .NET Core and Visual Studio Code as the IDE (with node serving behind it). For the few of us procrastinators who haven’t moved on to the latest, its difficult to find examples and documentation on using Angular2+ with old .Net 4.5+. Full blog post about this […]
ASP.NET Core, Angular2 on Azure using OAuth
This is a simple app that is hosted on Azure. It uses ASP.NET Core with Angular2 front end and WebAPI on the back. The site and database are hosted on Azure and use Azure’s EasyAuth (link tbd) authentication service. This service allows for user login using their Microsoft, Google or Facebook accounts. The app has […]
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 […]