angularjs.md

   1 ---
   2 title: Angular.js
   3 category: JavaScript libraries
   4 ---
   5 ```html
   6     <html ng-app="nameApp">
   7 ```
   8
   9 ### Lists (ng-repeat)
  10 ```html
  11     <ul ng-controller="MyListCtrl">
  12       <li ng-repeat="phone in phones">
  13         {{phone.name}}
  14       </li>
  15     </ul>
  16 ```
  17
  18 ### Model (ng-model)
  19
  20 ```html
  21     <select ng-model="orderProp">
  22       <option value="name">Alphabetical</option>
  23       <option value="age">Newest</option>
  24     </select>
  25 ```
  26
  27 ### Defining a module
  28 ```js
  29     App = angular.module('myApp', []);
  30
  31     App.controller('MyListCtrl', function ($scope) {
  32       $scope.phones = [ ... ];
  33     });
  34 ```
  35
  36 ### Controller with protection from minification
  37 ```js
  38     App.controller('Name', [
  39       '$scope',
  40       '$http',
  41       function ($scope, $http) {
  42       }
  43     ]);
  44
  45     a.c 'name', [
  46       '$scope'
  47       '$http'
  48       ($scope, $http) ->
  49     ]
  50 ```
  51
  52 ### Service
  53 ```js
  54     App.service('NameService', function($http){
  55       return {
  56         get: function(){
  57           return $http.get(url);
  58         }
  59       }
  60     });
  61 ```
  62 In controller you call with parameter and will use promises to return data from server.
  63
  64 ```js
  65     App.controller('controllerName',
  66     function(NameService){
  67       NameService.get()
  68       .then(function(){})
  69     })
  70 ```
  71
  72 ### Directive
  73 ```js
  74     App.directive('name', function(){
  75       return {
  76         template: '<h1>Hello</h1>'
  77       }
  78     });
  79 ```
  80
  81 In HTML will use `<name></name>` to render your template `<h1>Hello</h1>`
  82
  83 ### HTTP
  84 ```js
  85     App.controller('PhoneListCtrl', function ($scope, $http) {
  86         $http.get('/data.json').success(function (data) {
  87             $scope.phones = data;
  88         })
  89     });
  90 ```
  91 References:
  92
  93  * https://github.com/angular/angular-seed
  94  * https://angularjs.org/