angularjs是一款非常優(yōu)秀的前端高級(jí)JS框架，由谷歌團(tuán)隊(duì)開(kāi)發(fā)維護(hù)，能夠快速構(gòu)建單頁(yè)web應(yīng)用，化繁為簡(jiǎn)

無(wú)論是angularjs還是jQuery都是用原生JS封裝的

庫(kù)：對(duì)代碼進(jìn)行封裝，調(diào)用封裝的方法，簡(jiǎn)化操作

傳統(tǒng)方式是用get方式獲取元素，然后點(diǎn)方法

jQuery庫(kù)實(shí)現(xiàn)了對(duì)獲取方式的封裝，對(duì)方法的封裝

框架：提供代碼書(shū)寫(xiě)規(guī)則，按照規(guī)則去寫(xiě)代碼，框架會(huì)幫我們實(shí)現(xiàn)響應(yīng)的功能

核心：通過(guò)指令擴(kuò)展HTML功能，通過(guò)插值表達(dá)式綁定數(shù)據(jù)到HTML，不推薦在控制器中直接操作DOM，而是通過(guò)指令操作，以數(shù)據(jù)為中心，用數(shù)據(jù)驅(qū)動(dòng)DOM

版本：

目前angularjs框架的版本是1.6.x

angularjs框架09年誕生，專(zhuān)注PCweb，并沒(méi)有考慮到移動(dòng)端，在移動(dòng)端性能較差

angular2框架在16年誕生

angular2并不是angularjs的升級(jí)版，而是一個(gè)全新的框架

2016年國(guó)內(nèi)已經(jīng)形成了angularjs，vue，react三足鼎立的局勢(shì)，angular2占據(jù)的市場(chǎng)份額仍然比較小

企業(yè)里面用的比較多的仍然是angularjs框架

獲取方式

在官網(wǎng)上下載 http://angularjs.org

通過(guò)CDN的方式引入到頁(yè)面中

ng-app后面寫(xiě)模塊的名字，告訴angularjs當(dāng)前的頁(yè)面由自己創(chuàng)建的myApp模塊去管理

創(chuàng)建控制器，創(chuàng)建模塊的語(yǔ)句的返回值就是一個(gè)模塊對(duì)象，用這個(gè)對(duì)象去點(diǎn)方法，就是創(chuàng)建控制器

告訴angularjs當(dāng)前區(qū)域由這個(gè)控制器去控制

兄弟控制器設(shè)置相同的屬性，不會(huì)沖突

雙向：html和js

數(shù)據(jù)：angularjs中的變量

body標(biāo)簽中的ng-app表示當(dāng)前頁(yè)面由myApp管理，ng-controller表示當(dāng)前區(qū)域由demoCtrl這個(gè)控制器控制

input標(biāo)簽中的ng-model表示獲取表單元素的值

div標(biāo)簽中顯示這個(gè)值

兩個(gè)按鈕分別注冊(cè)點(diǎn)擊事件，一個(gè)設(shè)置值一個(gè)獲取值

在控制器中封裝兩個(gè)函數(shù)

  
      
        
{{val}}
        設(shè)置值
        獲取值
        
        
  

路由就是用來(lái)配置頁(yè)面之間的跳轉(zhuǎn)關(guān)系的，配置錨點(diǎn)與頁(yè)面之間的對(duì)應(yīng)關(guān)系

在angularjs中路由并沒(méi)有集成在angular.js文件中

路由作為一個(gè)多帶帶的模塊存在，如果要使用路由，我們需要將路由模塊作為主模塊的依賴(lài)模塊

主模塊或入口模塊 == 管理頁(yè)面的那個(gè)模塊

angularjs中模塊依賴(lài)的步驟：將要依賴(lài)的模塊文件引入到頁(yè)面中，將模塊的名字寫(xiě)在主模塊的第二個(gè)參數(shù)中

$routeProvider路由配置對(duì)象，名字暫時(shí)不能改

angularjs會(huì)將獲取到的模板文件內(nèi)容放在頁(yè)面中有ng-view指令的元素中

angularjs要求，錨點(diǎn)值必須以/開(kāi)頭，在路由配置中使不需要寫(xiě)#號(hào)

當(dāng)我們使用了路由以后，就不需要直接在頁(yè)面中寫(xiě)ng-controller指令

傳參

在被傳遞參數(shù)頁(yè)面（詳情頁(yè)）的路由中配置參數(shù)占位符，類(lèi)似于函數(shù)的形參

在傳遞參數(shù)頁(yè)面（列表頁(yè)）的跳轉(zhuǎn)鏈接中將實(shí)際的參數(shù)傳遞過(guò)去

在被傳遞參數(shù)頁(yè)面（詳情頁(yè)）的控制器中獲取傳遞過(guò)來(lái)的參數(shù)

傳遞多個(gè)參數(shù)，直接接在后面寫(xiě)，只要和后面一一對(duì)應(yīng)起來(lái)就可以

    

          
我是第1篇文章
          
我是第2篇文章
          
我是第3篇文章
    
    

單頁(yè)面應(yīng)用程序的特點(diǎn)：整個(gè)網(wǎng)站由一個(gè)頁(yè)面構(gòu)成，公共部分只加載一次，利用Ajax局部刷新達(dá)到頁(yè)面切換的目的，不會(huì)發(fā)生頁(yè)面跳轉(zhuǎn)白屏的現(xiàn)象，錨點(diǎn)與頁(yè)面對(duì)應(yīng)

單頁(yè)web應(yīng)用的應(yīng)用場(chǎng)景：?jiǎn)雾?yè)面應(yīng)用對(duì)搜索引擎不友好，不適合做面向大眾的展示型網(wǎng)站，網(wǎng)站后臺(tái)管理系統(tǒng)、辦公OA、混合App等等不需要被搜索引擎搜索到的應(yīng)用

  
  
  
      首頁(yè)
        列表頁(yè)
        

  
    

可以傳遞的參數(shù)有很多，不需要一一寫(xiě)出來(lái)

angularjs中傳遞參數(shù)不能依靠順序而是名字

如果形參名字改變了，angularjs就不知道要干什么了

解決方法：第二個(gè)參數(shù)寫(xiě)數(shù)組，回調(diào)函數(shù)放到數(shù)組中

壓縮的時(shí)候，不會(huì)對(duì)字符串進(jìn)行壓縮，所以數(shù)組中傳遞字符串來(lái)確定參數(shù)的順序

作用域就近原則

angularjs中控制器控制的區(qū)域就是一個(gè)局部作用域，

也就是$scope代表局部作用域

$rootScope代表全局作用域

變量先順著$scope找，找不到就去全局找

可以?huà)燧d公共屬性方法

ng-repeat="循環(huán)過(guò)程中的當(dāng)前項(xiàng) in 數(shù)據(jù)"循環(huán)數(shù)據(jù)并生成當(dāng)前DOM元素

  

      
{{item}}
  

遍歷數(shù)組對(duì)象，可以嵌套，有ng-repeat的標(biāo)簽中還可以嵌套ng-repeat的標(biāo)簽

  

      

            {{person.name}}{{person.age}}
            {{item}}
        
 
  

數(shù)組項(xiàng)重復(fù)，會(huì)報(bào)錯(cuò)

  

      
{{item}}
  

ng-class="{"類(lèi)名1":布爾值,"類(lèi)名2":布爾值}"專(zhuān)門(mén)用來(lái)添加或者刪除類(lèi)名，接收的值是一個(gè)對(duì)象，布爾值為真，添加類(lèi)名，布爾值為假，刪除類(lèi)名

復(fù)選框，ng-model用來(lái)獲取復(fù)選框的值，是一個(gè)布爾值

ng-bind="數(shù)據(jù)"，將msg放到屬性中進(jìn)行加載，避免出現(xiàn)閃爍效果

ng-bind-template="{{數(shù)據(jù)1}} {{數(shù)據(jù)2}}"

ng-non-bindable直接得到插值表達(dá)式中的內(nèi)容，只要與屬性相關(guān)，都不執(zhí)行

ng-show="布爾值"，控制元素的顯示和隱藏

ng-hide="布爾值"，控制元素的顯示和隱藏

ng-if="布爾值"，控制元素的顯示和隱藏 true 顯示 false 隱藏

ng-switch&ng-switch-when用法和switch-case類(lèi)似

事件指令

onclick => ng-click

onmouseenter => ng-mouseenter

onchange => ng-change

ng-dblclick 雙擊事件

ng-src沒(méi)有src就不會(huì)解析就不會(huì)報(bào)錯(cuò)，直到angularjs加載完成，解析ng-src之后再生成src

ng-href同上

ng-options用來(lái)循環(huán)下拉列表，不能多帶帶使用，需要配合ng-model一起使用

要請(qǐng)求數(shù)據(jù)需要先引入js文件

引入的js文件作為依賴(lài)文件，控制器中必須寫(xiě)入$http

$http-->請(qǐng)求的地址，相當(dāng)于jQuery中的ajax

method-->type請(qǐng)求的方式

params-->data只用于get傳參

data可以用于post傳參

$http點(diǎn)then后面是兩個(gè)回調(diào)函數(shù)

第一個(gè)回調(diào)函數(shù)是成功回調(diào)

第二個(gè)回調(diào)函數(shù)是失敗回調(diào)

res是形參，表示請(qǐng)求回來(lái)的數(shù)據(jù)

為了方便DOM操作，angularjs提供了一個(gè)jQuery精簡(jiǎn)版，叫做jqLite

$(原生的JS對(duì)象)將原生JS對(duì)象轉(zhuǎn)換成jQuery對(duì)象，目的是為了使用jQuery對(duì)象下面提供的方法

angularjs.element(原生JS對(duì)象)將原生JS對(duì)象轉(zhuǎn)換成jqLite對(duì)象，目的是為了使用jqLite對(duì)象下面提供的方法

這里angularjs.element相當(dāng)于jQuery中的$

jqLite中方法的使用和jQuery高度相似

$watch用來(lái)監(jiān)控?cái)?shù)據(jù)的變化

第一個(gè)參數(shù)是要監(jiān)控的數(shù)據(jù)，第二個(gè)參數(shù)是回調(diào)函數(shù)

回調(diào)函數(shù)中第一個(gè)參數(shù)newValue是用戶(hù)輸入的最新內(nèi)容，第二個(gè)參數(shù)oldValue是上一次用戶(hù)輸入的內(nèi)容

頁(yè)面一上來(lái)的時(shí)候，回調(diào)函數(shù)會(huì)先執(zhí)行一次

當(dāng)通過(guò)原生JS將angularjs中的數(shù)據(jù)做了改變以后，angularjs不知道，所以需要調(diào)用$apply()方法通知angularjs更新html頁(yè)面

return中是對(duì)DOM操作的全部?jī)?nèi)容

templateUrl或者使用template引入模板

replace將自定義指令標(biāo)簽本身刪掉，只顯示模板的內(nèi)容

transclude將自定義標(biāo)簽內(nèi)部的內(nèi)容保留，配合ng-transclude指令使用，模板中span標(biāo)簽使用了ng-transclude，所以自定義標(biāo)簽內(nèi)部的內(nèi)容會(huì)顯示在span標(biāo)簽

如果自定義指令中的內(nèi)容是用標(biāo)簽包裹的，會(huì)被解析出來(lái)

return中l(wèi)ink是angularjs提供的專(zhuān)門(mén)寫(xiě)DOM操作的地方

link中的函數(shù)有三個(gè)參數(shù)

scope向指令的模板區(qū)域暴露數(shù)據(jù)

element是指令所在的元素，是jqLite對(duì)象，可以直接使用jqLite方法

attributes是元素身上屬性的集合，如果有多個(gè)元素需要制定，用attribute

css中內(nèi)容不能寫(xiě)死，attribute是一個(gè)屬性集合，attributes.myDir點(diǎn)出屬性

return中有scope，默認(rèn)是false，這時(shí)，link中的scope就是控制器中的$scope，如果將scope設(shè)置成turn，指令就有了多帶帶的作用域

分類(lèi)

標(biāo)簽指令element E

屬性指令attributes A

樣式指令class C

注釋指令comment M

return中可以用restrict設(shè)置

MVC后端思想

model模型，跟操作數(shù)據(jù)相關(guān)的方法，用angularjs中的服務(wù)來(lái)實(shí)現(xiàn)

view視圖，用戶(hù)界面

controller控制器，主要用來(lái)寫(xiě)一些業(yè)務(wù)邏輯

MVVN

model模型，跟操作數(shù)據(jù)相關(guān)的方法

view視圖，用戶(hù)界面

viewmodel在雙向數(shù)據(jù)綁定的框架中，$scope幫我們同步HTML頁(yè)面

angularjs是基于MVVM思想的框架

過(guò)濾器

過(guò)濾器：將數(shù)據(jù)格式化成我們想要的模式

{{ 數(shù)據(jù)模型 | 過(guò)濾器的名字:過(guò)濾器的參數(shù):多個(gè)參數(shù)以冒號(hào)隔開(kāi) }}

內(nèi)置過(guò)濾器

currency，貨幣過(guò)濾器，傳參表示前邊的符號(hào)

date，日期過(guò)濾器，傳參可以改變date的時(shí)間形式，可以用短橫分割，也可以寫(xiě)漢字

filter，將數(shù)據(jù)按照某種規(guī)則進(jìn)行過(guò)濾，模糊過(guò)濾（去數(shù)據(jù)中每一個(gè)字段中查找）和精確過(guò)濾（去數(shù)據(jù)中指定的字段中查找）

limitTo，限制，第一個(gè)參數(shù)limit 限制的數(shù)量，可以為負(fù)數(shù)，從后往前開(kāi)始限制，第二個(gè)參數(shù)begin，從第幾個(gè)開(kāi)始限制

orderBy，排序，orderBy:"字段" 默認(rèn)是升序，orderBy:"-字段" 降序，根據(jù)age字段，升序排列

number，數(shù)字過(guò)濾器，傳參表示保留幾位小數(shù)

uppercase，大寫(xiě)

lowercase，小寫(xiě)

json將數(shù)據(jù)一個(gè)良好的格式展示到頁(yè)面中，主要用于調(diào)試，要配合HTML頁(yè)面中的pre雙標(biāo)簽有一個(gè)參數(shù)用來(lái)控制縮進(jìn)

自定義過(guò)濾器

模塊對(duì)象.filter("過(guò)濾器的名字",[function() {return function(value){return 數(shù)據(jù)}}])

模塊對(duì)象.service("服務(wù)的名字",[function(){this.name="qwe";alert(this.name)}])

ui-router

路由模塊的名字ui.router

模塊需要引入uirouter的依賴(lài)文件

用$stateProvider配置路由的對(duì)象

$urlRouterProvider設(shè)置沒(méi)有匹配到路由時(shí)的默認(rèn)跳轉(zhuǎn)位置

url表示錨點(diǎn)值

template渲染模板

name是路由名字，必須存在

gulp官網(wǎng)(英文)gulp官網(wǎng)(中文)

概念:

前端自動(dòng)化流式構(gòu)建工具

我們可以使用gulp編寫(xiě)一些機(jī)械化的任務(wù)

有效提高開(kāi)發(fā)效率 改善開(kāi)發(fā)體驗(yàn)

說(shuō)明

gulp這個(gè)工具依賴(lài)node環(huán)境 所以在使用gulp之前需要安裝node環(huán)境

就像我們使用bootstrap要先引入jQuery是一個(gè)道理

編寫(xiě)gulp任務(wù)使用JS語(yǔ)法

下載gulp

npm install gulp

在項(xiàng)目的根目錄運(yùn)行這個(gè)命令，會(huì)自動(dòng)生成一個(gè)node_modules文件夾 gulp會(huì)被下載到這個(gè)文件夾中。

node_modules文件夾中除了gulp以外，還會(huì)多出很多文件，這些都是gulp所要依賴(lài)的文件。

使用gulp編寫(xiě)任務(wù)

gulp要求我們?cè)陧?xiàng)目的根目錄下新建一個(gè)gulpfile.js文件，這個(gè)文件是專(zhuān)門(mén)用來(lái)編寫(xiě)gulp任務(wù)的。

就像使用angularjs框架需要引包一樣，要使用gulp也需要引包

    // require("包名") 引包
    var gulp = require("gulp");
    // gulp變量是對(duì)象類(lèi)型
    // 我們編寫(xiě)任務(wù) 處理任務(wù)需要用到gulp對(duì)象下面的方法

編寫(xiě)人生中的第一個(gè)gulp任務(wù)

    // gulp.task("任務(wù)名稱(chēng)",任務(wù)回調(diào)函數(shù)) 創(chuàng)建任務(wù)方法
    // 任務(wù)名稱(chēng)的用處:在執(zhí)行任務(wù)的時(shí)候需要指定任務(wù)名稱(chēng)
    // 回調(diào)函數(shù):要做的事情需要寫(xiě)在回調(diào)函數(shù)中 比如less解析 代碼壓縮...
    gulp.task("first",function(){
        // gulp.src("文件路徑") 獲取文件
        // 獲取任務(wù)要處理的文件
        gulp.src("./css/base.css")
            // pipe("怎樣處理") 處理任務(wù)
            // gulp.dest("文件路徑") 將處理好的文件放入?yún)?shù)路徑中
            .pipe(gulp.dest("dist/css"))
    });

執(zhí)行任務(wù)

任務(wù)編寫(xiě)在了gulpfile.js文件中，要執(zhí)行任務(wù)，就需要運(yùn)行這個(gè)JS文件，那么問(wèn)題來(lái)了，我們以前編寫(xiě)的JS文件，都會(huì)引入到HTML頁(yè)面中，然后運(yùn)行HTML文件，JS就能執(zhí)行了

安裝一個(gè)gulp-cli工具即可

在命令行中的任意目錄下執(zhí)行下面的命令

npm install gulp-cli -g

-g 代表全局安裝 目的是在其他項(xiàng)目中也可以使用這個(gè)工具

安裝完成以后在項(xiàng)目的根目錄下輸入以下命令就可以執(zhí)行任務(wù)了

gulp 任務(wù)名稱(chēng)

gulp中提供的方法

gulp.src() 獲取任務(wù)要處理的文件

gulp.dest() 輸出文件

gulp.task() 建立gulp任務(wù)

gulp.watch() 監(jiān)控文件的變化

gulp本身提供的方法不多,大多數(shù)的任務(wù)都是由插件完成的