nodesocket/Angular Cliffnotes.md

## Angular Cliffnotes.md

      
    Raw
  

              Angular Cliffnotes.md
            
          
    Modules

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

Using modules in views
 <html ng-app="app"></html>

Controllers

app.controller('controllerName', ['$scope', function($scope) {
	
}]);

Using controllers in views
 <div ng-controller="controllerName"></div>

Methods

app.controller('controllerName', ['$scope', function($scope) {
	$scope.methodName = function(data) {
		console.log(data);
	}
}]);

Using controller methods in views
 <div ng-controller="controllerName">
     <div ng-click="methodName()"></div>
 </div>


Controller aliasing

 <div ng-controller="controllerName as alias">
     <div ng-click="alias.methodName()"></div>
 </div>

Constants

app.constant('SOME_CONSTANT', 'this is a constant');

Services

app.factory('ServiceName', function() {
	return {
		messsage: 'Data from a service'
	};
});

Injecting services into controllers
app.controller('controllerName', ['$scope', ServiceName, function($scope) {
	$scope.data = ServiceName;
}]);

Filters

app.filter('reverse', function() {
	return function(text) {
		return text.split("").reverse().join("");
	}
});

Using filters from views
{{'some text here' | reverse}}

Injecting from service/model into filters
app.filter('reverse', function(ServiceName) {
	return function(text) {
		return text.split("").reverse().join("") + ServiceName.message;
	}
});

Directives

app.directive('directiveName', function() {
	return {
		restrict: 'E',
		template: '<div>Some div text here</div>'
	}
});

Using directives in views
 <div ng-app="app">
	<directive-name></directive-name>
 </div>

Using linking functions in directives

app.directive('directiveName', function() {
	return function(scope, element, attrs) {
		console.log(attrs.directiveName + ' from linking function directive');
	}
});

Using linking function directives
 <div directive-name="Hello"></div>

Class based directives

app.directive('directiveName', function() {
	return {
		restrict: 'C',
		link: function() {
			console.log('from class based directive');
		}
	}
});

Using class based directives in views
 <div ng-app="app">
	<div class="directiveName"></div>
 </div>

Isolating scope with directives

app.directive('directiveName', function() {
   return {
   	restrict: 'E',
   	scope: {},
   	template: '<input type="text" ng-model="name"> {{name}}'
   }
});

Using isloated scope directives in views
<directive-name></directive-name>

Passing controller methods into directives using isolate scope

app.controller('controllerName', ['$scope', function($scope) {
	$scope.methodName = function(messsage) {
		alert(message);		
	};
}]);

app.directive('directiveName', function() {
	return {
		scope: {
			'callMethod': '&'
		},
		template: '<input type="text" ng-model="value">' + 
					<div class="button" ng-click="callMethod({message:value})">Click Me</div>';
	}
});

 <div ng-controller="controllerName">
      <div directiveName callMethod="methodName(message)"></div>
 </div>

Two way binding from directive to controller using isolate scope

app.controller('controllerName', ['$scope', function($scope) {
	$scope.controllerData = 'some text here';
}]);

app.directive('directiveName', function() {
	return {
		scope: {
			'data': '='
		},
		template: '<input type="text" ng-model="data">';
	}
});

 <div ng-controller="controllerName">
      <div directiveName data="controllerData"></div>
 </div>

Routing

app.config(function($routeProvider) {
	$routeProvider
	.when('/', {
		templateUrl: 'app.html'
	})
	.when('/post/:message', {
		templateUrl: 'app.html'	
	})
	.when('/echo', {
		template: 'Some string text here'
	})
	.when('/private/:id', {
		redirectTo: function(routeParams, path, queryString) {
			return "/" + routeParams.id
		}
	})
	.otherwise({
		redirectTo: '/'
	})
});

app.controller("someController", ['$scope', '$routeParams', function($scope, $routeParams) {
	$scope.model = {
		message: $routeParams.message
	}
});

Q (promises)

app.controler('someController', ['$scope', '$q', function($scope, $q) {
	var defer = $q.defer();
	
	defer.promise
	.then(function(name) {
		console.log(name + ", I promise to showup!");
		return name;
	})
	.then(function(name) {
		console.log(name + ", I told you I promise to showup!");
		return name;
	})
	.then(function(name) {
		console.log("See, " + name + " I am super reliable.");
	})
	
	defer.resolve("Jack");
});