1淤毛、表達(dá)式
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<script src="./angular.min.js"></script>
</head>
<body ng-init="name='sun';age=13">
{{ 5*4 }}
{{ 5>4?"真":"假"}}
<h1>{{name +"--"+age}}</h1>
<input type="text" ng-model="one">
*
<input type="text" ng-model="two">
=
{{one*two}}
</body>
2、內(nèi)置指令
凡是以ng- 開(kāi)始的，都稱(chēng)為內(nèi)置指令
ng-app 用于表示一個(gè)angularjs應(yīng)用
Angular會(huì)從ng-app所在的標(biāo)簽開(kāi)始采呐，管理這個(gè)應(yīng)用
一個(gè)頁(yè)面（應(yīng)用）中，建議只存在一個(gè)ng-app
如果有多個(gè)搁骑，需要手動(dòng)啟動(dòng)對(duì)應(yīng)的應(yīng)用
目前ng-app=" "表示使用默認(rèn)的angular 應(yīng)用
ng-init='a=b;c=d;...';
使用 ng-init 初始的數(shù)據(jù)斧吐，會(huì)掛載到根作用域
在開(kāi)發(fā)正式項(xiàng)目時(shí)，不建議使用ng-init做數(shù)據(jù)初始化
應(yīng)該交由controller去完成
ng-model 將（表單）視圖與模型進(jìn)行（雙向）綁定
ng-repeat 遍歷對(duì)象
遍歷數(shù)組：ng-repeat="x in arr"
遍歷對(duì)象：ng-repeat=" (key,val) in obj"
屬性： $first 是否是第一項(xiàng)
$last 是否是最后一項(xiàng)
$middle 是否是中間項(xiàng)
$index 下標(biāo)值
track by $index Angular需要一個(gè)不重復(fù)的值去跟蹤數(shù)據(jù)的變化仲器，當(dāng)數(shù)組內(nèi)有重復(fù)時(shí)煤率，將導(dǎo)致angular 無(wú)法正常跟蹤對(duì)應(yīng)的值，需要使用track by $index 為遍歷指定一個(gè)唯一不重復(fù)的值乏冀。
ng-class為元素指定樣式名
ng-class="{true:'class1',false:'class2'}[bol]" 由 Bol 決定添加哪個(gè)樣式
ng-class="{'class1':bol1,'class2':bol2,'classN':bolN}"由各個(gè)變量決定是否添加指定的樣式
ng-style 為元素添加樣式
ng-style=" { style1:'style',...}"
ng-show是否顯示元素蝶糯，true顯示，false隱藏
ng-show 為 false 時(shí)辆沦，只是為元素添加一個(gè)優(yōu)先級(jí)最高的 display:none;
ng-if 是否顯示元素
ng-if 為 false 時(shí)裳涛，會(huì)將元素從DOM 樹(shù)種移除
當(dāng)元素需要反復(fù)顯示隱藏時(shí)，使用 ng-show
當(dāng)元素只顯示一次后就不再使用時(shí)众辨，使用ng-if
ng-click 單擊事件
ng-mouseover...dom的標(biāo)準(zhǔn)事件的寫(xiě)法
ng-bind 將模型輸出到頁(yè)面端三，后引入腳本時(shí)可以解決{{ }}造成的原樣輸出問(wèn)題
.box{width:100px;height:100px;background: red;}
.box1{border:1px solid}
.box2{border-radius: 5px;}
.box3{box-shadow: 2px 2px 5px black}
<body ng-init="isBox1=true;isBox2=true;isBox3=true;styleObject={};isShow=true;html='<h2>htmlString<h2>'">
<select name="" id="" ng-model="className">
<option value="true">box1</option>
<option value="false">box2</option>
</select>
<div class="box" ng-class="{true:'box1',false:'box2'}[className]"></div>
<div class="box" ng-class="{'box1':isBox1,'box2':isBox2,'box3':isBox3}"></div>
<div ng-style="{width:'100px',height:'100px',background:'green'}"></div>
<div ng-style="styleObject"></div>
<input type="checkbox" ng-model="isShow">顯示/隱藏
<button ng-click="isShow = ! isShow"> 顯示、隱藏 </button>
<div class="box" ng-show="isShow">1</div>
<!--<div class="box" ng-show="!isShow">2</div>-->
<div class="box" ng-if="isShow">2</div>
<h1 >{{ isShow }}</h1>
<h1 ng-bind="isShow"></h1>
{{html}}
<div ng-bind="html"></div>
<div ng-bind-html="html"></div>
</body>
3鹃彻、Controller
angular.module( moduleName[,depends(可選參數(shù))]) 創(chuàng)建或獲取模塊
moduleName ：模塊名稱(chēng)
depends： 依賴(lài)的其它模塊 Array
當(dāng)只傳入一個(gè)名稱(chēng)時(shí)郊闯，代表獲取指定的模塊
兩個(gè)參數(shù)時(shí)，定義模塊蛛株，即使不依賴(lài)其它模塊团赁，也要傳入一個(gè)空的數(shù)組
<html lang="en" ng-app="myApp">
var app = angular.module("myApp",[]);
//推斷式注入
app.controller("myController",function($scope){
$scope.name="sun";
});
//聲明式注入（建議一律使用這種方式，代碼壓縮混淆后依然能正確運(yùn)行）
//數(shù)組的 0 到 倒數(shù)第二項(xiàng) 是該控制器需要注入的模塊
//最后一項(xiàng)是回掉函數(shù)
app.controller("myController2",["$scope",function(s){
s.name="tom";
}])
$rootScope根作用域 在聲明 ng-app 的位置創(chuàng)建此作用域
一個(gè) angular 應(yīng)用有且只有一個(gè)根作用域
同級(jí)的作用域不可相互訪問(wèn)
<body ng-controller="mainController">
<div ng-controller="myController">
{{name}}---{{age}}--{{main}}--{{address}}
</div>
<div ng-controller="myController2">{{name}}--{{age}}--{{main}}--{{address}}</div>
<div ng-init="address='Beijing'">
{{address}}
</div>
{{name}}--{{main}}--{{address}}
</body>
var app = angular.module("myApp",[])
app.controller("myController",["$scope",function($scope){
$scope.name = "sun";
$scope.age = 30
}]);
app.controller("myController2",["$scope",function($scope){
$scope.name = "tom";
}]);
app.controller("mainController",["$scope",function($scope){
$scope.main = "Hello Angular"
}])
子級(jí)作用域可以訪問(wèn)使用父級(jí)作用域的值谨履，但是無(wú)權(quán)修改
<body ng-controller="mainController">
<h1>父級(jí)</h1>
<input type="text" ng-model="pmsg">
<div ng-controller="myController">
<h1>子級(jí)</h1>
<input type="text" ng-model="pmsg">
這是父級(jí)的值：{{pmsg}}
<h1 ng-repeat="item in items">{{item.name+'--'+item.price}}</h1>
<button ng-click="clickEvent($event)">點(diǎn)擊</button>
</div>
</body>
var app = angular.module("myapp",[]);
app.controller("myController",["$scope",function($scope){
$scope.cmsg = ""
$scope.items = [{
name:'iPhone',
price : 3000
},{
name:'藍(lán)莓',
price : 4000
}];
$scope.clickEvent = function(e){
console.log("點(diǎn)擊觸發(fā)",e);
$scope.items.push({
name:"新手機(jī)",
price:9889
})
}
}]);
app.controller("mainController",["$scope",function($scope){
$scope.pmsg = ""
}])
內(nèi)置過(guò)濾器
使用內(nèi)置過(guò)濾器的方法是用 “管道符” “|” 鏈接
**currency ** 貨幣格式轉(zhuǎn)換
currency ：“前綴” 更改指定的前綴欢摄，默認(rèn)為$
lowercass | uppercase 大小寫(xiě)轉(zhuǎn)換
date 日期格式轉(zhuǎn)換
y 年 M 月 d 日 H 24時(shí) h 12時(shí) m 分鐘 s 秒
數(shù)組過(guò)濾器：
limitTo 限制結(jié)果條數(shù) 如：limitTo:2 顯示兩條
orderBy 排序
orderBy:orderKey 按orderKey升序排列
orderBy:orderKey:true 按orderKey 降序排列
filter 按關(guān)鍵字快速過(guò)濾
filter:searchKey 過(guò)濾所有數(shù)據(jù)包含 searchKey 的內(nèi)容
<h2 >{{ price }}</h2>
<h2 >{{ price | currency}}</h2>
<h2 >{{ price | currency:"￥"}}</h2>
<h2 >{{ price | currency:"星星"}}</h2>
<h2 >{{ str | lowercase}}</h2>
<h2 >{{ str | uppercase}}</h2>
<h2>{{date}}</h2>
<h2>{{date | date:"yyyy-MM-dd HH:mm:ss a"}}</h2>
<br>
<!--<h3 ng-repeat="item in items | limitTo:2">{{item.name}}</h3>-->
<!--<h3 ng-repeat="item in items | orderBy:'price':true">{{item.name}}--{{item.price}}</h3>-->
<select name="" id="" ng-model="orderKey">
<option value="name">按名稱(chēng)排序</option>
<option value="price">按價(jià)格排序</option>
</select>
<input type="checkbox" ng-model="isDown">升/降
<input type="text" ng-model="searchKey" 請(qǐng)輸入關(guān)鍵字>
<h3 ng-repeat="item in items | orderBy:orderKey:isDown | filter:searchKey">{{item.name +'---'+ item.price}}</h3>
angular.module("myapp",[])
.controller("myController",["$scope",function($scope){
console.log($scope)
$scope.price = 4999,
$scope.str = "Hello Angular",
$scope.date = new Date(),
$scope.items = [{
name:"iPhone9"
,price : 9000
},{
name : "iPhone5"
,price:3000
},{
name:"小米"
,price:5000
},{
name:"藍(lán)莓"
,price:6000
}]
}])
自定義過(guò)濾器
<select name="" id="" ng-model="orderKey">
<option value="name">按名稱(chēng)排序</option>
<option value="price">按價(jià)格排序</option>
</select>
<input type="checkbox" ng-model="isDown">升/降
<input type="text" ng-model="searchKey" placeholder="輸入關(guān)鍵字">
<!--<h3 ng-repeat="item in items | orderBy:orderKey:isDown | filter:searchKey">{{item.name +'---'+ item.price}}</h3>-->
{{"str" | myFilter}} {{[2,3,4,5] | myFilter2}}
<h3 ng-repeat="item in items | myFilter3:searchKey">{{item.name}}--{{item.price}}</h3>
angular.module("myapp", [])
.filter("myFilter", function () {
return function (val) {
console.log(val);
// return val.toUpperCase();
return val == "str" ? "good" : "no"
}
})
.filter("myFilter2", function () {
return function (val) {
console.log(val);
var arr = val.map(Math.sqrt)
return arr;
}
})
.filter("myFilter3", function () {
return function (val,arg1) {
console.log(val);
console.log(arg1);
var arr=[];
val.forEach(function(item){
if(item.name.indexOf(arg1)!=-1){
arr.push(item)
}
})
return arr;
}
})
