Tutorial by Examples: angular

Showcasing all common Angular constructs

The following example shows common AngularJS constructs in one file: <!DOCTYPE html> <html ng-app="myDemoApp"> <head> <style>.started { background: gold; }</style> <script src="https://code.angularjs.org/1.5.8/angular.min.js">&lt...

AngularJS • Getting started with AngularJS

Angular expressions - Text vs. Number

This example demonstrates how Angular expressions are evaluated when using type="text" and type="number" for the input element. Consider the following controller and view: Controller var app = angular.module('app', []); app.controller('ctrl', function($scope) { $sco...

AngularJS • Built-in directives

Install angular2 with angular-cli

This example is a quick setup of Angular 2 and how to generate a quick example project. Prerequisites: Node.js v4 or greater. npm v3 or greater or yarn. Open a terminal and run the commands one by one: npm install -g @angular/cli or yarn global add @angular/cli depending on your choi...

Angular 2 • Getting started with Angular 2

Using ControllerAs in Angular JS

In Angular $scope is the glue between the Controller and the View that helps with all of our data binding needs. Controller As is another way of binding controller and view and is mostly recommended to use. Basically these are the two controller constructs in Angular (i.e $scope and Controller As). ...

AngularJS • Controllers

Simple Class Extending angular's Http class

import { Http, Request, RequestOptionsArgs, Response, RequestOptions, ConnectionBackend, Headers } from '@angular/http'; import { Router } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/empty'; import 'rxjs/add/observable/throw'; import 'rxjs/a...

Angular 2 • Http Interceptor

Using our class instead of Angular's Http

After extending the Http class, we need to tell angular to use this class instead of Http class. In order to do this, in our main module(or depending on the needs, just a particular module), we need to write in the providers section: export function httpServiceFactory(xhrBackend: XHRBackend, reque...

Angular 2 • Http Interceptor

Using angular event system

$scope.$emit Using $scope.$emit will fire an event name upwards through the scope hierarchy and notify to the $scope.The event life cycle starts at the scope on which $emit was called. Working wireframe : $scope.$broadcast Using $scope.$broadcast will fire an event down the $scope. We can list...

AngularJS • Events

Creating a service using angular.factory

First define the service (in this case it uses the factory pattern): .factory('dataService', function() { var dataObject = {}; var service = { // define the getter method get data() { return dataObject; }, // define the setter method ...

AngularJS • Services

Getting started with Angular 2 without angular-cli.

Angular 2.0.0-rc.4 In this example we'll create a "Hello World!" app with only one root component (AppComponent) for the sake of simplicity. Prerequisites: Node.js v5 or later npm v3 or later Note: You can check versions by running node -v and npm -v in the console/terminal. ...

Angular 2 • Getting started with Angular 2

Adding jquery library in angular-cli project

Install jquery via npm : npm install jquery --save Install typings for the library: To add typings for a library, do the following: typings install jquery --global --save Add jquery to angular-cli-build.js file to vendorNpmFiles array: This is required so the build system...

Angular 2 • Installing 3rd party plugins with [email protected]

Creating Minification-Safe Angular Controllers

To create minification-safe angular controllers, you will change the controller function parameters. The second argument in the module.controller function should be passed an array, where the last parameter is the controller function, and every parameter before that is the name of each injected val...

AngularJS • Controllers

angular.equals

The angular.equals function compares and determines if 2 objects or values are equal, angular.equals performs a deep comparison and returns true if and only if at least 1 of the following conditions is met. angular.equals(value1, value2) If the objects or values pass the === comparison If b...