Tutorial by Examples: angular

D3.js chart with Angular v1

HTML: <div ng-app="myApp" ng-controller="Controller"> <some-chart data="data"></some-chart> </div> Javascript: angular.module('myApp', []) .directive('someChart', function() { return { restrict: 'E', scope: {dat...

d3.js • Using D3 with other frameworks

The Simplest Possible Angular Hello World.

Angular 1 is at heart a DOM compiler. We can pass it HTML, either as a template or just as a regular web page, and then have it compile an app. We can tell Angular to treat a region of the page as an expression using the {{ }} handlebars style syntax. Anything between the curly braces will be compi...

AngularJS • Getting started with AngularJS

Minification in Angular

What is Minification ? It is the process of removing all unnecessary characters from source code without changing its functionality. Normal Syntax If we use normal angular syntax for writing a controller then after minifiying our files it going to break our functionality. Controller (Before mini...

AngularJS • Getting started with AngularJS

1. Install Angular 2 dependencies with compiler

NOTE: for best results, make sure your project was created using the Angular-CLI. npm install angular/{core,common,compiler,platform-browser,platform-browser-dynamic,http,router,forms,compiler-cli,tsc-wrapped,platform-server} You don't have to do this step if you project already has angular 2 an...

Angular 2 • Ahead-of-time (AOT) compilation with Angular 2

2. Add `angularCompilerOptions` to your `tsconfig.json` file

... "angularCompilerOptions": { "genDir": "./ngfactory" } ... This is the output folder of the compiler.

Angular 2 • Ahead-of-time (AOT) compilation with Angular 2

3. Run ngc, the angular compiler

from the root of your project ./node_modules/.bin/ngc -p src where src is where all your angular 2 code lives. This will generate a folder called ngfactory where all your compiled code will live. "node_modules/.bin/ngc" -p src for windows

Angular 2 • Ahead-of-time (AOT) compilation with Angular 2

Spying on an angular service

In this example we have a service, let's call it search service that has a method called search() which will initiate a get request to a back end API. function SearchService($http) { const service = {}; service.search = function() { return $http({method: 'GET', url: `/api/s...

jasmine • Spies

Spying on an angular service that doesn't call back end service

jasmine • Spies

Angular 2 for-loop

For live plnkr click... <!doctype html> <html> <head> <title>ng for loop in angular 2 with ES5.</title> <script type="text/javascript" src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script> <scr...

Angular 2 • Angular - ForLoop

Angular 2: Reactive Forms (a.k.a Model-driven Forms)

This example uses Angular 2.0.0 Final Release registration-form.component.ts import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ templateUrl: "./registration-form.html" }) export class ExampleComponent { ...

Angular 2 • Angular 2 Forms Update

Read from an Restful API in Angular2

To separate API logic from the component, we are creating the API client as a separate class. This example class makes a request to Wikipedia API to get random wiki articles. import { Http, Response } from '@angular/http'; import { Injectable } from '@angular/core'; import { Observabl...

Angular 2 • CRUD in Angular2 with Restful API

Using AoT Compilation with Angular CLI

The Angular CLI command-line interface has AoT compilation support since beta 17. To build your app with AoT compilation, simply run: ng build --prod --aot

Angular 2 • Ahead-of-time (AOT) compilation with Angular 2

Angular 2 Forms ( Reactive Forms ) with registration form and confirm password validation

app.module.ts Add these into your app.module.ts file to use reactive forms import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.comp...

Angular 2 • Angular 2 Forms Update

use Workers in angular2 service

/app/services/greeting.service.ts : import { Injectable } from '@angular/core'; import {greetingTypes,request,response} from './greeting.interface' @Injectable() export class Greeting{ private worker; constructor(){ this.worker = new Worker('../workers /gr...

nativescript • Multithreading Model

Angular2 aliased exported values

Angular2 provides several exported values that can be aliased to local variables. These are: index first last even odd Except index, the other ones take a Boolean value. As the previous example using index, it can be used any of these exported values: <div *ngFor="let item of item...

Angular 2 • How to use ngfor

Handling session storage through service using angularjs

Session storage service : Common factory service that will save and return the saved session data based on the key. 'use strict'; /** * @ngdoc factory * @name app.factory:storageService * @description This function will communicate with HTML5 sessionStorage via Factory Service. */ a...

AngularJS • Session storage

AngularJS Getting Started Video Tutorials

There are a lot of good video tutorials for the AngularJS framework on egghead.io https://egghead.io/courses/angularjs-app-from-scratch-getting-started https://egghead.io/courses/angularjs-application-architecture https://egghead.io/courses/angular-material-introduction https://egghead.io/co...

AngularJS • Getting started with AngularJS

Displaying current angular2 version used in your project

To display current version, we can use VERSION from @angular/core package. import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1> <h2>Current Version: {{ver}}</h2> `, }) export class AppCompone...

Angular 2 • Commonly built-in directives and services

7 Deadly Sins of AngularJS

Below is the list of some mistakes that developers often make during the use of AngularJS functionalities, some learned lessons and solutions to them. 1. Manipulating DOM through the controller It's legal, but must be avoided. Controllers are the places where you define your dependencies, bind you...

AngularJS • AngularJS gotchas and traps

Getting started with Angular 2 with node.js/expressjs backend (http example included)

We will create a simple "Hello World!" app with Angular2 2.4.1 (@NgModule change) with a node.js (expressjs) backend. Prerequisites Node.js v4.x.x or higher npm v3.x.x or higher or yarn Then run npm install -g typescript or yarn global add typescriptto install typescript globally ...

Angular 2 • Getting started with Angular 2