1.angular快速开始
-
标记
ng-app告诉AngularJS处理整个HTML页并引导应用： -
ng-model指令把输入域的值绑定到应用程序变量 yourname -
ng-bind指令把应用程序变量 yourname 绑定到某个段落的 innerHTML -
ng-init指令初始化 AngularJS 应用程序变量。 -
例子
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! <div ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div> </body> </html>
2.angularJS应用
-
例子：
<div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <script> /*AngularJS 模块定义应用:*/ var app = angular.module('myApp', []); /*AngularJS 控制器控制应用:*/ app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>
3.angularJS字符串
-
例子：
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p> </div>
4.angularJS对象
-
例子：
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p> </div> 使用ng-bind类似： <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 <span ng-bind="person.lastName"></span></p> </div>
5.angularJS数组
-
例子：
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p> <p>第三个值为 <span ng-bind="points[2]"></span></p> </div>
6.一个页面创建多个ng-app
-
1.ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上。
-
2.ng-app作用：告诉子元素指令是属于angularJs。
-
3.ng-app的值可以为空（练习），项目中一定要赋值，后面所说的模块。
-
例子：
var app1 = angular.module("app1", []); //自动加载 var app2 = angular.module("app2", []); //手动加载 angular.bootstrap(document.getElementById("A2"), ['app2']); // 手动加载2
7.重复html元素
-
例子：
<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>循环对象：</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>
8.1创建自定义指令
-
可以使用
.directive函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: -
例子：
<body ng-app="myApp"> /*元素名*/ <runoob-directive></runoob-directive> 以下实例方式也能输出同样结果: /*属性*/ <div runoob-directive></div> /*类名*/ <div class="runoob-directive"></div> /*注释*/ <!-- directive: runoob-directive --> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" }; }); </script> </body>
8.2限制使用自定义指令
-
通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用:
-
restrict 值可以是以下几种:
E 作为元素名使用 A 作为属性使用 C 作为类名使用 M 作为注释使用 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。 -
例子：
var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "A", template : "<h1>自定义指令!</h1>" }; });