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

無論是angularjs還是jQuery都是用原生JS封裝的

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

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

jQuery庫實現(xiàn)了對獲取方式的封裝，對方法的封裝

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

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

版本：

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

angularjs框架09年誕生，專注PCweb，并沒有考慮到移動端，在移動端性能較差

angular2框架在16年誕生

angular2并不是angularjs的升級版，而是一個全新的框架

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

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

獲取方式

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

通過CDN的方式引入到頁面中

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

創(chuàng)建控制器，創(chuàng)建模塊的語句的返回值就是一個模塊對象，用這個對象去點方法，就是創(chuàng)建控制器

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

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

雙向：html和js

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

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

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

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

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

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

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

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

在angularjs中路由并沒有集成在angular.js文件中

路由作為一個多帶帶的模塊存在，如果要使用路由，我們需要將路由模塊作為主模塊的依賴模塊

主模塊或入口模塊 == 管理頁面的那個模塊

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

$routeProvider路由配置對象，名字暫時不能改

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

angularjs要求，錨點值必須以/開頭，在路由配置中使不需要寫#號

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

傳參

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

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

在被傳遞參數(shù)頁面（詳情頁）的控制器中獲取傳遞過來的參數(shù)

傳遞多個參數(shù)，直接接在后面寫，只要和后面一一對應(yīng)起來就可以

    

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

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

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

  
  
  
      首頁
        列表頁
        

  
    

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

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

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

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

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

作用域就近原則

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

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

$rootScope代表全局作用域

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

可以掛載公共屬性方法

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

  

      
{{item}}
  

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

  

      

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

數(shù)組項重復(fù)，會報錯

  

      
{{item}}
  

ng-class="{"類名1":布爾值,"類名2":布爾值}"專門用來添加或者刪除類名，接收的值是一個對象，布爾值為真，添加類名，布爾值為假，刪除類名

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

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類似

事件指令

onclick => ng-click

onmouseenter => ng-mouseenter

onchange => ng-change

ng-dblclick 雙擊事件

ng-src沒有src就不會解析就不會報錯，直到angularjs加載完成，解析ng-src之后再生成src

ng-href同上

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

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

引入的js文件作為依賴文件，控制器中必須寫入$http

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

method-->type請求的方式

params-->data只用于get傳參

data可以用于post傳參

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

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

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

res是形參，表示請求回來的數(shù)據(jù)

為了方便DOM操作，angularjs提供了一個jQuery精簡版，叫做jqLite

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

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

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

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

$watch用來監(jiān)控數(shù)據(jù)的變化

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

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

頁面一上來的時候，回調(diào)函數(shù)會先執(zhí)行一次

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

return中是對DOM操作的全部內(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)容會顯示在span標(biāo)簽

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

return中l(wèi)ink是angularjs提供的專門寫DOM操作的地方

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

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

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

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

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

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

分類

標(biāo)簽指令element E

屬性指令attributes A

樣式指令class C

注釋指令comment M

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

MVC后端思想

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

view視圖，用戶界面

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

MVVN

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

view視圖，用戶界面

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

angularjs是基于MVVM思想的框架

過濾器

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

{{ 數(shù)據(jù)模型 | 過濾器的名字:過濾器的參數(shù):多個參數(shù)以冒號隔開 }}

內(nèi)置過濾器

currency，貨幣過濾器，傳參表示前邊的符號

date，日期過濾器，傳參可以改變date的時間形式，可以用短橫分割，也可以寫漢字

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

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

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

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

uppercase，大寫

lowercase，小寫

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

自定義過濾器

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

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

ui-router

路由模塊的名字ui.router

模塊需要引入uirouter的依賴文件

用$stateProvider配置路由的對象

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

url表示錨點值

template渲染模板

name是路由名字，必須存在

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

概念:

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

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

有效提高開發(fā)效率 改善開發(fā)體驗

說明

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

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

編寫gulp任務(wù)使用JS語法

下載gulp

npm install gulp

在項目的根目錄運行這個命令，會自動生成一個node_modules文件夾 gulp會被下載到這個文件夾中。

node_modules文件夾中除了gulp以外，還會多出很多文件，這些都是gulp所要依賴的文件。

使用gulp編寫任務(wù)

gulp要求我們在項目的根目錄下新建一個gulpfile.js文件，這個文件是專門用來編寫gulp任務(wù)的。

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

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

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

    // gulp.task("任務(wù)名稱",任務(wù)回調(diào)函數(shù)) 創(chuàng)建任務(wù)方法
    // 任務(wù)名稱的用處:在執(zhí)行任務(wù)的時候需要指定任務(wù)名稱
    // 回調(diào)函數(shù):要做的事情需要寫在回調(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ù)編寫在了gulpfile.js文件中，要執(zhí)行任務(wù)，就需要運行這個JS文件，那么問題來了，我們以前編寫的JS文件，都會引入到HTML頁面中，然后運行HTML文件，JS就能執(zhí)行了

安裝一個gulp-cli工具即可

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

npm install gulp-cli -g

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

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

gulp 任務(wù)名稱

gulp中提供的方法

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

gulp.dest() 輸出文件

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

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

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