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);
    }
});