angualrjs學習總結二(做用域、控制器、過濾器)

時間 2019-12-07

標籤 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>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>app

五：控制器

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;
}
});this

七：AngularJS 過濾器

過濾器能夠使用一個管道字符（|）添加到表達式和指令中spa

AngularJS 過濾器可用於轉換數據：
currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。
舉例：
//顯示名稱的大寫
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{firstname | uppercase}}</p>
</div>code

//顯示時，按照國家首字符天然順序排列
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>orm

八：過濾輸入

輸入過濾器能夠經過一個管道字符（|）和一個過濾器添加到指令中，該過濾器後跟一個冒號和一個模型名稱。
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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。