1. ng-app ng-controler
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
ng-controller 指令用于为你的应用添加控制器。在控制器中,我们可以编写代码,制作函数和变量,并使用 scope 对象来访问。
2.ng-init ng-modal ng-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='Gao';secondName='Jamie';
person={firstName:'Gao',secondName:'Jamie'}">
<!--
1.ng-init初始化变量
2.ng-init初始化对象
-->
<p>名字 : <input type="text" ng-model="secondName"></p>
<h1>Hello {{secondName}} {{firstName}}</h1>
<!--
ng-model 是用于表单元素的,支持双向绑定。对普通元素无效;
ng-bind 用于普通元素,不能用于表单元素,应用程序单向地渲染数据到元素;
-->
<h1>Hello {{secondName + " "+ firstName}} </h1>
<h1>Hello {{person.secondName +" "+ person.firstName}} </h1>
<h1 ng-bind='"Hello "+secondName+" "+firstName'></h1>
<div data-ng-init="names=[{name:'Jamie',city:'葫芦岛'},
{name:'kimi',city:'沈阳'},
{name:'Nero',city:'沈阳'}]">
<!--ng-init 初始化数组 -->
<ul>
<li data-ng-repeat="item in names">{{item.name}} - {{item.city}}</li>
</ul>
<h1>Hello {{names[2].name}} </h1>
</div>
<!--
ng-init 初始化 AngularJS 应用程序变量。
1.不同变量之间用分号;分割。
2.data-ng-init 和ng-init的用法相同。
ng-bind & 表达式{{}}
1. ng-bind 和表达式{{}}效果基本上是一样的 。
2. 如果网页没有被正常地渲染,那么表达式将原型显示出来,
用户将看到代码显示在网页上,而即使网页发生错误,无法正常渲染数据,
ng-bind将不会将代码显示在网页上,提供用户体验。
3. ng-bind 和 {{}} 同时使用时,ng-bind 绑定的值覆盖该元素的内容。
-->
</div>
</body>
</html>
3. ng-model 指令
ng-model
指令可以将输入域的值与 AngularJS 创建的变量绑定。
a.双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改:
b. 验证用户输入
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
提示信息会在 ng-show
属性返回 true
的情况下显示
4.自定义指令
可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,HTML 元素上需要添加自定义指令名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="DirectiveController">
<!-- <first-directive></first-directive> -->
<!-- 如果使用元素的命名方式,千万不要为了简洁省略掉结束符,而写成<second-directive/>-->
<second-directive></second-directive>
<label class="secondDirective"></label>
<label second-directive></label>
<!-- 使用驼峰法来命名一个指令, secondDirective, 但在使用它时需要以 - 分割, second-directive: -->
<!-- directive:third-directive -->
<!-- <third-directive></third-directive> -->
<script>
angular.module('myApp', []).directive('firstDirective', [function () {
return {
// scope: false, // 默认值,共享父级作用域
controller: function ($scope, $element, $attrs, $transclude) {
$scope.name = "Jamie-2";
//修改name时,父级作用域中的name也会变化
},
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment . restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令
template: 'first name:{{name}}<br/>',
};
}]).directive('secondDirective', [function () {
return {
scope: true, // 继承父级作用域并创建指令自己的作用域
controller: function ($scope, $element, $attrs, $transclude) {
$scope.name = "Jamie-2";
},
restrict: 'ACEM', // E = Element, A = Attribute, C = Class, M = Comment
//修改name时,secondDirective会在自己的作用域中新建一个name变量,与父级作用域中的
// name相对独立,父级作用域中的name不会变化,同时修改父级作用域中的name 也不会影响secondDirective中的name.
// 但是可以继承来自于父级作用域的变量。
template: 'second name:{{familyName}} {{name}}<br/>'
};
}]).directive('thirdDirective', [function () {
return {
scope: {}, // 创建指令自己的独立作用域,与父级没有关系
controller: function ($scope, $element, $attrs, $transclude) {
$scope.name = 'Jamie-3';
// 在自己的作用域中声明变量。
},
replace: true, // replace 需要为true, 否则评论是不可见的
restrict: 'M', // E = Element, A = Attribute, C = Class, M = Comment。 restrict的值需要包涵M
template: '<label>third name:{{name}}</label>' // template 需要带标签,评论才能正确的显示。
};
}])
.controller('DirectiveController', ['$scope', function ($scope) {
$scope.name = "Jamie";
$scope.familyName = "Gao";
}]);
</script>
<div>
Parent scope:
<input type="text" ng-model="name">
</div>
</body>
</html>