angularjs.md

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