1.關於angularJS簡介
AngularJs是一款被由Google收購的優秀的前端框架,
核心特性:MVC,模塊化,自動化雙向數據綁定,語義化標籤,依賴注入
AngularJS是一個javaScript框架,以JavaScript編寫的庫.可以通過<script>標籤添加到HTML標籤
AngularJs通過指令擴展了HTML,且通過表達式綁定數據到HTML
- MVC:是一種使用MVC設計創建Web應用程序的模式
angularJs遵循軟件工程的MVC模式,鼓勵展現數據和邏輯之間的松耦合,通過依賴注入,爲客戶端的web應用帶來了傳統服務端的服務.
因此減輕了後端負擔,產生了更輕的web應用
將後臺的MVC模式寫入了前端語言中
.model:數據,其實就是angular變量($scope.xx)
,view:數據的呈現. Html+Directive(指令)
,Controller:操作數據,就是function,數據的增刪改查
- 模塊化設計
高內聚低耦合法則
1)官方提供的模塊 ng/ ngRoute / ngAnimate
2)用戶自定義的模塊 angular.module('模塊名',[ ]);
- 自動化雙向數據綁定
angularJs開發理念:申明式編程應該用於構建用戶界面以及編寫軟件構建,而指令式編程非常適合來表示業務邏輯.框架採用並擴展了傳統HTML,通過雙向數據綁定來適應動態內容.上相的數據綁定允許模型和視圖之間的自動同步,因此.AngularJS使得對DOM的操作不再重要,並提升了可測試性
傳統的數據綁定是單向綁定,數據只能從model和controller生成需要的html,但不能反過來使用.
雙向數據綁定:也就是說修改前面數據,後面直接同步出來.這也是angularJS靈活的一大主要原因.
- 依賴注入
在功能模塊上直接注入相關其他Controller或service..使多個控制模塊更加靈活的來使用,和java中的實現有異曲同工之妙.
2.AngularJS的語法
語法也是指研究指令屬性
所謂指令屬性就是綁定在DOM元素上的函數,它可以調用方法,定義行爲,綁定controller以及$scope對象,操作DOM等.具體自行百度
在一個AngularJS應用啓動時,AngularJS編譯器就會遍歷DOM樹,起點爲ng-app指令屬性開始.將指令屬性按優先級一一執行..(每個指令屬性都有優先級)
- 表達式
{{ 表達式 }}
表達式可以是標量或者運算式
- 指令
ng-app 指令 作用是爲AngularJs編譯器提供開始執行的起點,定義了angularJS應用程序的根元素,也就是告訴子元素以下指令是歸angularJS識別
<html>
<head>
<title>Demo-1</title>
<script
src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
ng-model 指令用於綁定變量,這樣用戶在文本框輸入的內容會綁定到變量上,而表達式可以實時地輸出變量
<html>
<head>
<title> demo-2</title>
<script
src="angular.min.js"></script>
</head>
<body ng-app>
請輸入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>
ng-init:初始化指令
在頁面加載的時候初始化angularJs方法的函數,以及初始化變量的值
<html>
<head>
<title>入門小Demo-3 初始化</title>
<script
src="angular.min.js"></script>
</head>
<body ng-app ng-init="myname='大海'">
請輸入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>
- 控制器
ng-controller 用於指定所使用的控制器
$scope : $scope的使用貫穿整個angularJsAPP應用,它與數據模型相關聯,同時也是表達式執行的上下文.有了$scope就在視圖和控制器之間建立了一個通道,基於作用域視圖在修改數據時會立刻跟新$scope,同樣的$scope發生改變時也會立刻重新渲染視圖.
- 事件指令
ng-click="" 最常用的單擊事件指令,,鼠標點擊的時候觸發控制器的某個方法
ng-if="" 用來做判斷的標籤 當值爲true時,顯示標籤體,當值爲false時,不顯示頁面
同樣的還有ng-show // ng-hide
例:<span ng-if="true">
顯示
</span>
<span ng-if="false">
不顯示
</span>
ng-repeat="" 用於循環數組集合變量
例:存在集合 List=[xxxxxxxxxxx];
遍歷每一個元素
ng-repeat="item in List"
{{item.xx}}
也可以遍歷鍵值對 鍵值對集合SearchEntity
ng-repeat="(key,value) in searchEntity"
{{ key }} {{value}}
ng-options 屬性可以再表達式中使用數組或對象來自動生成一個類似於select中的Option列表..
它和ng-repeat 很相似,很多時候可以用ng-repeat 來代替ng-options .但是ng-options具有減少內存提高運行速度,以及提供選擇框讓用戶來選擇,更具有靈活性.
ng-options="item.id as item.name for item in itemList"
ng-keyup 鍵盤點擊事件 xxx( ) 爲一個方法
ng-keyup="($event.which ==13)?xxx():0"
點擊事件裏可以嵌套三元表達式
- 內置服務
我們的數據一般都是從後端獲取的.一般使用內置服務$http來實現.與ajax類似異步的獲取數據
$http服務向服務器發送請求，應用響應服務器傳送過來的數據
$http的簡寫GET,POST請求
app.youlinService('youlinService',function($http){
this.find=function(date){
return $http.get('/xxx/someUrl.do?data='+data);
}
this.find1=function( ) {
return $http.post('/xxx/someUrl', entity);
}
});
注:區別是data爲普通引用數據
entity爲對象類型
AngularJS
$http 是一個用於讀取web服務器上數據的服務。
$http.get(url)
是用於讀取服務器數據的函數。
廢棄聲明
v1.5 中$http 的 success 和 error 方法已廢棄。使用 then 方法替代。
代碼如下:
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope,
$http) {
$http({
method: 'GET',
}).then(
function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) { // 請求失敗執行代碼
});
});
AngularJS中內建了30多個服務
$location 服務 ,可以返回當前頁面的URL地址
注意$location服務是作爲一個參數傳遞到controller中,如果要使用它,需要在controller中定義.
$location.xxx( ) ['yy'] ; 可以獲取url上帶的參數
var id= $location.search()['id'];//獲取參數值
問題:Angular的很多服務，在DOM中有對應的對象，那爲什麼不使用這些對象，而是要用服務呢？
回答:因爲這些服務可以獲取到Angular應用聲明週期的每一個階段，並且和$watch整合，讓Angular可以監控應用，處理事件變化。普通的DOM對象則不能在Angular應用聲明週期中和應用整合
$watch : 持續監聽數據上的變化,更新界面,或者執行方法
$sce 服務提供了很多方法,用來爲一些資源和AngularJS系統之間建立信任
常見的有
$sce.trustAsHtml(…)：將一段html文本視爲安全
$sce.trustAsUrl(…)
$sce.trustAsResourceUrl(…)
$sce.trustAsJs(…)
在網頁搜索功能設置高亮字段的時候我們可以使用$sce服務和過濾器來進行簡化開發
例:定義了一個模塊'youlin',在下方定義了一個過濾器
var app = angular.module("youlin",[]);
/*$sce服務寫成過濾器*/
app.filter('trustHtml',[function($sce){
return function(data){
return $sce.trustAsHtml(data);
}
}]);
$event 獲取當前事件元素
$index 獲取當前索引
- 過濾器
自定義過濾器 | 用於調用過濾器
示例:自定義一個過濾器 reverse，將字符串反轉
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依賴
return function(text) {
return text.split("").reverse().join("");
}
});
angularJs路由 會在路徑後面加上一個#號
總結有不當之處,希望同行指出,一起進步