深入浅出理解AngularJS模块

Posted 2020-09-08 To-Infinity-And-Bod

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对象;