首页 > 代码库 > 深入浅出理解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 提供了很多内置的指令,你可以使用它们来为你的应用添加功能。

<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=http://www.mamicode.com/‘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对象;

 

 
 

深入浅出理解AngularJS模块