Learning memo

angular.markdown

AngularJS

Directives

• ng-app="[MODULE_NAME]" // init angular
• ng-controller="[CONTROLLER_NAME] as [ALIAS]" // init controller
• ng-show="[CONDITION]" // show expression if true
• ng-hide="[CONDITION]" // hide expression if true
• ng-repeat="[ALIAS] in [CONTROLLER_NAME].[PROPERTY_NAME]" // for element in elements
• ng-src="{{[CONTROLLER_NAME].[ARRAY][0]}}" // when load image in array
• ng-click="[FUNCTION_NAME]()" // assign value or call function
• ng-init="[VARIABLE_NAME]=1;" // allow to evaluate an expression in current scope
• ng-class="{[CLASS_NAME]:[CONDITION]}"
• ng-model="[CONTROLLER_NAME].[VARIABLE_NAME]" // binds form element value to the property
• ng-submit="[FUNCTION_NAME]" // call function when form is submitted
• ng-include="'[NAME_OF_FILE]'" // name of file to include
• ng-href="[URL]"
• ng-if="[CONDITION]" // display messages if true

Modules

var app = angular.module("gemStore", []);

Controllers

app.controller("StoreController", function() {
	// define variable
	this.product = {name: "Diamond", price: 42.6, description: "Precious jewel.", isSoldOut: false};
	// define function
	this.isSoldOut = function () {
		return this.product.isSoldOut;
	};
})

Controller use service

app.controller('SomeController', ['$http', function($http) {
  var root = this;
  root.data = [];

  $http.get('/data.json').success(function(data) {
    root.data = data;
  });
}]);

Expressions

Expressions are re-evaluated when a property changed.

Regular

{{1+2}}
{{"Hello, "+"AngularJS."}}

Pipe

{{data|filter:options}}

• date:'MM/dd/yyyy @ h:mma'
• uppercase or lowercase
• limitTo: 9 // limit number of characters/items
• orderBy: '-price' // list by descending price

Form Validation

<form name="form1" novalidate>
  <input type="email" name="email" required />
  <input type="url" name="homepage" required />
  <input type="number" name="quantity" required />
  <div>form1 is {{form1.$valid}}</div>
</form>

Custom Directives

There's two type of directives:

• Element directive: UI widgets

<product-title></product-title>

app.directive('productTitle', function() {
  return {
    restrict: 'E', //element
    templateUrl: 'product-title.html' //url of template
  };
});

• Attribute directive: Tooltip

<h3 product-title></h3>

app.directive('productTitle', function() {
  return {
    restrict: 'A',
    templateUrl: 'product-title.html'
  };
});

Create new module with closure in different files

...
<scriptt type="text/javascript" src="app.js"></script>
<scriptt type="text/javascript" src="product.js"></script>
...

// app.js
(function() {
  // depends on 'store-products' module
  var app = angular.module('store', ['store-products']);
})()

// products.js
(function() {
  var app = angular.module('store-products', []);
})()

Serives

• $http

$http({ method: 'GET', url: '/products.json' });
// or
$http.get('/products.json', { apiKey: 'myApiKey' });
$http.post(...)
$http.put(...)
$http.delete(...)

• $log
• $filter

Basic Directories

• index.html
• css/
• templates/
  • pages/
    • notes/
      • index.html
    • users/
      • index.html
• javascript/
  • app.js
    • controllers
      • notes-create-controller.js
      • notes-edit-controller.js
      • ...

Routes

1. Using ngView
2. Loading the ngRoute library
3. Importing ngRoute module
4. Defining routes

<div ng-view></div>

<script src="angular-route.js"></script>

angular.module("NoteWrangler", ['ngRoute'])
.config(function($routeProvider){
    $routeProvider.when('/notes', {
      templateUrl: '/templates/pages/notes/index.html'
    })
		.when('/notes/:id', {
			templateUrl: 'templates/pages/notes/show.html',
			controller: 'NotesShowController',
			controllerAs: 'showCtrler'
		})
    .when('/users', {
      templateUrl: '/templates/pages/users/index.html'
    })
    .when('/', {
      templateUrl: '/templates/pages/users/index.html'
    })
    .otherwise({ redirectTo: '/' })
})

angular.module("NoteWrangler").controller("NotesShowController", function ($http, $routeParams){
	var controller = this;
	$http({ method: "GET", url: "/notes/" + $routeParams.id })
	.success(function(data) {
		controller.note = data;
	});
});