标签：
Demo1：简介
ng-app ng-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字：<input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
ng-bind ng-init
<!-- ng-init 指令初始化 AngularJS 应用程序变量 ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML div要包含住ng-app，否则ng元素失效 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="firstName=‘John‘"> <p>姓名为：<span ng-bind="firstName"></span></p> </div> </body> </html>
Module Controller 用汉字才能对齐，用英文就丑了
<!-- AngularJS 模块（Module） 定义了 AngularJS 应用。 AngularJS 控制器（Controller） 用于控制 AngularJS 应用。 ng-app指令定义了应用, ng-controller 定义了控制器。 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <p>尝试修改以下表单。</p> <div ng-app="myApp" ng-controller="myCtrl"> 姓: <input type="text" ng-model="lastName"><br> 名: <input type="text" ng-model="firstName"><br><br> name: {{firstName +" "+ lastName}} </div> <script> var app = angular.module(‘myApp‘, []); app.controller(‘myCtrl‘, function($scope) { $scope.firstName = ‘John‘; $scope.lastName = ‘Doe‘; }) </script> </body> </html>
Demo2：指令
ng-repeat
<!-- ng-repeat 指令会重复一个 HTML 元素 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div data-ng-app="" data-ng-init="names=[‘tab‘, ‘ctrl‘, ‘shift‘]">
<ul>
<li data-ng-repeat="x in names">
{{x}}
</li>
</ul>
</div>
</body>
</html>
directive自定义指令
<!-- angular.module小写 restrict 值可以是以下几种: E 只限元素名使用 A 只限属性使用 C 只限类名使用 M 只限注释使用 restrict写在template同样的位置 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp"> <miao-directive></miao-directive> <script> var myApp = angular.module(‘myApp‘, []); myApp.directive(‘miaoDirective‘, function() { return {template: ‘<h1>自定义指令！</h1>‘}; }); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/tabCtrlShift/p/5620369.html
