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>
-------------------------------------------------------------------------------------------
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
- class
- id, name
- data-*
- src, for, type, href
- title, alt
- aria-*, role
-----------------------------
Demo2：指令
HTML控制器input/select/textarea
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>
Demo3：模型
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
ng-model
<!-- 引用controller内容就用ng-model -->
<!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="myApp" ng-controller="myCtrl">
名字：<input type="text" ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Miaomiao Tab';
});
</script>
</body>
</html>
.
<!-- angular写成了angula -->
<!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='myApp' ng-controller='myCtrl'>
名字：<input type="text" ng-model="name">
<h1>你输入了{{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Miaomiao Tab';
});
</script>
</body>
</html>
error email ng-show
<!-- div : form text is required in span to show--> <!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> <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">email error</span> <p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p> </form> </body> </html>
valid dirty touched
<!-- {{}} myForm.myAddress.$valid not .email added--> <!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> <form name="myForm" ng-app=""> Email: <input type="email" name="myAddress" ng-model="text"> <p>编辑邮箱地址，查看状态的改变。</p> <h1>状态</h1> <p>Valid: {{myForm.myAddress.$valid}}(如果输入的值是合法的则为 true)。</p> <p>Dirty: {{myForm.myAddress.$dirty}}(如果值改变则为true )。</p> <p>Touched: {{myForm.myAddress.$touched}}(如果触屏点击的则为 true)。</p> </form> </body> </html>
bgcolor
<!-- <style type="text/css"> ng-model="myText" input.ng-invalid not input .ng-invalid --> <!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> <style> input.ng-invalid{ background-color: lightblue } </style> </head> <body> <form name="myForm" ng-app=""> <span>输入你的名字:</span> <input name="myName" ng-model="myText" required> </form> <p>编辑文本域，不同状态背景颜色会发送变化。</p> <p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p> </body> </html>
Demo4：控制域
scope作用域:HTML视图与javascript控制器之间的纽带
.
<!-- app.controller('myCtrl', function($scope) -->
<!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="myApp" ng-controller="myCtrl">
<h1>{{carTab}}</h1>
</div>
<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carTab = 'Volvo';
})
</script>
</body>
</html>
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
<!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>
<form ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<h1>我的名字是 {{name}}</h1>
</form>
<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'Miaomiao Tab';
});
</script>
</body>
</html>
ng-repeat
<!-- "var x in names" : ng-repeat="x in names" -->
<!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="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names" ><h1>{{x}}</h1></li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names=['tab', 'ctrl', 'shift'];
});
</script>
</body>
</html>
$rootScope
<!-- 所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。 $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 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> <div ng-app="myApp" ng-controller="myCtrl"> <h1>姓氏为 {{lastname}} 家族成员:</h1> <ul> <li ng-repeat="x in names" >{{x}}</li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { $scope.names=['tab', 'ctrl', 'shift']; $rootScope.lastname = 'Refsnes'; }); </script> <p>注意 $rootScope 在循环对象内外都可以访问。</p> </body> </html>
aasdfasdfafsdasdasdfasdfasdasdf
#^%&*^&*^(&^
<!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="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
<!-- 应用解析：
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
→myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName） -->
控制器方法
<!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="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{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>
</body>
</html>
<!-- 应用解析：
{{fullname()}} not {{fullname}} -->
外部文件中的控制器
<!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="myApp" ng-controller="lose">
<ul>
<li ng-repeat="x in names">{{x.name + " comes from " +x.country}}</li>
</ul>
</div>
<script src="xx.js"></script>
</body>
</html>
<!-- Totally wrong!!! :
angular.module('myApp', function($scope)
angular.module('myApp',[]).controller('lose', function($scope) -->
//xx.js
angular.module('myApp',[]).controller('lose', function($scope) {
$scope.names = [
{name:'Jessy', country:'Norway'},
{name:'Nancy', country:'Sweden'},
{name:'Delby', country:'Denmark'},
];
});
大小写/货币
<!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="myApp" ng-controller="lose">
{{name | lowercase}}
</div>
<script src="xx.js"></script>
</body>
</html>
<!-- {{name | uppercase}}
{{name | lowercase}}
<p>总价={{quantity * price | currency}}</p>-->
<!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="myApp" ng-controller="lose">
数量：<input type="number" ng-model="quantity">
价格：<input type="number" ng-model="price">
<p>总价={{quantity * price | currency}}</p>
</div>
<script>
angular.module('myApp',[]).controller('lose', function($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
</script>
</body>
</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 ng-app="myApp" ng-controller="lose">
<ul>
<li ng-repeat="x in names | orderBy: 'country'">{{x.name + " , " + x.country}}</li>
</ul>
</div>
<script src='xx.js'></script>
</body>
</html>
<!-- not this:{{x.name | orderBy: 'country'}}
right like this:<li ng-repeat="x in names | orderBy: 'country'">-->
//xx.js
angular.module('myApp',[]).controller('lose', function($scope) {
$scope.names = [
{name:'Jessy', country:'Norway'},
{name:'Nancy', country:'Sweden'},
{name:'Delby', country:'Denmark'}
];
});
过滤输入
<!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="myApp" ng-controller="lose">
输入过滤：<input type="text" ng-model="test">
<ul>
<li ng-repeat="x in names | filter: test | orderBy: 'country'">{{x.name + " , " + x.country}}</li>
</ul>
</div>
<script src='xx.js'></script>
</body>
</html>
<!-- not this:filter: 'test'
right like this:filter: test-->
Demo5：服务
服务(Service)是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
<!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="myApp" ng-controller="lose">
<p>当前页面的url：</p>
<h3>{{myUrl}}</h3>
<p>使用$location服务获取当前页面的URL</p>
</div>
<script>
angular.module('myApp', []).controller('lose', function($scope, $location) {
$scope.myUrl = $location.absUrl();
})
</script>
</body>
</html>
http interval服务
$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。 AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。 <!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="myApp" ng-controller="lose"> <p>欢迎信息：</p> <h3>{{myWelcome}}</h3> <p>$http服务向服务器请求信息</p> </div> <script> angular.module('myApp', []).controller('lose', function($scope, $http) { $http.get('welcome.htm').then(function (response) { $scope.myWelcome = response.data; }); }) </script> </body> </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 ng-app="myApp" ng-controller="lose"> <p>欢迎信息：</p> <h3>{{theTime}}</h3> <p>$http服务向服务器请求信息</p> </div> <script> angular.module('myApp', []).controller('lose', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval( function() { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); }) </script> </body> </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 ng-app="myApp" ng-controller="lose">
<p>自定义服务：</p>
<h3>{{hex}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function(){
this.myFunc = function(x){
return x.toString(16);
}
});
app.controller('lose', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(225);
});
</script>
</body>
</html>
<!-- wrong: var myFunc = function(x){return x.toString(16);} right: this.myFunc -->
<!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="myApp" >
<p>自定义过滤：</p>
<h3>{{255 | myFormat}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function(){
this.myFunc = function(x){
return x.toString(16);
}
});
app.filter('myFormat', ['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
}
}]);
</script>
</body>
</html>
<!-- app.filter('sd',function(){}) : app.filter('sd',['servc',function(){}])
anonymous function apply
<div ng-app="myApp" ng-controller="lose"> 用不到的控制器，不能放里面会报错-->
Demo6:select
这里起没有仔细的做——
ng-options 创建选择框
用ng-repeat 指令来创建下拉列表
<!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="myApp" ng-controller="myCtrl">
<select ng-model="selectNames" ng-options="x for x in names"="x in names"></select>
<p>ng-options</p>
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
<p>ng-repeat 指令</p>
<p>数组做对象</p>
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<select ng-model="selectedSite" ng-options="y.site for y in sites"></select>
<h1>你选择的是:{{selectedSite}}</h1>
<p>数据源做对象</p>
<select ng-model="selected" ng-options="x for (x, y) in siteWeb"></select><br><br>
<select ng-model="selectedCars" ng-options="x for (x, y) in cars"></select>
<h1>你选择的是: {{selectedCars.brand}}</h1>
<h2>模型:{{selectedCars.model}}</h2>
<h3>颜色:{{selectedCars.color}}</h3>
<select ng-model="selecteCars" ng-options="y.brand for (x, y) in cars"></select>
<h1>你选择的是: {{selecteCars.brand}}</h1>
<h2>模型:{{selecteCars.model}}</h2>
<h3>颜色:{{selecteCars.color}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ['tab', 'ctrl', 'shift'];
$scope.sites = [
{site: "baidu", url:"http://www.baidu.com"},
{site: "runoob", url:"http://www.runoob.com"},
{site: "cnblogs", url:"http://www.cnblogs.com/"}
];
$scope.siteWeb = {
site01: 'Google',
site02: 'baidu',
site03: 'cnblogs',
};
$scope.cars = {
car01: {brand: 'Ford', model: 'Mustang', color: 'red'},
car02: {brand: 'Flat', model: '500', color: 'blue'},
car03: {brand: 'Volvo', model: 'XC', color: 'black'},
};
});
</script>
</body>
</html>
Demo7:table
<!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>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in names | orderBy: 'country'">
<td>{{$index + 1}}</td>
<td>{{x.name}}</td>
<td>{{x.country | uppercase}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("Customers_JSON.php").sunccess(function(response) {
$scope.names = response.records;
});
});
</script>
</body>
</html>
Demo8：显示隐藏
ng-disabled ng-show
<!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="mySwitch=true">
<p><button ng-disabled="mySwitch">点我</button></p>
<p><input type="checkbox" ng-model="mySwitch">按钮</p>
{{mySwitch}}
<br>
<br>
<p ng-show='true'>我是可见的。</p>
<p ng-show='false'>我是不可见的。</p>
<p ng-show='13 > 12'>我是可见的。</p>
<br>
<br>
<p ng-hide='true'>我是不可见的。</p>
<p ng-hide='false'>我是可见的。</p>
</div>
</body>
</html>
<!-- ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-disable="mySwitch" : ng-disabled="mySwitch"
ng-init="mySwitch=true"-->
Demo9：事件
<!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="myApp" ng-controller="myCtrl">
<p><button ng-click='toggle()'>显示/隐藏</button></p>
<p><button ng-click="count = count + 1">点我！</button></p>
<p ng-hide='myVar'>{{count}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.myVar = false;
$scope.toggle = function(){
$scope.myVar = !$scope.myVar;
}
});
</script>
</body>
</html>
Demo10：模块
模块定义了一个应用程序
模块时应用程序中不同部分的容器
模块是应用控制器的容器
控制器通常属于一个模块
指令构造器
<!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="myApp" runoob-directive></div> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "我在指令构造器中创建!" }; }); </script> </body> </html>
模块和控制器分别在js文件中
<!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="myApp" ng-controller="myCtrl">
<p>{{firstName + " " + lastName}}</p>
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
//myApp.js
var app = angular.module('myApp', []);
//myCtrl.js
app.controller('myCtrl', function($scope) {
$scope.firstName = 'Miao';
$scope.lastName = 'Tab';
});
Demo11:表单
HTML 表单通常与 HTML 控件(input select button textarea )同时存在。
ng-app="myApp"
<!DOCTYPE html>
<html lang="en">
<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="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>form={{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>
</body>
</html>
Demo12:输入验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<h2>验证实例</h2>
<form name='myForm' ng-app="myApp" ng-controller="myCtrl" novalidate>
<p>用户名：<br>
<input type="text" name='user' ng-model="user" required>
<span style="color:red" ng-show='myForm.user.$dirty && myFrom.user.$invalid'>
<span ng-show='myForm.user.$error.required'>用户名是必须的</span>
</span>
</p>
<p>邮箱：<br>
<input type="email"邮箱验证：<input type="email"> 而不是text name='email' ng-model="email" required>
<span style="color:red" ng-show='myForm.email.$dirty && myForm.email.$invalid'>
<span ng-show='myForm.email.$error.required'>邮箱是必须的</span>
<span ng-show='myForm.email.$error.email'>非法的邮箱地址</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myFrom.user.$invalid && myForm.email.$dirty && myForm.email.$invalid ">
</p>
</form>
<script >
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.user = 'Daug';
$scope.email = 'john.doe@gmail.';
});
</script>
</body>
</html>
<!-- 校验：span[dirty invalid]>span[required]+span[email]
邮箱验证：<input type="email"> 而不是text -->
http://www.runoob.com/angularjs/angularjs-validation.html