介紹
AngularJS誕生于2009年，由Misko Hevery 等人創建，后為Google所收購。是一款優秀的前端JS框架，已經被用于Google的多款產品當中。AngularJS有著諸多
特性，最為核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。
閑話：
angelur 前端必會angelur 代碼易維護
vue 兩個框架 vue 迅速占領前端市場
Angelur JS 有五個核心特性:
- 雙向數據綁定
- 模板
- Mvvm model(模型) -view(視圖)-viewModel(視圖模型) 吸收了MVC的設計程序,
MVC model(數據)-view(視圖)-controller(邏輯) - 依賴注入
- 指令
為什么使用angular
- 實現前后端的分離 ,后端只提供數據接口,路由,模板渲染等都在前端完成
- html 和 js 分離,展示和邏輯分離
- 減少 js 代碼,減少DOM 元素查找,事件綁定等代碼
- 適合 API 開發 適合單頁應用 整個頁面 只能見到一個html文件,應用不管多大,就只有這一個,跳轉,靠路由切換,一個頁面內,渲染不同的內容
內置指令
凡是以 ng- 開始的,都稱為內置指令
1. ng-app 用于表示一個angelur 應用
angelur 會從ng-app 所在的標簽開始,管理這個應用
一個頁面(應用)中.,建議只存在一個ng-app
如果有多個,要手動啟動對應的應用
目前的 ng-app="" 表示使用默認的 Angelur 應用
2. ng-init 初始化數據 ng-init = "a=b;c=d;..."
使用ng-init 初始的數據, 會掛載到根作用域
在開發正式項目是,不建議使用 ng-init 做數據初始化
應該交由 controller 去完成
看一段代碼先：
<!DOCTYPE html>
<html ng-app=""> /*默認使用angular的內置指令*/
<head>
<meta charset="utf-8">
<title>angular</title>
<script src="./angular.min.js" charset="utf-8"></script>
/* 鏈接angualr 必須的第一步*/
</head>
<body ng-init="name='zhar';age=30">
/* ng-init 初始化數據,這些數據可以在整個頁面的任何一個地方是用.例如:包含在h1標簽里面. 或者直接在頁面上輸出*/
{{ 5*4 }}
{{ 5>4 ? true : false}}
<h1>{{ name +"--"+age}}</h1>
<input type="text" ng-model="one">
*
<input type="text" ng-model="two" name="" value="">
=
{{one * two}}
{{name}}{{age}}
</body>
</html>
3. ng-model 將(表單)視圖與模型進行(雙向)綁定
<div ng-init="name='zhar';age=30;arr=['a','b','c'];obj={
name:'zhar',
age:30
}">
<input type="text" ng-model="name" >
<input type="text" ng-model="arr" name="" value="">
<ul>
<li ng-repeat="x in arr">{{ x }}</li>
</ul>
<h3 ng-repeat="(key,val) in obj">{{ key+"--"+val }}</h3>
</div>
4. ng-repeat 遍歷對象
遍歷數組:ng-repeat ="x in arr";
遍歷對象: ng-repeat = "(key,val) in obj";
還能遍歷復雜數組,ng-repeat=""
<div ng-init="name='zhar';age=30;arr=['a','b','c'];obj={
name:'zhar',
age:30
};items=[{
name:'iphone',
price:5999
},{
name:'xiaomi',
price:3999
}];as=[1,2,3,4,4,5,5]">
<input type="text" ng-model="name" >
<input type="text" ng-model="arr" name="" value="">
<ul>
<li ng-repeat="x in arr">{{ x }}</li>//遍歷普通數組
</ul>
<h3 ng-repeat="(key,val) in obj">{{ key+"--"+val }}</h3>//遍歷對象
<ul>
<li ng-repeat="x in arr">{{ x+"-"+$first+"-"+$last+"-"+$middle+"-"+$index}}</li>//遍歷數組,用angular提供的下標,是否是首個,最后一個,中間一個,下標是幾
</ul>
<ul>
<li ng-repeat="item in items">{{item.name+"--"+item.price}}</li>
//遍歷復雜數組,json數據格式
</ul>
<span ng-repeat="x in as track by $index">{{x}}</span>
//遍歷有相同元素的數組,適用下標為跟蹤依據,去遍歷數組
</div>
</body>
</html>
屬性:
$first 是否是第一項
$last 是否是最后一項
$middle 是否是中間項
$index 下標項
angelur 需要一個不重復的值去跟蹤數據的變化,將導致angelur 無法正常跟蹤對應的.,值,需要使用track by $index 為遍歷指定一個唯一的不重復值
ng-class
ng-class = { }[ ] 為元素指定樣式名
ng-class ="{true:'class' ,false:'class',}[bol]" 有bol 決定添加那個樣式
ng-class="{'class1':bol1,'class2':bol2,'class3':bol3}" 由bol決定添加那個樣式
//ng-class的三種寫法
<style>
.box{
width:100px;
height: 100px;
background: red;
}
.box1{
border:3px solid ;
}
.box2{
border-radius:50px;
}
.box3{
box-shadow: 2px 2px 4px #000;
}
</style>
<div class="box" ng-class="{true:'box1',false:'box2'}[className]"></div>
<div class="box"
ng-class="{'box1':isBox1,'box2':isBox2,'box3':isBox3}" ng-model=""></div>
ng-style : 為元素添加樣式
ng-show 是否顯示元素 true 顯示 false 隱藏
ng-show 為false時,只是為元素添加一個優先級最高的 display : none
ng-if 是否顯示元素
ng-if 為false時,會將元素從DOM 樹中移除
當需要反復顯示隱藏時,使用 ng-show
當只顯示一次便不再使用的元素,使用 ng-if
添加事件 button
ng-click 單擊事件 ng-click = "isShow= ! isShow"
ng-bind
可以解決后引入腳本時,雙{{ }}表達式,造成的原樣輸出的問題
腳本
angular.module (moduleName[,depends]) 創建或獲取模塊
moduleName :模塊名稱String
depends: 依賴的其他模塊 Array
當只傳入一個名稱時,代表獲取指定的模塊
兩個參數時,定義模塊,即使不依賴其他模塊,也要傳入一個空數組
作用域
作用域是父子之間可以繼承的,但同級的作用域卻不能相互訪問.
只有在controllar 作用域下才能有效輸出 比如:
<div ng-controller="myController">
{{ name }} 會輸出 zhar
</div>
<div ng-controller="myController2">
{{ name }} 會輸出 tom
</div>
{{ name }} 沒有輸出
<script type="text/javascript">
var app = angular.module("myApp",[]);
//掛斷式注入
app.controller("myController",function($scope){
$scope.name = "zhar";
})
//聲明式注入
app.controller("myController2",["$scope",function($scope){
$scope.name = "tom";
}])
</script>
$rootscope 在聲明 ng-app 的位置,創建此作用域
一個 angular 應用有且只有一個根作用域
同級的作用域不可相互訪問, 比如:以下
<div ng-controller="myController">
{{ name }}----{{ age }} 會輸出tom ---30
</div>
<div ng-controller="myController2">
{{ name }}==={{ age }} 會輸出zhar 沒有age輸出
</div>
</body>
<script type="text/javascript">
//聲明自己的app
var app = angular.module("myApp",[]);
//聲明式注入
//建議一律使用這種方式,代碼壓縮混淆后,依然能正常使用
//數組的0 到 倒數第二項, 是該控制需要注入的模塊
//最后一項是回調函數
app.controller("myController",["$scope",function($scope){
$scope.name = "tom";
$scope.age = 30;
}]);
app.controller("myController2",["$scope",function($scope){
$scope.name = "zhar"
}])
</script>
子集作用域可以訪問父集作用域的值,但無權修改,
7個內置過濾器: currency date orderBy filter uppercase lowercase limitTo
currency 貨幣格式轉換 currency :"￥" 更改為人民幣 默認是 $
lowercase uppercase
date 日期格式化 y 年 M 月 d 日 H 24時 h 12時 m 分鐘 s 秒
數組過濾器：limitTo: 限制結果條數 如：limitTo ：2 顯示兩條
orderBy 排序 是否降序排列
例：orderBy:"price": 升序排列
例：orderBy:"price":true 降序排列
filter 按關鍵字快速過濾
filter：searchKey 過濾所有數據包括 searchKey 的內容
明天又是艱苦的一天
