AngularJS通過使用標識符的結(jié)構(gòu)士修，讓瀏覽器能夠識別一些新的語法偎捎。如：
使用雙大括號{{}}語法進行數(shù)據(jù)綁定杨耙；
使用DOM控制結(jié)構(gòu)來實現(xiàn)迭代或者隱藏DOM片段衬廷；
支持表單和表單的驗證鲤氢；
能將邏輯代碼關(guān)聯(lián)到相關(guān)的DOM元素上搀庶；
能將HTML分組成可重用的組件。
不適合使用的地方：
不常使用CRUD（增Create铜异、刪Delete哥倔、改Update、查Retrieve）的地方
引入js
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
安裝angular的命令
- npm init //做初始化
- ls 查看
- npm install --save angular //安裝angular
- npm install --save angular-route //安裝路由
架構(gòu)：
- 指令
- config
- controller
- 過濾器
- 服務
一揍庄、指令
又分為內(nèi)置指令和自定義指令
常用指令：
1.ng-app表示在其所在的標簽上咆蒿，應用angularJs，一般放在跟標簽html上，由于是單頁應用沃测，所以ng-app只需要寫一個
<html ng-app="app">
2.ng-init做變量的初始化
<div ng-init="a=100;b=2">
<h1>{{a}}</h1>
<h1>{{a+b}}</h1>
</div>
3.加載兩種方法
<h1>{{a}}{缭黔}</h1>
或
<h1 ng-bind="a"></h1>
<h1 ng-bind="b"></h1>
區(qū)別：如果在后面加載js文件，{{}}會先把原樣式加載出來蒂破，(即：在頁面顯示{{a}})馏谨，等js加載結(jié)束才會更改內(nèi)容，所以可能會在頁面閃一下附迷，而ng-bind則會等到js加載結(jié)束才顯示
4.事件綁定
<div ng-init="a='abc';">
<h1>{{a}}</h1>
<input ng-model=a />
</div>
在input中任意輸入內(nèi)容惧互，在h1中就會自己動態(tài)更改內(nèi)容，即事件綁定
5.ng-if:true顯示喇伯；false隱藏
可以代替display:none;
<div ng-controlller='ctrl'>
<div ng-if="flag">
{{name}}
</div>
<input type="button" value="button" ng-model="flag" ng-click='change()' />
</div>
js代碼：
angular.module('app',[])
.controller('ctrl',function($scope){
$scope.flag=true;
$scope.name="aaa";
$scope.change=function(){
console.log($scope.flag);
$scope.flag=!$scope.flag;
}
})
6.ng-show="true"顯示
ng-hide="true"隱藏
7.ng-repeat="x in arr track by $index"
根據(jù)下標遍歷喊儡，下標不會重復，在下面有具體代碼解釋稻据。
8.ng-class
9.ng-view配合路由使用艾猜；
10.$rootScope()添加全局變量，用法同$scope
11.ng-model
- 自定義指令
先自定義一個最簡單的指令
angular.module('app',[])
.controller('ctrl',function(){})
.directive('myHeader',function(){
//使用directive來自定義指令
return {
restrict:"E",
template:'<h1>你好</h1>'
}
})
在html中捻悯，就可以直接使用<my-header></my-header>標簽匆赃，
restrict有4個值：
E(element) C(class) M(注釋) A(attribute)；
template也可以寫成templateUrl,后面加文件路徑
使用方法相同
當restrict：‘M’時今缚，需要加一個屬性
.directive('hi',function(){
return {
restrict:'E',
replace:true,
template:'<h2>hhhh</h2>'
}
})
這樣注釋才能在頁面顯示出來
加replace和不加的區(qū)別：
不加的話直接顯示<my-header></my-header>炸庞，在標簽里面才是我們需要的，加上replace:true,就會把自定義標簽去掉
如果要在自定義標簽內(nèi)做嵌套荚斯，直接寫到自定義標簽里面埠居，也不會顯示，需要在代碼中同意嵌套,在嵌套元素加一個屬性ng-transclude
.directive('myHeader',function(){
return {
restrict:"E",
// template:'<h1>你好</h1>'
transclude:true,//表示同意嵌套
template:'<h1 ng-transclude>nihao</h1>'
//做嵌套時就會把元素都嵌套在這里
}
})
自定義指令的目的事期，一般是為了把重復的代碼用自定義指令封裝起來滥壕，使用的使用，傳進相應的參數(shù)兽泣，就能得到自己想要的
angular.module('app',[])
.directive('myHeader',function(){
return {
restrict:"E",
replace:true,
scope:{//做配置
title:'@',//表明title數(shù)據(jù)類型是一個字符串
name:'='//表明name是一個變量
show:'$'//函數(shù)方法
},
template:'<div><h1>{{title}}</h1></div>',
}
})
在html里面放進該自定義標簽
<my-header title="首頁"></my-header>
<my-header title="分類"></my-header>
<my-header title="購物車"></my-header>
<my-header title="我的"></my-header>
把上面的代碼完善一下
<my-header title="name" name="name" show="show(111)">asdlkfjdsalfjsadlk</my-header>
<my-header title="分類" name="name" show="show(222)"></my-header>
<my-header title="購物車" name="name" show="show(333)"></my-header>
提供name,show方法
angular.module('app',[])
.controller('ctrl',function($scope){
$scope.name="變量";
$scope.show=function(arg){
console.log('this is function show'+arg)
}
})
.directive('myHeader',function(){
return {
restrict:"E",
replace:true,
scope:{
title:'@',//表明title數(shù)據(jù)類型是一個字符串
name:'=',//表示name是一個變量
show:'&'//函數(shù)方法
},
template:'<div ng-click="show()"><h1>{{title}}{{name}}</h1></div>',
link:function($scope,$element,$attrs){
// console.log($scope);
// console.log($element);
// console.log($attrs);
console.log($attrs.title);
console.log($attrs.name);
console.log($attrs.show);
$element.bind('click',function(){
// console.log('a')
console.log(this)
this.style.backgroundColor="red";
})
$element.on('touchstart',function(e){
console.log(e)
})
}
}
})
link提供了三個參數(shù)绎橘，用來控制和修改自定義的指令
.directive('myHeader',function(){
// 如果里面只有一個link的function，那么就可以簡寫成下面的
return function($scope,$element,$attrs){
console.log($scope)
$element.bind('click',function(){
console.log(this)
this.style.backgroundColor="red";
})
}
})
二唠倦、controller控制器
- 需要先定義模塊
var app=angular.module('app',[]);
第一個參數(shù)是名稱
第二個參數(shù)是依賴
app.controller('ctrl',function($scope){
$scope.b=200;
$scope.c='hello angular';
$scope.arr=[1,2,3,4,5];
$scope.show=function(){
return ''神奇動物在哪里";
}
})
在html中称鳞，要引入ctrl:
<div ng-controller="ctrl">
<h1>{}</h1>
<h1>{{c}}</h1>
<h1>{{arr}}</h1>
<h1>{{show()}}</h1>
</div>
寫一個具體的案例稠鼻，定義一個div冈止，點擊變色
css樣式
.red{width:100px;height:100px;background:red;}
.green{width:100px;height:100px;background:green;}
html:
<div ng-controller="ctrl">
<div ng-class="myclass" ng-click="change()"></div>
</div>
js代碼：
angular.module('app',[])
.controller('ctrl',function($scope){
$scope.myclass='green';
$scope.change=function(){
$scope.myclass=$scope.myclass=='green'?'red':'green';
}
})
2.作用域
angular.module('app',[])
.controller('ctrl',function($scope,$rootScope){
$scope.brand="cp";
$rootScope.age=18;
})
.controller('ctrl2',function($scope){
$scope.say=function($scope,$rootScope){
return 'nnnnn'
}
$rootScope.speak = function(){
return "hello angular"
}
})
添加一個$rootScope ,就可以在頁面任意位置輸出
{{age}}//在頁面正常顯示
{{brand}}//超出作用域，不顯示
<div ng-controller="ctrl">
{{age}}
{{brand}}//兩個都顯示
<div ng-controller="ctrl2">
//在這里都可以正常顯示
</div>
</div>
總結(jié)：在哪個標簽調(diào)用控制器方法候齿，就只能在該div里面顯示熙暴，若想要在外面顯示闺属，可以在更外層標簽調(diào)用控制器，或使用$rootScope;
3.$watch周霉、$apply方法監(jiān)聽
雙向數(shù)據(jù)綁定:
ng-model-->$scope.name-->{{name}}
ng-model常出現(xiàn)在input中掂器，監(jiān)聽內(nèi)容變化
臟機制查詢，須手動觸發(fā)俱箱，$digest或使用timeout
html:
<div ng-controller="ctrl">
<h1>{{name}}</h1>
</div>
js:
angular.module('app',[])
.controller('ctrl',function($scope,$timeout){
$scope.name="小明";
$scope.$watch('name',function(newvalue,oldvalue,scope){
console.log('新值：'+newvalue);
console.log('舊值：'+oldvalue);
console.log("scope"+scope.name)
},false)
$timeout(function(){
$scope.name="小紅";
},2000)
})
效果：h1中的小明国瓮，經(jīng)過2s自動切換成小紅；
$watch和$timeout都是庫中封裝的方法狞谱，直接調(diào)用就可以乃摹。
$watch()有3個參數(shù)，第一個表示要檢測的目標芋簿；第二個參數(shù)類似于callback的函數(shù)，當檢測的目標發(fā)生變化時執(zhí)行璃饱；第三個參數(shù)是布爾值与斤，表示是否進行深度監(jiān)聽，true表示深度監(jiān)聽荚恶；
其中第二個參數(shù)function(){}又有三個參數(shù)撩穿，分別是('新值：'+newvalue)('舊值：'+oldvalue)("scope"+scope.name)；
如果監(jiān)聽一般的字符串等時谒撼，不需要深度監(jiān)聽食寡，就能檢測到，當監(jiān)聽的是對象時廓潜，就需要進行深度監(jiān)聽才能檢測到它內(nèi)部的變化
$timeout是已經(jīng)封裝好的延時計時器抵皱，用法和原生的一樣；還有$interval
如果要使用原生的演示器辩蛋，并且效果不變時呻畸，就需要借助$apply方法，代碼如下：
setTimeout(function(){
$scope.$apply(function(){
$scope.name='小紅';
})
},2000)
就上面案例中悼院，$watch事件列舉一個監(jiān)聽的對象伤为，第三個參數(shù)是true的小案例；
<div ng-controller="ctrl">
<h1>{{brand.name}}</h1>
<input ng-model="brand.name">
</div>
angular.module('app',[])
.controller('ctrl',function($scope){
$scope.brand={
name:'hello',
age:18
}
$scope.$watch('brand',function(newvalue,oldvalue,scope){
console.log('新值：'+newvalue);
console.log('舊值：'+oldvalue);
console.log("scope"+scope.name);
},true)
//最后一個參數(shù)必須是true,否則檢測不到里面的變化据途，就不能打印到控制臺
})
三绞愚、config
配置
四、過濾器
angular.module('app',[])
.controller('ctrl',function($scope){
$scope.price=998;
$scope.time=new Date();
$scope.arr=[
{name:'abc',age:100},
{name:'def',age:20},
{name:'ghi',age:15},
{name:'jkl',age:43},
{name:'mno',age:27}
]
})
- currency貨幣過濾currency:'$'颖医；
<h1>{{price | currency}}</h1>
不寫參數(shù)位衩，默認美元，并保留兩位小數(shù)
<h1>{{price | currency:"￥"}}</h1>
人民幣
- date日期格式化date:"yyyy-MM-dd hh:mm:ssa"熔萧；
<h1>{{time | date : "hh:mm:ssa"}}</h1>
最后加a蚂四，顯示上午下午（am\pm）
<h1>{{time | date : "yyyy-MM-dd"}}</h1>
<h1>{{time | date : "yyyy-MM-dd hh:mm:ssa"}}</h1>
- json 變化不大光戈，一般不用
<h1>{{json | json}}</h1>
- filter內(nèi)容過濾filter:'abc'；
實現(xiàn)搜索功能
<input ng-model="myfilter" />
<ul ng-repeat="x in arr | filter:myfilter">
<li>{{x.name}}+'---'+{{x.age}}</li>
</ul>
在input中輸入要找的內(nèi)容遂赠，ul中自動過濾顯示要查看的li;
ng-repeat表示遍歷久妆，arr是要遍歷的數(shù)組；
- limitTo數(shù)量過濾跷睦，寫幾筷弦，顯示幾條；
在上面的例子中直接添加
<ul ng-repeat="x in arr | limitTo:2">
<li>{{x.name}}+'---'+{{x.age}}</li>
</ul>
表示顯示ul中的前兩條
- uppercase全部大寫抑诸；
<ul ng-repeat="x in arr">
<li>{{x.name | uppercase}}</li>
</ul>
lowercase全部小寫烂琴；和大寫的用法一樣
orderBy通過**進行排序；
<ul ng-repeat="x in arr | orderBy:'age'">
<li>{{x.name | uppercase}}</li>
</ul>
按年齡從小到大排序蜕乡，也可以按name排序
ng-repeat方法
angular.module('app',[])
.controller('ctrl',function($scope){
$scope.arr=[
{name:'王源',age:18},
{name:'王俊凱',age:27},
{name:'易烊千璽',age:15},
{name:'王源1',age:23},
{name:'王俊凱2',age:21},
{name:'易烊千璽3',age:23},
]
$scope.arr2=[1,1,3,4,5,6]
})
<ul ng-repeat="x in arr | orderBy:'age'">
<li>{{x.name}} -- {{x.age}}</li>
</ul>
<ul ng-repeat="x in arr2 track by $index">
<li>{{x}}</li>
</ul>
使用track by $index,在不知道數(shù)組是否重復的情況下使用奸绷，若重復而沒有使用，則會報錯
自定義過濾器
angular.module('app',[])
.filter('tc',function(){
return function(ele){
console.log(ele);
return ele+'@@@';
}
})
.controller('ctrl',function($scope){
$scope.name='小明';
})
在使用時就可以直接使用
<div ng-controller="ctrl">
<h1>{{name | tc}}</h1>
</div>
五层玲、服務
1.內(nèi)置服務
$interval定時器
angular.module('app',[])
.controller('ctrl',function($scope){
$scope.count=0;
$interval(function(){
$scope.count++;
},1000)
})
2.$location方法
$location打印出來号醉，在原型中的方法
$location.absUrl()；//當前文件所在的絕對路徑
$location.host()// 當前IP
$location.port()// 當前端口
3.ajax數(shù)據(jù)交互,調(diào)用$http方法
angular.module('app',[])
.controller('ctrl',function($scope,$http){
$http.get('http://*********')
.then(function(res){
console.log(res);
return res.data;
})
.then(function(res){
console.log(res);
$scope.pro=res;
})
1.6以后版本使用thin辛块，之前的版本都是success(function(){})
若想知道用的什么方法畔派，可以打印console.log($http.get('http://www.。润绵。线椰。。尘盼。'))
})
4.自定義服務
五種方法
- value
- constant
- factory
- service
- provider
自定義服務不需要加$;
constant定義一個常量憨愉，除了constant服務，其他都不能注入到config里面
value定義了一個可變量：
angular.module('app',[])
.config(function(PI){
console.log(PI);
})
.controller('ctrl',['$scope','$http','president',function($scope,$http,president){
$scope.name='hello';
$scope.pic=president;
}])
.controller('ctrl2',function($scope,$http,president,PI){
$scope.name='world';
$scope.picc=presidet;
$scope.pi=PI;
})
.value('president','abc')
.constant('PI',3.1415926)
service卿捎、factory
angular.module('app',[])
.controller('ctrl',function($scope,math,math2){
// 注入math莱衩，調(diào)用他的加法
let result=math.add(2,3);
$scope.result=result;
$scope.result2=math2.add(1,2);
})
.service('math',function(){
// 可以添加方法，添加到this上面
this.add=function(x,y){
return x+y;
}
this.min=function(x,y){
return x-y;
}
})
.factory('math2',function(){
let factory={};
factory.add=function(x,y){
return x+y;
}
return factory;
})
service是把方法添加到this上面娇澎，factory則是先定義一個對象笨蚁，然后在對象上添加方法，最后返回這個對象
provider只能定義在config里面
angular.module('app',[])
.config(function($provide){
先注入provide對象
$provide.provider('math',fuction(){
this.$get=function(){
var factory={};
factory.add=function(x,y){
return x+y;
}
return factory;
}
})
})
.controller('ctrl',function($scope,math){
$scope.result=math.add(3,3);
})
方法更類似于factory趟庄；
在自定義服務中括细，由于服務和$scope,$http等是同級，所以在服務中不能引入$scope,$http等戚啥，如若特別想用的話奋单，可以在服務里面?zhèn)鬟M兩個形參，在調(diào)用的時候再傳進去猫十。
路由
最簡單的目的就是為了跳轉(zhuǎn)顯示頁面览濒，加載html呆盖；
為了縮小angular體系，把路由獨立出來贷笛；使用時应又，要把依賴寫進去
在說路由時，附帶一個添加css的方法乏苦，也是angular提供的株扛，{angular-css.min.js}
angular-router:
angular.module('qiongyou',['ngRouter'])
<a href="#/home">home</a>
<div ng-view></div>
angular.module('app',['ngRoute'])
.config(function($routeProvider){
$routeProvider
.$otherwise('home.html')//設置打開網(wǎng)頁時的默認頁面
$routeProvider
.when('/home',{
template:"<h1>這是首頁</h1>",//或templateUrl:'home.html',
// css:'home.css'//可以直接這樣寫
css:{
href:'home.css',
persist:true//表示是否永久保存
},
controller:function(){
console.log($css);
$scope.arr=[
{name:'aaa',age:'12'}, {name:'aaa',age:'12'} ]
}
})
})
以上就是一個簡單的路由匠题，點擊a標簽就會在a標簽下面的ng-view中顯示出來贫母，當然，路由可以分好多級肾胯，在頁面a標簽上設錨點掀淘，要和路由中的when的名稱一致
ui-router:
{angular-ui-router/release/angular-ui-router.min.js}
使用ui.router,顯示區(qū)域使用ui-view旬蟋；
angular.module('app',['ui.router'])
.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/footer/home/tn');
//點擊進去默認要顯示的頁面；
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html'革娄，
// 如果下面有關(guān)聯(lián)的控制器的話
controller:'home'
})
})
.controller('home',function($scope,$http){
//相關(guān)操作
})
在頁面a標簽倾贰，
<a ui-sref='home'>首頁</a>這里的home和state中的名稱一致
如果想要點擊樣式的話
<a ui-sref='home' ui-sref-active=“active”>首頁</a>
active是自定義的class樣式
如果想在路由下面再定義一個子路由
angular.module('app',['ui.router'])
.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/footer/home/tn');
//點擊進去默認要顯示的頁面；
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html'稠腊，
// 如果下面有關(guān)聯(lián)的控制器的話
controller:'home'
})
.state('home.search',{
url:'/search',
templateUrl:'search.html'
})
})
<a ui-sref='home.search'>首頁下的搜索頁面</a>
如果想定義一個子路由,并且不再同一個js 文件中寫躁染，就在父路由的依賴里面把字路由都寫進去鸣哀。把相應的js引入html架忌。
傳參
1路由傳參、2點擊事件傳參我衬、3通過提交服務器叹放，然后從服務器返回數(shù)據(jù)
1路由傳參
<a ui-sref="home({p1:'100',p2:'200'})">首頁</a>
通過傳鍵值對
參數(shù)接受
在state中接收參數(shù)
$stateProvider
.state('home',{
url:'/home',//可以通過/home/:p1:p2取到，但是不建議這樣
params:{
p1:null,
p2:null,//可以配置一個默認的參數(shù)挠羔，
},
templateUrl:'home.html',
controller:'home'
})
.controller('home',function($stateParams){
通過控制器的$stateParams拿到參數(shù)井仰，
let p1=$stateParams.p1;
console.log(p1);//100
})
2通過ng-click="change(x.id)"
在控制器中定義一個change方法
$scope.change=function(id){
console.log(id);
}
實現(xiàn)頁面的內(nèi)部跳轉(zhuǎn)，引用$state
.controller('home',function($state){
通過$state的方法
$state.go('state的狀態(tài)',{id:id})
})
在state('home',{
url:'/home',
templateurl:'路徑',
controller:function($scope,$stateParams,){
let id=$stateParams.id;
})
})
在事件傳參時破加，可以傳$index,當前的下標俱恶，還可以傳$event,在控制器里面，
ng-click=change($event);
.controller('home',function(e){
console.log(e.target);//獲取到事件對象
})
ng-click=change($index);
.controller('home',function(a){
console.log(a);//獲取到下標
})
angular也有jsonp方法：
$http.jsonp(鏈接).success(function(
))
