angularjs是一款非常優秀的前端高級JS框架，由谷歌團隊開發維護，能夠快速構建單頁web應用，化繁為簡

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

庫：對代碼進行封裝，調用封裝的方法，簡化操作

傳統方式是用get方式獲取元素，然后點方法

jQuery庫實現了對獲取方式的封裝，對方法的封裝

框架：提供代碼書寫規則，按照規則去寫代碼，框架會幫我們實現響應的功能

核心：通過指令擴展HTML功能，通過插值表達式綁定數據到HTML，不推薦在控制器中直接操作DOM，而是通過指令操作，以數據為中心，用數據驅動DOM

版本：

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

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

angular2框架在16年誕生

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

2016年國內已經形成了angularjs，vue，react三足鼎立的局勢，angular2占據的市場份額仍然比較小

企業里面用的比較多的仍然是angularjs框架

獲取方式

在官網上下載 http://angularjs.org

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

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

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

告訴angularjs當前區域由這個控制器去控制

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

雙向：html和js

數據：angularjs中的變量

body標簽中的ng-app表示當前頁面由myApp管理，ng-controller表示當前區域由demoCtrl這個控制器控制

input標簽中的ng-model表示獲取表單元素的值

div標簽中顯示這個值

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

在控制器中封裝兩個函數

  
      
        
{{val}}
        設置值
        獲取值
        
        
  

路由就是用來配置頁面之間的跳轉關系的，配置錨點與頁面之間的對應關系

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

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

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

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

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

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

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

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

傳參

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

在傳遞參數頁面（列表頁）的跳轉鏈接中將實際的參數傳遞過去

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

傳遞多個參數，直接接在后面寫，只要和后面一一對應起來就可以

    

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

單頁面應用程序的特點：整個網站由一個頁面構成，公共部分只加載一次，利用Ajax局部刷新達到頁面切換的目的，不會發生頁面跳轉白屏的現象，錨點與頁面對應

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

  
  
  
      首頁
        列表頁
        

  
    

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

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

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

解決方法：第二個參數寫數組，回調函數放到數組中

壓縮的時候，不會對字符串進行壓縮，所以數組中傳遞字符串來確定參數的順序

作用域就近原則

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

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

$rootScope代表全局作用域

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

可以掛載公共屬性方法

ng-repeat="循環過程中的當前項 in 數據"循環數據并生成當前DOM元素

  

      
{{item}}
  

遍歷數組對象，可以嵌套，有ng-repeat的標簽中還可以嵌套ng-repeat的標簽

  

      

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

數組項重復，會報錯

  

      
{{item}}
  

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

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

ng-bind="數據"，將msg放到屬性中進行加載，避免出現閃爍效果

ng-bind-template="{{數據1}} {{數據2}}"

ng-non-bindable直接得到插值表達式中的內容，只要與屬性相關，都不執行

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用來循環下拉列表，不能多帶帶使用，需要配合ng-model一起使用

要請求數據需要先引入js文件

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

$http-->請求的地址，相當于jQuery中的ajax

method-->type請求的方式

params-->data只用于get傳參

data可以用于post傳參

$http點then后面是兩個回調函數

第一個回調函數是成功回調

第二個回調函數是失敗回調

res是形參，表示請求回來的數據

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

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

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

這里angularjs.element相當于jQuery中的$

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

$watch用來監控數據的變化

第一個參數是要監控的數據，第二個參數是回調函數

回調函數中第一個參數newValue是用戶輸入的最新內容，第二個參數oldValue是上一次用戶輸入的內容

頁面一上來的時候，回調函數會先執行一次

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

return中是對DOM操作的全部內容

templateUrl或者使用template引入模板

replace將自定義指令標簽本身刪掉，只顯示模板的內容

transclude將自定義標簽內部的內容保留，配合ng-transclude指令使用，模板中span標簽使用了ng-transclude，所以自定義標簽內部的內容會顯示在span標簽

如果自定義指令中的內容是用標簽包裹的，會被解析出來

return中link是angularjs提供的專門寫DOM操作的地方

link中的函數有三個參數

scope向指令的模板區域暴露數據

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

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

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

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

分類

標簽指令element E

屬性指令attributes A

樣式指令class C

注釋指令comment M

return中可以用restrict設置

MVC后端思想

model模型，跟操作數據相關的方法，用angularjs中的服務來實現

view視圖，用戶界面

controller控制器，主要用來寫一些業務邏輯

MVVN

model模型，跟操作數據相關的方法

view視圖，用戶界面

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

angularjs是基于MVVM思想的框架

過濾器

過濾器：將數據格式化成我們想要的模式

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

內置過濾器

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

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

filter，將數據按照某種規則進行過濾，模糊過濾（去數據中每一個字段中查找）和精確過濾（去數據中指定的字段中查找）

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

orderBy，排序，orderBy:"字段" 默認是升序，orderBy:"-字段" 降序，根據age字段，升序排列

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

uppercase，大寫

lowercase，小寫

json將數據一個良好的格式展示到頁面中，主要用于調試，要配合HTML頁面中的pre雙標簽有一個參數用來控制縮進

自定義過濾器

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

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

ui-router

路由模塊的名字ui.router

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

用$stateProvider配置路由的對象

$urlRouterProvider設置沒有匹配到路由時的默認跳轉位置

url表示錨點值

template渲染模板

name是路由名字，必須存在

gulp官網(英文)gulp官網(中文)

概念:

前端自動化流式構建工具

我們可以使用gulp編寫一些機械化的任務

有效提高開發效率 改善開發體驗

說明

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

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

編寫gulp任務使用JS語法

下載gulp

npm install gulp

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

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

使用gulp編寫任務

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

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

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

編寫人生中的第一個gulp任務

    // gulp.task("任務名稱",任務回調函數) 創建任務方法
    // 任務名稱的用處:在執行任務的時候需要指定任務名稱
    // 回調函數:要做的事情需要寫在回調函數中 比如less解析 代碼壓縮...
    gulp.task("first",function(){
        // gulp.src("文件路徑") 獲取文件
        // 獲取任務要處理的文件
        gulp.src("./css/base.css")
            // pipe("怎樣處理") 處理任務
            // gulp.dest("文件路徑") 將處理好的文件放入參數路徑中
            .pipe(gulp.dest("dist/css"))
    });

執行任務

任務編寫在了gulpfile.js文件中，要執行任務，就需要運行這個JS文件，那么問題來了，我們以前編寫的JS文件，都會引入到HTML頁面中，然后運行HTML文件，JS就能執行了

安裝一個gulp-cli工具即可

在命令行中的任意目錄下執行下面的命令

npm install gulp-cli -g

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

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

gulp 任務名稱

gulp中提供的方法

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

gulp.dest() 輸出文件

gulp.task() 建立gulp任務

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

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