AngularJS簡述

時間 2020-01-15

標籤 angularjs 簡述欄目 AngularJS 简体版

原文原文鏈接

流行框架

簡介

angularjs是一款很是優秀的前端高級JS框架，由谷歌團隊開發維護，可以快速構建單頁web應用，化繁爲簡
不管是angularjs仍是jQuery都是用原生JS封裝的
庫：對代碼進行封裝，調用封裝的方法，簡化操做
傳統方式是用get方式獲取元素，而後點方法
jQuery庫實現了對獲取方式的封裝，對方法的封裝
框架：提供代碼書寫規則，按照規則去寫代碼，框架會幫咱們實現響應的功能
核心：經過指令擴展HTML功能，經過插值表達式綁定數據到HTML，不推薦在控制器中直接操做DOM，而是經過指令操做，以數據爲中心，用數據驅動DOM
版本：css
- 目前angularjs框架的版本是1.6.x
- angularjs框架09年誕生，專一PCweb，並無考慮到移動端，在移動端性能較差
- angular2框架在16年誕生
- angular2並非angularjs的升級版，而是一個全新的框架
- 2016年國內已經造成了angularjs，vue，react三足鼎立的局勢，angular2佔據的市場份額仍然比較小
- 企業裏面用的比較多的仍然是angularjs框架
獲取方式html
- 在官網上下載 http://angularjs.org
- 經過CDN的方式引入到頁面中
  <script src="https://cdn.bootcss.com/angul...; ></script>

插值

{{}}這種雙大括號的形式稱之爲插值表達式
能夠寫ng中的變量
能夠顯示字符串
能夠在表達式中能夠進行計算
能夠在表達式中寫三目運算符
能夠調用函數
執行angularjs函數

不能寫if else語句前端

<div>{{val}}</div>
  <div>{{'angularjs'+'很好很強大'}}</div>
  <div>{{1+1}}</div>
  <div>{{1==1?'相等':'不相等'}}</div>
  <div>{{getItem()}}</div>

基本指令

在使用了angularjs的頁面，以ng-開頭的屬性，稱之爲指令vue
```
<body ng-app></body>
<input type="text" ng-model="val" ng-init="val">
```
ng-appnode
- 頁面加載完成之後angularjs會在頁面中查找這個指令
- 沒有找到這個指令，angularjs將不會啓動
- 找到這個指令，angularjs將會執行指令所在標籤內部包裹的代碼
- 能夠接受模塊名字做爲參數 angularjs會將當前頁面交給指令所指定的模塊去管
ng-model="變量"react
- 獲取表單元素的值，實現雙向數據綁定
ng-click=" "angularjs
- 給指令所在元素綁定點擊事件，不能寫原生js代碼
ng-initweb
- 初始化數據

模塊化

模塊化開發帶來的好處：方便管理，複用，後期維護方便
解決代碼衝突，方便多人協做開發
angularjs中模塊的種類：入口模塊、功能模塊
定義模塊時第二個參數加與不加的區別：加第二個參數是建立模塊，不加第二個參數是獲取模塊
模塊化四步ajax
- 建立模塊，myApp是模塊的名字，module方法，數組中要依賴的模塊的名字，用逗號鏈接。沒有要依賴的文件的話，傳空數組。npm
```
<script>
        var app=angular.module('myApp',[]);
    </script>
```
- ng-app後面寫模塊的名字，告訴angularjs當前的頁面由本身建立的myApp模塊去管理
```
<body ng-app="myApp"></body>
```
- 建立控制器，建立模塊的語句的返回值就是一個模塊對象，用這個對象去點方法，就是建立控制器
```
<script>
        app.controller('demoCtrlA',function(){
            alert(1)
        });
          app.controller('demoCtrlB',function(){
            alert(2)
        });
    </script>
```
- 告訴angularjs當前區域由這個控制器去控制
```
<div class="sideBar" ng-controller="demoCtrlA"></div>
    <div class="main" ng-controller="demoCtrlB"></div>
```
- 兄弟控制器設置相同的屬性，不會衝突

雙向數據綁定

雙向：html和js
數據：angularjs中的變量
body標籤中的ng-app表示當前頁面由myApp管理，ng-controller表示當前區域由demoCtrl這個控制器控制
input標籤中的ng-model表示獲取表單元素的值
div標籤中顯示這個值
兩個按鈕分別註冊點擊事件，一個設置值一個獲取值

在控制器中封裝兩個函數

<body ng-app="myApp" ng-controller="demoCtrl">
      <input type="text" ng-model="val">
        <div>{{val}}</div>
        <button ng-click="setValue()">設置值</button>
        <button ng-click="getValue()">獲取值</button>
        <script src="node_modules/angular/angular.min.js"></script>
        <script>
            var app=angular.module('myApp',[]);
            app.controller('demoCtrl',function($scope){
              $scope.val="我是初始值";
                $scope.setValue=function(){
                  $scope.val="我是經過setValue方法更改的值"
              }
              $scope.getValue=function(){
                  alert($scope.val)
              }
          })
        </script>
  </body>

路由

路由就是用來配置頁面之間的跳轉關係的，配置錨點與頁面之間的對應關係
在angularjs中路由並無集成在angular.js文件中
路由做爲一個單獨的模塊存在，若是要使用路由，咱們須要將路由模塊做爲主模塊的依賴模塊
主模塊或入口模塊 == 管理頁面的那個模塊
angularjs中模塊依賴的步驟：將要依賴的模塊文件引入到頁面中，將模塊的名字寫在主模塊的第二個參數中
$routeProvider路由配置對象，名字暫時不能改
angularjs會將獲取到的模板文件內容放在頁面中有ng-view指令的元素中
angularjs要求，錨點值必須以/開頭，在路由配置中使不須要寫#號
當咱們使用了路由之後，就不須要直接在頁面中寫ng-controller指令

傳參

在被傳遞參數頁面（詳情頁）的路由中配置參數佔位符，相似於函數的形參
在傳遞參數頁面（列表頁）的跳轉連接中將實際的參數傳遞過去
在被傳遞參數頁面（詳情頁）的控制器中獲取傳遞過來的參數

傳遞多個參數，直接接在後面寫，只要和後面一一對應起來就能夠

<ul>
          <li><a href="#!/article/1/我是第1篇文章">我是第1篇文章</a></li>
          <li><a href="#!/article/2/我是第2篇文章">我是第2篇文章</a></li>
          <li><a href="#!/article/3/我是第3篇文章">我是第3篇文章</a></li>
    </ul>
    <script>
        var app=angular.module('myApp',['ngRoute'])
        app.config(function($routeProvider){
            $routeProvider
                .when('/article/:id/:title',{
                    templateUrl:'articleTpl',
                      controller:'articleCtrl'
                })
        });
    </script>

單頁web應用

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

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

<script src="node_modules/angular/angular.min.js"></script>
  <script src="node_modules/angular-route/angular-route.min.js"></script>
  <body ng-app="myApp">
      <a href="#!/index">首頁</a>
        <a href="#!/list">列表頁</a>
        <div ng-view></div>
  </body>
  <script>
      var app=angular.module('myApp',['ngRoute'])
      app.config(function($routeProvider){
          $routeProvider
              .when('/index',{
                  templateUrl:'./tpl/index.html',
                    controller:'indexCtrl'
              })
                .when('/list',{
                  templateUrl:'./tpl/list.html',
                    controller:'listCtrl'
              })
                .otherwise('/index')
      });
        app.controller('indexCtrl',function($scope){
          $scope.msg="我是首頁msg"
      })
        app.controller('listCtrl',function($scope){
          $scope.msg="我是列表頁msg"
      })
  </script>

三種模板方式

<script>
    templateUrl:'./tpl/index.html'//localhost
      template:'<div>我是首頁</div>'//file|localhosst
      template:'indexTpl'//file|localhosst
</script>

$scope

能夠傳遞的參數有不少，不須要一一寫出來
angularjs中傳遞參數不能依靠順序而是名字
若是形參名字改變了，angularjs就不知道要幹什麼了
解決方法：第二個參數寫數組，回調函數放到數組中

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

<script>
      angular.module("myApp",[]).controller("demoCtrl",["$scope","$timeout","$http","$location",function(a,b,c,d){
          a.msg="我是msg"
      }])
  </script>

做用域

做用域就近原則
angularjs中控制器控制的區域就是一個局部做用域，
也就是$scope表明局部做用域
$rootScope表明全局做用域
變量先順着$scope找，找不到就去全局找
能夠掛載公共屬性方法

遍歷

ng-repeat="循環過程當中的當前項 in 數據"循環數據並生成當前DOM元素
```
<ul>
      <li ng-repeat="item in arr">{{item}}</li>
  </ul>
```

遍歷數組對象，能夠嵌套，有ng-repeat的標籤中還能夠嵌套ng-repeat的標籤

<ul>
      <li ng-repeat="person in person">
            {{person.name}}{{person.age}}
            <span ng-repeat="item in person.hobby">{{item}}</span>
        </li> 
  </ul>

數組項重複，會報錯

<ul>
      <li ng-repeat="item in arr track by $index">{{item}}</li>
  </ul>

其餘指令

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是形參，表示請求回來的數據

<script src="node_modules/angular/angular.js"></script>
  <script src="node_modules/angular-sanitize.min.js"></script>
  <script>
      angular.module('myApp',['ngSanitize'])
            .controller('demoCtrl',['$scope','$http',function($scope,$http){
              $http({
                  url:'./test.json',
                    method:'post',//請求方式
                    params:{//get傳參
                        a:1,
                      b:2
                    },
                    data:{
                        c:3,
                      d:4
                    }
              }).then(function(res){
                    //成功回調
                  console.log(res)
              },function(){
                  //失敗回調
              })
                //另一種寫法
                $http.get('./test.json',{params:{a:1,b:2}}).then(function(res){
                    //get方式傳參
                  console.log(res)
              })
                $http.post('./test.json',{c:3,d:4}.then(function(res){
                    //post方式傳參
                  console.log(res)
              })
          }])
  </script>

jqLite

爲了方便DOM操做，angularjs提供了一個jQuery精簡版，叫作jqLite
$(原生的JS對象)將原生JS對象轉換成jQuery對象，目的是爲了使用jQuery對象下面提供的方法
angularjs.element(原生JS對象)將原生JS對象轉換成jqLite對象，目的是爲了使用jqLite對象下面提供的方法
這裏angularjs.element至關於jQuery中的$
jqLite中方法的使用和jQuery高度類似

$watch

$watch用來監控數據的變化
第一個參數是要監控的數據，第二個參數是回調函數
回調函數中第一個參數newValue是用戶輸入的最新內容，第二個參數oldValue是上一次用戶輸入的內容

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

<script>
      $scope.$watch('val',function(newValue,oldValue){
          if(newValue.length>10){
              $scope.tips="大於10";
          }else{
              $scope.tips="小於10"
          }
      })
  </script>

$apply

當經過原生JS將angularjs中的數據作了改變之後，angularjs不知道，因此須要調用$apply()方法通知angularjs更新html頁面

自定義指令

return中是對DOM操做的所有內容
templateUrl或者使用template引入模板
replace將自定義指令標籤自己刪掉，只顯示模板的內容
transclude將自定義標籤內部的內容保留，配合ng-transclude指令使用，模板中span標籤使用了ng-transclude，因此自定義標籤內部的內容會顯示在span標籤

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

<script>
    angular.module('myApp',[])
          .directive('myHeader',[function(){
            return {
                templateUrl:'myHeaderTpl',
                  replace:true,
                  transclude:true
            }
        }])
</script>

return中link是angularjs提供的專門寫DOM操做的地方
link中的函數有三個參數
- scope向指令的模板區域暴露數據
- element是指令所在的元素，是jqLite對象，能夠直接使用jqLite方法
- attributes是元素身上屬性的集合，若是有多個元素須要制定，用attribute
- css中內容不能寫死，attribute是一個屬性集合，attributes.myDir點出屬性
- return中有scope，默認是false，這時，link中的scope就是控制器中的$scope，若是將scope設置成turn，指令就有了單獨的做用域
```
<script>
      angular.module('myApp',[])
            .directive('myDir',[function(){
              return {
                  link:function(scope,element,attributes){
                      element.css('background','red')
                        element.css('background',attributes.myDir)
                  }
              }
          }])
  </script>
```
分類
- 標籤指令element E
- 屬性指令attributes A
- 樣式指令class C
- 註釋指令comment M
- return中能夠用restrict設置

MVC&MVVN

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 數據}}])
```
<script>
          angular.module('myApp',[])
                .filter('phonestar',[function(){
                  return function(value){
                      return value.substr(0,3)+'****'+value.substr(7)
                  }
              }])
      </script>
```

服務

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

ui-router

路由模塊的名字ui.router
模塊須要引入uirouter的依賴文件
用$stateProvider配置路由的對象
$urlRouterProvider設置沒有匹配到路由時的默認跳轉位置
url表示錨點值
template渲染模板

name是路由名字，必須存在

<script>
        angular.module('myApp',['ui.router'])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
                    // $stateProvider 配置路由的對象
                    $stateProvider
                        .state({
                            url:'/index', // 錨點值
                            templateUrl:'indexTpl',
                            name:'index',
                            controller:'indexCtrl'
                        })
                        .state({
                            url:'/list', // 錨點值
                            templateUrl:'listTpl',
                            name:'list',
                            controller:'listCtrl'
                        })
                    // 當沒有匹配到的路由時 默認跳轉到首頁
                    $urlRouterProvider.otherwise('/index');
                }])
    
                .controller('indexCtrl',['$scope',function($scope){
                    $scope.msg = "indexCtrl";
                }])
    
                .controller('listCtrl',['$scope',function($scope){
                    $scope.msg = "listCtrl";
                }])
    </script>

gulp

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自己提供的方法很少,大多數的任務都是由插件完成的

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。