1.在文件目錄下打開(kāi)命令行對(duì)應(yīng)定位到此目錄執(zhí)行:npm install angular
安裝angular的第一個(gè)版本俭厚,默認(rèn)安裝的是1.0的版本益缎,第一個(gè)版本是用js編寫(xiě)的付秕,第二個(gè)版本typescript
2.我們?cè)趎ode_modules找angular的文件夾象踊,拷貝這個(gè)angular.js到我們的項(xiàng)目文件夾里面
我們開(kāi)發(fā)(調(diào)試)的時(shí)候用angular.js(未壓縮的版本)
我們是發(fā)布的時(shí)候用angular.min.js(壓縮的版本)
3.在html結(jié)構(gòu)里面引入angular.js
src="js/angular.js">
并調(diào)試console.log(angular);如果輸出的是一個(gè)對(duì)象那說(shuō)明引入成功
4.首先定義第一個(gè)模塊
angular.module('moduleOne',[]);
ng-app="moduleOne"是主模塊的作用域跟angular.module('moduleOne',[]);
定義模塊的名字格式最好是:模塊名+App
ng-controller='indexA'是再劃分主模塊的作用域angular.module('moduleOne',[]).controller('indexA');
定義控制器的名字格式最好是:控制器名字+Ctrl
5.angular.js如果是在頭部加載的話励负,頁(yè)面就不會(huì)出現(xiàn){{}}效果藕溅,如果放在后面則會(huì),一般其實(shí)我們會(huì)把js放在后面继榆,{{name}}相當(dāng)于ng-bind="name"
6.angular.js里面使用的是駝峰原則的命名
數(shù)據(jù)從后端到前端
font-end
<-data-ajax back-end
數(shù)據(jù)從前端到后端
font-end
ajax-data-> back-end
$scope,$http,{{}}?從后端把數(shù)據(jù)渲染到前端
ng-model
ng-model可以用在input textarea select
ng-model 跟 {{}}它們兩個(gè)都可以渲染值
ng-model多了一個(gè)接受輸入值的功能
雙向數(shù)據(jù)綁定巾表,$scope.name改變,ng-model="name",
{{name}}
ng-model改變略吨,其他兩個(gè)也會(huì)改變
ng-click
把函數(shù)作為數(shù)據(jù)集币,綁定到html結(jié)構(gòu)里面
html
ng-click="jk()">JK
js
$scope.jk = function(){
console.log('提交數(shù)據(jù)')
$http.get('test.php',{
params:{
name:$scope.input
}
}).success(function(data){
})
}
表達(dá)式
表達(dá)式可以算數(shù)運(yùn)算,字符串拼接
{{name+name}}
表達(dá)式也支持三元表達(dá)式翠忠,相當(dāng)于if()else{}
{{name?'a':'b'}}
來(lái)自<https://github.com/Wscats/Angular-news/issues/5>
Ng
-repeat:
ng-repeat="arr in arrs|limitTo:3:pageNum">{{arr.name}}
進(jìn)度條的使用:range
type="range" ng-model="input" />
ng-model="input">
$rootScope的使用:
團(tuán)隊(duì)開(kāi)發(fā)里面的思路:
每個(gè)人有該負(fù)責(zé)的模塊鞠苟,有相應(yīng)的控制器
src="js/indexCtrl.js">
src="js/indexCtrl2.js">
注意:一旦刪除其中的控制器,js里面的代碼也不會(huì)執(zhí)行
根作用域
Angular js根作用域:$rootScope
在控制器外定義一個(gè)值
$rootScope.title ='wowoowo';
在控制器任意地方也可以執(zhí)行
它的兄弟之間也可以定義
控制與控制之間可以傳遞數(shù)據(jù)
文件1js:$rootScope.a = '123'
文件2js:$scope.a = $rootScope.title;
相互傳遞
AngularJS過(guò)濾器
轉(zhuǎn)換數(shù)據(jù):大寫(xiě)
方法1:{{ name|uppercase}}
方法2:$scope.name.toUpperCase()
小寫(xiě)
{{name|lowercase}}
處理數(shù)字價(jià)錢(qián)貨幣:
{{
num|currency}
{{num|number:1}}//代表精確到第幾位
{{ num|currency:'¥'}}//¥12,345,00.
日期的寫(xiě)法:
{{data|data:'yyyy/MM/dd/hh/mm/ss/EEEE'}}\\
2017/02/15/12/15/48/Wednesday
MM:代表月份
mm:代表分鐘
注意:在網(wǎng)上下載的時(shí)間戳要加000,加三個(gè)零当娱,因?yàn)檗D(zhuǎn)換成了毫秒
過(guò)濾器
limitTo:截取的長(zhǎng)度吃既、截取的起始坐標(biāo)
{{name|limitTo:2:1}}可以負(fù)數(shù),負(fù)數(shù)表示從后往前截?cái)?shù)據(jù)
也可以篩選數(shù)組跨细,實(shí)現(xiàn)分頁(yè)
json:里面是一個(gè)對(duì)象
{{obj|json}}相當(dāng)于JSON.stringify
自定義過(guò)濾器:
App.filter('myfilter',[function($http)])
$scope是一個(gè)局部的作用域鹦倚,而自定義的過(guò)濾器是全局的,所以自定義的過(guò)濾器不會(huì)出現(xiàn)$scope