<h1>AngularJS 简介</h1>
<div>
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 <br>
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中： <br>
AngularJS 通过 ng-directives 扩展了 HTML。 <br>
ng-app 指令定义一个 AngularJS 应用程序。 <br>
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 <br>
ng-bind 指令把应用程序数据绑定到 HTML 视图。 <br>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h2>Hello {{name}}</h2>
</div>
</div>
<h1>AngularJS 指令</h1>
<div>
AngularJS 指令是以 ng 作为前缀的 HTML 属性。 <br>
ng-init 指令初始化 AngularJS 应用程序变量。 <br>
<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
</div>
<h1>AngularJS 表达式</h1>
<div>
AngularJS 表达式写在双大括号内：{{ expression }}。 <br>
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。<br>
AngularJS 将在表达式书写的位置"输出"数据。 <br>
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。 <br>
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }} <br>
</div>
<h1>AngularJS 应用</h1>
<div>
AngularJS 模块（Module） 定义了 AngularJS 应用。 <br>
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。 <br>
ng-app指令指明了应用, ng-controller 指明了控制器。 <br>
<div ng-app="myApp" ng-controller="myCtrl">
名：<input type="text" ng-model="firstName"><br>
姓：<input type="text" ng-model="lastName"><br>
姓名：{{ firstName + " " + lastName }}
</div>
</div>
<h1>AngularJS 对象</h1>
<div>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
<p>名为 {{ person.firstName }}</p>
</div>
</div>
<h1>AngularJS 数组</h1>
<div>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 <span ng-bind="points[2]"></span> </p>
</div>
</div>
<h1>数据绑定</h1>
<div>
<div ng-app="" ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量：<input type="number" ng-model="quantity">
价格：<input type="number" ng-model="price">
<p><b>总价：</b>{{ quantity * price }}</p>
</div>
</div>
<h1>重复 HTML 元素</h1>
<div>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用ng-repeat来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{x}}
</li>
</ul>
</div>
</div>
<h1>创建自定义的指令</h1>
<div>
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。 <br>
你可以使用 .directive 函数来添加自定义的指令。 <br>
要调用自定义指令，HTML 元素上需要添加自定义指令名。 <br>
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<div ng-app="myApp">
<runoob-directive></runoob-directive>
</div>
<script>
var app = angular.module('myApp',[]);
app.directive("runoobDirective",function(){
return {
remplate : "<h1>自定义指令！</h1>"
};
});
</script>
</div>
<h1>限制使用</h1>
<div>
实例
通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用: <br>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
restrict 值可以是以下几种: <br>
E 作为元素名使用 <runoob-directive></runoob-directive> <br>
A 作为属性使用 <div runoob-directive></div> <br>
C 作为类名使用 <div class="runoob-directive"></div> <br>
M 作为注释使用 <!-- directive: runoob-directive --> <br>
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。 <br>
</div>
<h1>验证用户输入</h1>
<div>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱</span>
</form>
<p>以上实例中，提示信息会在ng-show属性返回true的情况下显示。</p>
</div>
<h1>应用状态</h1>
<div>
<form ng-app="" name="myForm" ng-init="myText='test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h2>状态</h2>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
</form>
</div>
<h1>AngularJS 过滤器</h1>
<div>
AngularJS 过滤器可用于转换数据： <br>
过滤器 描述 <br>
currency 格式化数字为货币格式。 <br>
filter 从数组项中选择一个子集。 <br>
lowercase 格式化字符串为小写。 <br>
orderBy 根据某个表达式排列数组。 <br>
uppercase 格式化字符串为大写。
</div>
<h1>表达式中添加过滤器</h1>
<div>
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。 <br>
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
</div>
<h1>AngularJS 服务(Service)</h1>
<div>
有个 $location 服务，它可以返回当前页面的 URL 地址。 <br>
var app = angular.module('myApp', []); <br>
app.controller('customersCtrl', function($scope, $location) { <br>
$scope.myUrl = $location.absUrl(); <br>
}); <br>
在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。 <br>
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。 <br>
</div>
<h1>$http 服务</h1>
<div>
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。 <br>
var app = angular.module('myApp', []); <br>
app.controller('myCtrl', function($scope, $http) { <br>
$http.get("welcome.htm").then(function (response) { <br>
$scope.myWelcome = response.data; <br>
}); <br>
}); <br>
</div>
<h1>$timeout 服务</h1>
<div>
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。 <br>
var app = angular.module('myApp', []); <br>
app.controller('myCtrl', function($scope, $timeout) { <br>
$scope.myHeader = "Hello World!"; <br>
$timeout(function () { <br>
$scope.myHeader = "How are you today?"; <br>
}, 2000); <br>
}); <br>
</div>
<h1>创建自定义服务</h1>
<div>
<script>
app.service('hexafy',function(){
this.myFunc = function(x){
return x.toString(16);
}
});
app.controller('myCtrl',function($scope,hexafy){
$scope.hex=hexafy.myFunc(255);
});
</script>
</div>
<h1>AngularJS XMLHttpRequest</h1>
<div>
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
<script>
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response){
//请求成功执行代码
},function errorCallback(response){
//请求失败执行代码
});
</script>
<h1>简写方法</h1>
$http.get('/someUrl',config).then(successCallback,errorCallback); <br>
$http.post('/someUrl',data,config).then(successCallback,errorCallback);
</div>
<h1>ng-disabled 指令</h1>
<div>
ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。 <br>
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。 <br>
如果 mySwitch 为true, 按钮将不可用:
</div>
<h1>ng-show 指令 ng-hide 指令</h1>
<div>
ng-show 指令隐藏或显示一个 HTML 元素。 <br>
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
ng-hide 指令用于隐藏或显示 HTML 元素。 <br>
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>
</div>
<h1>AngularJS 事件</h1>
<div>
<h2>ng-click 指令</h2>
<div ng-app="" ng-controller="myCtrl">
ng-click 指令定义了 AngularJS 点击事件。
<button ng-click="count=count+1">点我！</button>
<p>{{count}}</p>
</div>
</div>
<h1>AngularJS 模块</h1>
<div>
模块定义了一个应用程序。 <br>
模块是应用程序中不同部分的容器。 <br>
模块是应用控制器的容器。 <br>
控制器通常属于一个模块。 <br>
<h2>
创建模块
</h2>
<div>
你可以通过 AngularJS 的 angular.module 函数来创建模块：
</div>
<div ng-app="myApp"></div>
<script>
var app = angular.module("myApp",[]);
</script>
"myApp"参数对应执行应用的html元素。
<h2>添加控制器</h2>
<div>你可以使用 ng-controller 指令来添加应用的控制器:</div>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<h2>添加指令</h2>
<div>AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。</div>
<div ng-app="myApp" runoob-directive></div>
<script>
var app = angular.module("myApp",[]);
app.directive("runoobDirective",function(){
return{
template : '我在指令构造器中创建!'
};
});
</script>
</div>
<h1>AngularJS 输入验证</h1>
<div>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>用户名：<br>
<input type="text" name="user" ng-model="user" required>
<span style="color: red;" ng-show="myForm.user.$dirty && myForm.user.$invalid"></span>
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</p>
<p>邮箱: <br>
<input type="email" name="email" ng-model="email" required>
<span style="color: red;" ng-show="myForm.email.$dirty && myForm.email.$invalid"></span>
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法邮箱。</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp',[]);
app.controller('validateCtrl',function($scope){
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
<div>
属性 描述 <br>
$dirty 表单有填写记录 <br>
$valid 字段内容合法的 <br>
$invalid 字段内容是非法的 <br>
$pristine 表单没有填写记录 <br>
</div>
</div>
<h1>AngularJS API</h1>
<div>
API 描述 <br>
angular.lowercase() 转换字符串为小写 <br>
angular.uppercase() 转换字符串为大写 <br>
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。 <br>
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。 <br>
</div>
<h1>AngularJS 包含</h1>
<div>
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
<div ng-include="'runoob.htm'"></div>
ng-include 指令除了可以包含 HTML 文件外，还可以包含 AngularJS 代码:
</div>
<h1>AngularJS 动画</h1>
<div>
AngularJS 提供了动画效果，可以配合 CSS 使用。 <br>
AngularJS 使用动画需要引入 angular-animate.min.js 库。 <br>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
<body ng-app="ngAnimate">
隐藏 DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
</div>
<h1>AngularJS 依赖注入</h1>
<div>
什么是依赖注入
wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。 <br>
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖 <br>
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入： <br>
value <br>
factory <br>
service <br>
provider <br>
constant <br>
<h2>value Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：</h2>
<div>
<script>
//定义一个模块
var mainApp = angular.module('mainApp',[]);
//创建value对象'defaultInput'并传递数据
mainApp.value('defaultInput',5);
//将‘defaultInput’注入到控制器
mainApp.controller('CalcController',function($scope,CalcService,defaultInput){
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function(){
$scope.result = CalcService.square($scope.number);
}
});
</script>
</div>
<h2>
factory
factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。
</h2>
<div>
<script>
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
</script>
</div>
<h2>
provider
AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。 <br>
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。 <br>
</h2>
<div>
<script>
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
</script>
</div>
<h2>
constant <br>
constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。 <br>
mainApp.constant('configParam','constant value');
</h2>
<div>
<script>
var mainApp = angular.module("mainApp",[]);
mainApp.value("defaultInput",5);
mainApp.factory('MathService',function(){
var factory = {};
factory.multiply = function(a,b){
return a * b;
}
return factory;
});
mainApp.service('CalcService',function(MathService){
this.square = function(a){
return MathService.multiply(a,a);
}
});
mainApp.controller('CalcController',function($scope,CalcService,defaultInput){
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function(){
$scope.result = CalcService.square($scope.number);
}
});
</script>
</div>
</div>
<h1>AngularJS 路由</h1>
<div>
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 <br>
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。 <br>
通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如： <br>
http://runoob.com/#/first <br>
http://runoob.com/#/second <br>
http://runoob.com/#/third <br>
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
<div>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。 <br>
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数: <br>
第一个参数是 URL 或者 URL 正则规则。 <br>
第二个参数是路由配置对象。 <br>
</div>
<h2>
路由设置对象
</h2>
<div>
$routeProvider.when(url, { <br>
template: string, <br>
templateUrl: string, <br>
controller: string, function 或 array, <br>
controllerAs: string, <br>
redirectTo: string, function, <br>
resolve: object<key, function> <br>
}); <br>
参数说明：<br>
template: <br>
如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数： <br>
.when('/computers',{template:'这是电脑分类页面'}) <br>
templateUrl: <br>
如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数： <br>
$routeProvider.when('/computers', { <br>
templateUrl: 'views/computers.html', <br>
}); <br>
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。 <br>
controller: <br>
function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。 <br>
controllerAs: <br>
string类型，为controller指定别名。 <br>
redirectTo: <br>
重定向的地址。 <br>
resolve: <br>
指定当前controller所依赖的其他模块。 <br>
</div>
</div>
