ctrlcv-dev.comgithub

Angular.jscheatsheet

贡献者：BAI

Angular.js

HTML

HTML
<html ng-app="nameApp"></html>

列表 (ng-repeat)

HTML
<ul ng-controller="MyListCtrl">
  <li ng-repeat="phone in phones">{{phone.name}}</li>
     
</ul>

模型 (ng-model)

HTML
<select ng-model="orderProp">
  <option value="name">Alphabetical</option>
  <option value="age">Newest</option>
     
</select>

定义一个模块

JS
App = angular.module('myApp', []);
    App.controller('MyListCtrl', function ($scope) {
      $scope.phones = [ ... ];
    });

保护的 Controller

JS
App.controller('Name', [
      '$scope',
      '$http',
      function ($scope, $http) {
      }
    ]);
    a.c 'name', [
      '$scope'
      '$http'
      ($scope, $http) ->
    ]

服务

JS
App.service("NameService", function ($http) {
  return {
    get: function () {
      return $http.get(url);
    },
  };
});
JS
App.controller("controllerName", function (NameService) {
  NameService.get().then(function () {});
});

指令（Directive）

JS
App.directive("name", function () {
  return {
    template: "<h1>Hello</h1>",
  };
});

在 HTML 中会用 <name></name> 来渲染模板 <h1>Hello</h1>

HTTP

JS
App.controller("PhoneListCtrl", function ($scope, $http) {
  $http.get("/data.json").success(function (data) {
    $scope.phones = data;
  });
});

参考