首页 > 代码库 > 深入浅出理解AngularJS模块
深入浅出理解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=http://www.mamicode.com/"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=http://www.mamicode.com/"{{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 提供了很多内置的指令,你可以使用它们来为你的应用添加功能。
app.directive("runoobDirective", function() {
return {
template : "我在指令构造器中创建!"
};
});
<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对象;
深入浅出理解AngularJS模块