AngularJs详细
正经的来啦
（MVC）
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
修改了视图，模型和控制器也会相应更新。
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>/*视图*/
</div>
<script>
var app = angular.module('myApp', []);/*模型*/
/*控制器*/
app.controller('myCtrl', function($scope) {
$scope.name = "John Dow";
});
</script>
AngularJS指令
ng-model
使用ng-model进行双向数据绑定:就是将ng-model=“value”设置在输入框中，实现与AngularJS的表达式{{变量名}}的数据绑定。ng-model的value值就是AngularJS表达式中的变量名。
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
ng-repeat
ng-repeat就是重复html元素
通常用来循环数组
<li ng-repeat="x in names"> {{ x }} </li>
names是一个数组，输出数组中的每个值，每个值对应一个li标签。
通常用在数组对象上。
names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
ng-init 指令为 AngularJS 应用程序定义了 初始值。
ng-app 指令定义了 AngularJS 应用程序的 根元素,就是AngularJS的作用范围。
Scope作用域
Scope的使用
scope是一个JavaScript对象，带有属性和方法。应用于变量和函数。
<div ng-app="myApp" ng-controller="personCtrl">
名: <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('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
在构造控制器的时候，可以将$scope对象当做控制器函数的参数使用。
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
在视图（html）中获取$scope对象的参数的时候，可以直接添加属性名，不需要添加$scope前缀，如：{{carname}} 。
$rootScope 与$scope的作用域范围。
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
$scope作用在myCtrl这个控制器controller的范围内
$rootScope作用在ng-app控制的范围内，可以在各个controller中使用。
AngularJS过滤器
过滤器可以通过一个管道字符（|）和一个过滤器（currency,filter,lowercase,uppercase,orderBy）添加到表达式中。
用法：
<p>姓名为 {{ lastName | uppercase }}</p>
<p>姓名为 {{ lastName | lowercase }}</p>
<p>总价 = {{ (quantity * price) | currency }}</p>
/*排列数组*/
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
/*过滤器绑定输入：过滤器通过管道字符"|"与过滤器添加导致令中，然后过滤器之后跟一个冒号和一个模型的名字name(ng-model="name")*/
<li ng-repeat="x in names | filter:test | oderBy:'country'">
{{x.name | uppercase}}+{{x.country}}
</li>
AngularJS服务（service）
AngularJS服务是一个函数或者一个对象
$location服务
有一个$location服务可以返回当前页面的url地址。
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
});
$http服务
AngularJS中的常用的服务，用来向服务器发送请求，响应服务器传过来的数据。
例如，使用$http向服务器请求数据：
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http.get("welcome.html").then(function(response){
$scope.welcome=response.data;
});
});
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
请求读取PHP数据,例子：
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response.records;});
});
</script>
$timeout服务
相当于js中的window.setTimeout。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
2秒之后，myHeader的内容被替换为“How are you today ?”
$interval服务
相当于js当中的window.setInterval函数
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
显示以1秒变化的时钟。
AngularJS Select（选择框）
ng-options创建下拉列表
ng-options指令选择的是一个对象
例如:
数据源对象：使用对象作为数据源, x 为键(key), y 为值(value):
$scope.cars={
car01:{brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
使用ng-options，选择的为key-value键值对里面的value值，是通过键key来选择，也可以将value看做一个对象。
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>
下拉列表中有car01 car02 car03.想，选择car01 会出现相应的值的信息。
ng-repeat与ng-options的区别
数据源对象：
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
ng-repeat有局限性，它的选择的值是一个字符串;
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
使用 ng-options 指令，选择的值是一个对象：
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
两者同样会出现，点击下拉列表中的Google出现其url。
AngularJS模块module
模块介绍：
模块是应用程序中不同部分的容器，常用作控制器的容器。
通常app.js中放置整个项目中使用的各个模块，将控制器放在控制器的js文件中。
模块中使用控制器的例子：
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.firstname="Bi";
$scope.lastname="Sha";
});
定义模块：
var app=angular.module("myApp",[]);
其中，第一个参数"myApp"是模块的名字，应用在html的作用范围中ng-app="myApp"；
第二个参数[]定义模块的依赖关系，如果有依赖，就将依赖的模块名写在"[]"内部。
AngularJS 路由
基本介绍
路由就是通过不同的url来访问不同的内容，通过AngularJS可以实现多视图的单页weby应用。
通常我们的url格式为http://XX.com/first/page，在AngularJS当中，单页的web应用通过#+标记。如：http://XX.com/#/first。
解释：当点击http://xx.com/#/page的时候，向服务器请求的地址都是http://xx.com/，#之后的内容会在向服务器发送请求的时候会被客户端忽略掉，所以需要在客户端实现#号后面的内容功能。
AngularJS 路由的用法
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例</title>
</head>
<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="angular.min.js"></script>
<script src="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>
</html>
实例代码分析
1、要载入angular-route.js
2、注入ngRoute作为主模块的依赖模块
3、使用ng-view指令规定显示视图页面的位置。
4.配置$routeProvider,用$routeProvider来定义路由规则。
module.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{template:'首页'})
.when('/computers',{template:'电脑分类页'})
.when('/printers',{template:'打印机页'})
.otherwise({redirectTo:'/'});//返回首页。
}]);
使用config函数来配置路由规则：
- 通过使用configAPI，把$routeProvider注入到配置函数，并使用$routeProvide.whenAPI来定义路由规则。
- $routeProvider使用when(path,object)&otherwise(path,object)函数来按顺序定义所有路由。两个参数：
+ path：URL或者URL正则规则
+ object： 路由配置的对象：
配置路由对象语法：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
template:在 ng-view 中插入简单的 HTML 内容
templateUrl:在 ng-view 中插入 HTML 模板文件
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
controller:function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
controllerAs:string类型，为controller指定别名。
redirectTo:重定向的地址。
resolve:指定当前controller所依赖的其他模块。
