深刻淺出理解AngularJS模塊

AngularJS 模塊

1.添加控制器

你能夠使用 ng-controller 指令來添加應用的控制器:

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
姓名: {{fullName()}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";

　　$scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

應用解析：

AngularJS 應用程序由 ng-app 定義。應用程序在 <div> 內運行。

ng-controller="myCtrl" 屬性是一個 AngularJS 指令。用於定義一個控制器。

myCtrl 函數是一個 JavaScript 函數。

AngularJS 使用$scope 對象來調用控制器。

在 AngularJS 中， $scope 是一個應用對象(屬於應用變量和函數)。

控制器的 $scope （至關於做用域、控制範圍）用來保存AngularJS Model(模型)的對象。

控制器在做用域中建立了兩個屬性 (firstName 和 lastName),一個方法（fullName()）。

ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。

2.實際開發中，是採用外部引入的方法添加：

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

3.$scope存儲的屬性能夠是對象，包括數組對象，對象數組，等等，獲取數據處理的方式也不一樣，可根據實際狀況採用不一樣的 數據存儲方式和獲取處理方式

$scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ];

 

3-1：對象的x，x又有本身的屬性；

<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>

3-2：select下另外一種表達方式

ng-options="x.site for x in sites"

3-3：對象value-key . x,y

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

3-4：對象中的key對應的value又是個對象

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">

4.添加指令

AngularJS 提供了不少內置的指令，你能夠使用它們來爲你的應用添加功能。

<script>

 

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {
    return {
        template : "我在指令構造器中建立!"
    };
});

</script>

此處給myApp的組件模塊添加了自定義的runoobDirective元素,return的對象中都是有API能夠查詢的（template ,templateUrl ...）！

經常使用的指令包括：

form中：

ng-submit,提交時的表達式

ng-blur，規定一個blur事件發生的行爲；

ng-focus,focus發生時的行爲

ng-value，給value賦值

ng-change,定在內容改變時要執行的表達式

ng-checked, 規定元素是否被選中

ng-selected,selected屬性，是true/false

ng-class,規定元素使用的css類名

ng-src,img中的地址

ng-click,規定click事件發生時的行爲

ng-controller,定義應用對應的控制器對象

ng-disabled，禁用

ng-hide,隱藏元素

ng-show，顯示元素

ng-readonly，元素只讀

ng-href,a標準重點href，與href不一樣，防瀏覽器解析出非法地址

ng-if,若是判斷條件爲FALSE，則移除這段html代碼

ng-style,規定style屬性

ng-switch,規定顯示/隱藏元素的條件

ng-include,在應用中包含 HTML 文件，屬性的值是個文件名（phones.html），座位元素使用時，就是src='filename';

ng-jq:定義必需要使用的庫

鍵盤事件：

ng-keydown

ng-keyup

ng-keypress

鼠標事件：

ng-mousedown

ng-mouseover

ng-mouseenter

ng-mousemove

ng-mouseleave

ng-mouseup

 

以ng-click舉例：

<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>

 ng-click="reset()"執行formCtrl函數下的user（）方法，此時，把user中的值初始化，獲取的是master的值經過.copy()方法賦值給user對象;