angualrjs学习总结二(作用域、控制器、过滤器)

一：Scope简介

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
举例：
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
姓名：{{carname}}
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.carname = 'BWM';
});
</script>
</body>
</html>

二：解决滚动条消失的问题

在iframe页面中加入框架DIV style设置为 width=100%;height=100%;overflow:auto;
<div style="width=100%;height=100%;overflow:auto"> overflow:auto或者scroll;
/*code*/
</div>

三：js框架MVC思想

AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
如果修改了视图，模型和控制器也会相应的变化。
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<label for="myName">姓名：</label>
<input type="text" ng-model="myName"/>
</div>
<div>
{{myName}}
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.myName = 'name';
});
</script>
</body>
</html>

四：scope的作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p>姓氏为：{{lastname}}</p>
<ul>
<li ng-repeat="x in names">{{x + " " +lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.names= ['tom','jack','lucy'];
$scope.lastname = 'Li';
});
</script>
</body>
</html>

五：控制器

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
举例：
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p>名：<input type="text" ng-model="firstname"/></p>
<p>姓：<input type="text" ng-model="lastname"/></p>
</div>
<div>
<p>{{fullname()}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.firstname = 'Jack';
$scope.lastname = 'Li';
$scope.fullname = function(){
return $scope.firstname +" "+$scope.lastname;
}
});
</script>
</body>
</html>
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

六：引入外部文件

外部文件中的控制器
<!doctype html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
名：<input type="text" ng-model="firstname"/><br>
姓：<input type="text" ng-model="lastname"/>
</div>
<div>
{{fullname()}}
</div>
<script src="personController.js"></script>
</body>
</html>

personController.js文件内容如下：
angular.module('myApp',[]).controller('myCtrl',function($scope){
$scope.firstname = 'Jack';
$scope.lastname = 'Tom';
$scope.fullname = function(){
return $scope.firstname + " " + $scope.lastname;
}
});

七：AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中

AngularJS 过滤器可用于转换数据：
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
举例：
//显示名称的大写
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{firstname | uppercase}}</p>
</div>

//显示时，按照国家首字符自然顺序排列
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>

八：过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：
举例：
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>

九：service服务

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。

1:$location 服务，它可以返回当前页面的 URL 地址。
<!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 ng-app="myApp" ng-controller="myCtrl">
<div>
<p>请求地址为：{{myUrl}}</p>
</div>
<script>
angular.module('myApp',[]).controller('myCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>

2:$http服务，发送请求到服务器，然后服务器响应传送数据过来。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});

3:$timeout服务，定时服务
angular.module('myApp',[]).controller('myCtrl',function($scope,$location,$http,$timeout){
$timeout(function(){
var d = new Date();
$scope.msg = d.getHours() +":"+d.getMinutes()+":"+d.getSeconds();
},3000);
});

4:$interval服务,设置时间间隔服务
angular.module('myApp',[]).controller('myCtrl',function($scope,$location,$http,$interval){
$timeout(function(){
$scope.msg = new Date().toLocaleTimeString();
},1000);
});

API:
toLocaleTimeString() :根据当地时间格式，将对应的时间部分转换为字符串
toLocaleDateString() :根据当地时间格式，将对应的日期部分转换为字符串

5:创建自定义服务,然后连接到模块中
<script>
var app = angular.module('myApp',[])
//自定义服务，然后传递到控制器模块
app.service('hexmethod',function(){
this.myFunc = function(x){
return x.toString(16);
}
});
app.controller('myCtrl',function($scope,hexmethod){
$scope.msg = hexmethod.myFunc(255);
});
</script>

6：在过滤器中使用自定义服务
<script>
var app = angular.module('myApp',[]);
//自定义服务，转换为16进制数
app.servie('hexmethod',function(){
this.myFunc = function(x){
return x.toString(16);
}
//自定义过滤器
app.filter('myFormat',['hexmethod',function(hexmethod){
return function(x){
hexmethod.myFunc(x);
}
}]);
});
</script>

举例：将数组内的数字过滤成为16进制数
<!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 ng-app="myApp" ng-controller="myCtrl">
<div>
<p>数组[255,254,16]通过过滤器转换16进制数</p>
<ul>
<li ng-repeat="x in arrs">{{x|myFormat}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);

app.service('hexmethod',function(){
this.myFunc = function(x){
return x.toString(16);
}
});

app.filter('myFormat',['hexmethod',function(hexmethod){
return function(x){
return hexmethod.myFunc(x);
}
}]);

app.controller('myCtrl',function($scope){
$scope.arrs = [255,254,16] ;
});
</script>
</body>
</html>