• angular通過指令擴充套件HTML，通過表示式繫結資料到HTML

指令：（angular相對於HTML擴充套件的屬性，帶有字首ng-） ng-app指定一個angular應用程式（表明div是angular應用程式的所有者）指定了angular的根元素，會在網頁載入完成後自動初始化應用程式。 ng-model指令把元素值繫結到應用程式 ng-bind指定把應用程式資料繫結到HTML檢視 ng-init  指令初始化angular程式變數（少見） ng-repreat重複一個HTML元素（類似map函式） <div ng-app="" ng-init="names=['Jani','Hege','Kai']">   <p>使用 ng-repeat 來迴圈陣列</p>   <ul>     <li ng-repeat="x in names">       {{ x }}     </li>   </ul> <div> ng-options建立選擇框。

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "W3Cschool", "Taobao"];
});
</script>
 

ng-click指令，定義了一個單擊事件。

表示式：（在作用上跟ng-bind是一樣的） 寫在雙大括號中{{}} 把資料繫結在HTML，跟ng-bind有相似之處 angular在表示式書寫的位置輸出資料 <div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： {{ quantity * cost }}</p>
</div> 等價 <div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： <span ng-bind="quantity * cost"></span></p>
</div>

作用域： scope是在HTML和JavaScript之間的紐帶。（檢視和控制器） scope 是一個物件，有可以使用的方法和屬性。 scope 可以應用在檢視和控制器上。
< div   ng-app= "myApp"   ng-controller= "myCtrl" >
< h1 > {{carname}} < /h1 >
< /div >
< script > var  app = angular.module( 'myApp' , []);
app.controller( 'myCtrl' ,  function ($scope) {     $scope.carname =  "Volvo" ; }); < /script > 頁面比較複雜的時候，DOM有多個作用域

• View(檢視), 即 HTML。
• Model(模型), 當前檢視中可用的資料。
• Controller(控制器), 即 JavaScript 函式，可以新增或修改屬性。

$rootScope根作用域，可以作用在ng-app指令包含的所有HTML元素中。 $rootScope   可作用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，可以在各個 controller 中使用。

---

控制器：

ng-controller="myCtrl"是一個angular的指令，用於定義一個控制器。

比較難理解的是外部檔案的控制器。

<div ng-app="myApp" ng-controller="personController">

名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}

</div>

<script src="Controller.js"></script>

另外的Controller.js檔案

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
}); 

ng-controller指令定義了應用程式控制器。

過濾器：（多用來轉換資料）

符號  “   |  ”

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名為 {{ lastName | uppercase }}</p>

</div>

服務：（建立自己的服務 Service）

$location服務，可以放回當前頁面的URL地址。

$http服務，服務向伺服器傳送請求，應用響應伺服器傳送來的資料。

（$http.get('/index.php')）

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

獲取介面資料

$timeout服務（相當於window.setTimeout函式）

$interval 服務 （相當於window.setInterval函式）

建立自己的服務

app.service('ser', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

這樣就建立了一個ser的服務。然後再去使用它

app.filter('myFormat',['ser
', function(ser) {
    return function(x) {
        return ser.myFunc(x);
    };
}]);

依賴注入：

一種軟體設計模式，一個或者更多的依賴或者服務被注入（或者通過引用傳遞）到一個獨立的物件，然後成為了客戶端的一部分。

五個核心元件作為依賴注入（value,factory,service,provider,constant）

factory是一個函式用於返回值，在service和controller需要時建立。

路由：

module.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'這是首頁頁面'})
        .when('/computers',{template:'這是電腦分類頁面'})
        .when('/printers',{template:'這是印表機頁面'})
        .otherwise({redirectTo:'/'});
}]);

引數說明：

• template:

  如果我們只需要在 ng-view 中插入簡單的 HTML 內容，則使用該引數：

  .when('/computers',{template:'這是電腦分類頁面'})

• templateUrl:

  如果我們只需要在 ng-view 中插入 HTML 模板檔案，則使用該引數：

  $routeProvider.when('/computers', {
      templateUrl: 'views/computers.html',
  });
  

  以上程式碼會從服務端獲取 views/computers.html 檔案內容插入到 ng-view 中。

• controller:

  function、string或陣列型別，在當前模板上執行的controller函式，生成新的scope。

• controllerAs:

  string型別，為controller指定別名。

• redirectTo:

  重定向的地址。

• resolve:

  指定當前controller所依賴的其他模組。

路由和依賴注入，樓主自己也不是很理解，只能先整理出啦，後面慢慢學習。

希望共同學習，多多指點~