angularjs學習（一） 頂 原

angularjs是一個JavaScript框架,使用它可以直接引入js文件即可。引入方式：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>   <--!可以通過這個地址直接將加載的內容保存爲js文件即可-->
<script type="text/javascript" src="js/angular.min.js"></script>

下載地址

1. 表達式

寫在大括號內{{expression }}，表達式裏面的數據需要我們自己往裏賽值,數據主要爲以下寫法：

<p>我的第一個表達式: {{ 5 + 5 }}</p>
<p>總價： {{ quantity * cost }}</p>
<p>總價： <span ng-bind="quantity * cost"></span></p>

2.指令

以前綴ng-開始，常見指令集合（瞭解即可）：

ng-mode       將表單控件和當前作用域的屬性進行綁定
ng-init         該指令被調用時會初始化內部作用域
ng-app        定義了 AngularJS 應用程序的 根元素
ng-controller    控制器
ng-bind        和{{}}差不多
ng-repeat        遍歷集合

自定義指令

<runoob-directive></runoob-directive>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定義指令!</h1>"
    };
});
restrict 值可以是以下幾種:
E 作爲元素名使用
A 作爲屬性使用
C 作爲類名使用
M 作爲註釋使用
restrict 默認值爲 EA, 即可以通過元素名和屬性名來調用指令。

3. 作用域scope

Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。Scope 是一個對象，有可用的方法和屬性。Scope 可應用在視圖和控制器上。當你在 AngularJS 創建控制器時，你可以將 $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>

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

4.控制器

AngularJS 控制器 控制 AngularJS 應用程序的數據。AngularJS 控制器是常規的 JavaScript 對象。

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

個人理解：控制器相當於一個調度器，用於管理所有的控件

5.過濾器

過濾器可以使用一個管道字符（|）添加到表達式和指令中。

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

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

</div>

常見過濾器

currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。

自定義過濾器

var app = angular.module('myApp', [])
app.filter('reverse', function() { //可以注入依賴
    return function(text) {
        return text.split("").reverse().join("");
    }
});

6.服務

AngularJS 中你可以創建自己的服務，或使用內建服務。服務是一個函數或對象，可在你的 AngularJS 應用中使用。AngularJS 內建了30 多個服務。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

自定義服務

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