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

 

 

 

相关文章