Angular
指令
AngularJS 指令是扩展的 HTML 属性，带有前缀ng-。
ng-app指令初始化一个 AngularJS 应用程序。
ng-init指令初始化应用程序数据。
ng-model指令把元素值（比如输入域的值）绑定到应用程序。
重复 HTML 元素
ng-repeat指令会重复一个 HTML 元素：
AngularJS 实例
使用 ng-repeat 来循环数组
创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用.directive函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令，runoobDirective, 但在使用它时需要以-分割,runoob-directive:
AngularJS 实例
你可以通过以下方式来调用指令：
·元素名
·属性
·类名
·注释
restrict :"M",
replace : true,
注意：你必须设置restrict的值为 "C" 才能通过类名来调用指令。
注意：我们需要在该实例添加replace属性，否则评论是不可见的。
注意：你必须设置restrict的值为 "M" 才能通过注释来调用指令。
restrict值可以是以下几种:
·E作为元素名使用
·A作为属性使用
·C作为类名使用
·M作为注释使用
restrict默认值为EA, 即可以通过元素名和属性名来调用指令。
Scope 概述
AngularJS 应用组成如下：
·View(视图), 即 HTML。
·Model(模型), 当前视图中可用的数据。
·Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 javascript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
AngularJS 过滤器
AngularJS 过滤器可用于转换数据：
|
过滤器 |
描述 |
|
currency |
格式化数字为货币格式。 |
|
filter |
从数组项中选择一个子集。 |
|
lowercase |
格式化字符串为小写。 |
|
orderBy |
根据某个表达式排列数组。 |
|
uppercase |
格式化字符串为大写。 |
表达式中添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.
(下面的两个实例，我们将使用前面章节中提到的 person 控制器)
uppercase过滤器将字符串格式化为大写：
AngularJS 实例
AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务，或使用内建服务。
什么是服务？
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个$location服务，它可以返回当前页面的 URL 地址。
函数监听
姓名为{{ lastName | uppercase }}
<p ng-app="myApp" ng-controller="myCtrl">
<b>请输入姓名b>
<b>姓名b><input type="text" ng-model="fistName"><br/>
<b>姓名b><input type="text" ng-model="lastName"><br/>
<h1> {{fistName+lastName}}h1>
<h2 >{{fullName}}h2>
p>
<script>
angular.module("myApp",[]).controller("myCtrl",function($scope) {
$scope.lastName="121";
$scope.fistName="211";
$scope.$watch('lastName',function(newVal) {
$scope.fullName=$scope.fistName+""+$scope.lastName;
});
$scope.$watch('fistName',function(newVal) {
$scope.fullName=$scope.fistName+""+$scope.lastName;
});
})
script>
AngularJSXMLHttpRequest
$http是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
使用格式：
// 简单的 GET 请求，可以改为 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项。
使用 ng-options 创建选择框
在 AngularJS 中我们可以使用ng-option指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:
实例
<script> var app =angular.module('myApp', []); app.controller('myCtrl', function($scope) {$scope.names = ["Google", "Runoob", "Taobao"];}); </script>
ng-options使用对象有很大的不同，如下所示：
实例
使用对象作为数据源,x为键(key),y为值(value):
xfor (x, y) in sites">
你选择的值是:{{selectedSite}}
AngularJSHTML DOM
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
ng-disabled 指令
ng-disabled指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-show 指令
ng-show指令隐藏或显示一个 HTML 元素。
ng-hide 指令
ng-hide指令用于隐藏或显示 HTML 元素。
AngularJS 实例
我是不可见的。
我是可见的。
AngularJS事件
AngularJS 有自己的 HTML 事件指令。
ng-click 指令
ng-click指令定义了 AngularJS 点击事件。
AngularJS 实例
{{ count }}
AngularJS表单
AngularJS 表单是输入控件的集合。
HTML 控件
以下 HTML input 元素被称为 HTML 控件:
·input 元素
·select 元素
·button 元素
·textarea 元素
应用代码
<scriptsrc="https://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
Validation Example
name="myForm"novalidate>
用户名:
邮箱:
ng-disabled="myForm.user.$dirty&& myForm.user.$invalid ||
myForm.email.$dirty &&myForm.email.$invalid">
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
实例解析
AngularJSng-model指令用于绑定输入元素到模型中。
模型对象有两个属性：user和email。
我们使用了ng-show指令， color:red 在邮件是$dirty或$invalid才显示。
|
属性 |
描述 |
|
$dirty |
表单有填写记录 |
|
$valid |
字段内容合法的 |
|
$invalid |
字段内容是非法的 |
|
$pristine |
表单没有填写记录 |
AngularJSAPI
API 意为ApplicationProgrammingInterface（应用程序编程接口）。
AngularJS 全局 API
AngularJS 全局 API 用于执行常见任务的 javascript 函数集合，如：
·比较对象
·迭代对象
·转换对象
全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数：
|
API |
描述 |
|
angular.lowercase() |
转换字符串为小写 |
|
angular.uppercase() |
转换字符串为大写 |
|
angular.isString() |
判断给定的对象是否为字符串，如果是返回 true。 |
|
angular.isNumber() |
判断给定的对象是否为数字，如果是返回 true。 |
<p ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="content">
<span >大写 ：{{xc}}span>
<span>小写 ：{{xv}}span>
p>
<script>
angular.module("myApp",[]).controller("myCtrl",function ($scope) {
//$scope.content="dadE";
$scope.$watch("content",function () {
$scope.xc = angular.uppercase($scope.content);
$scope.xv = angular.lowercase($scope.content);
})
//console.log(x1);
})
script>
AngularJS 包含
使用 AngularJS, 你可以使用ng-include指令来包含 HTML内容:
实例
跨域包含
默认情况下， ng-include 指令不允许包含其他域名的文件。
如果你需要包含其他域名的文件，你需要设置域名访问白名单：
sites.htm 文件代码：
<script>
var app = angular.module('myApp', [])app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['https://c.runoob.com/runoobtest/**' ]); });
</script>
angular_include.php 文件代码：
我是跨域的内容'; ?>
AngularJS 动画
AngularJS 提供了动画效果，可以配合 CSS 使用。
AngularJS 使用动画需要引入 angular-animate.min.js 库。
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
还需在应用中使用模型 ngAnimate：
AngularJS 依赖注入
什么是依赖注入
wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖
一句话 --- 没事你不要来找我，有事我会去找你。
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
·value
·factory
·service
·provider
·constant
value
Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：
// 定义一个模块
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);
}
});
factory
factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。
// 定义一个模块
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);
}
});
...
provider
AngularJS 中通过 provider 创建一个service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
// 定义一个模块
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;
};
});
});
constant
constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
mainApp.constant("configParam", "constant value");
实例
以下实例提供了以上几个依赖注入机制的演示。
AngularJS 实例 -factory
varmainApp = angular.module("mainApp", []); mainApp.value("defaultInput", 5); mainApp.factory('MathService', function(){varfactory = {}; factory.multiply = function(a, b){returna * b; }returnfactory; }); mainApp.service('CalcService', function(MathService){this.square = function(a){returnMathService.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); }});
AngularJS 路由
本章节我们将为大家介绍 AngularJS 路由。
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
通常我们的URL形式为https://runoob.com/first/page，但在单页Web应用中 AngularJS 通过#+ 标记实现，例如：
https://runoob.com/#/first
https://runoob.com/#/second
https://runoob.com/#/third
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (https://runoob.com/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由就通过# + 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
在以上图形中，我们可以看到创建了两个 URL： /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器。
接下来我们来看一个简单的实例：
AngularJS 路由应用
<script src="https://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://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>
尝试一下 ?
实例解析：
·1、载入了实现路由的 js 文件：angular-route.js。
·2、包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module('routingDemoApp',['ngRoute'])
·3、使用 ngView 指令。
该 p 内的 HTML 内容会根据路由的变化而变化。
·4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。
· module.config(['$routeProvider', function($routeProvider){
· $routeProvider
· .when('/',{template:'这是首页页面'})
· .when('/computers',{template:'这是电脑分类页面'})
· .when('/printers',{template:'这是打印机页面'})
· .otherwise({redirectTo:'/'});
}]);
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) &otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
·第一个参数是 URL 或者 URL 正则规则。
·第二个参数是路由配置对象。
路由设置对象
AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。
路由配置对象语法规则如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object
});
参数说明：
·template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：
.when('/computers',{template:'这是电脑分类页面'})
·templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
·controller:
function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
·controllerAs:
string类型，为controller指定别名。
·redirectTo:
重定向的地址。
·resolve:
指定当前controller所依赖的其他模块。
实例
<script src="https://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'embedded.about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
</script>
<script type="text/ng-template" id="embedded.home.html">
Home
</script>
<script type="text/ng-template" id="embedded.about.html">
About
</script>
Home
About