angularJs學習筆記－入門

時間 2019-11-08

原文原文鏈接

1.angularJs簡介javascript

　　angularJs是一個MV*的javascript框架（Model-View-Whatever,無論是MVVM仍是MVC，統歸MDV（model drive view））,實際上是由google推出的SPA(single-page-application)應用框架。它的用於數據在後端和前端之間的雙向綁定。這就意味着你在後臺改變數據，這些變更馬上就會出如今view上。html

　　在加載的時候，angular會將你的dom樹和javascript轉向一個angular app 。包含着angular指令和過濾器的html會被編譯成一個樹圖，響應的範圍和控制器會被附加在這個樹上，內部的應用循環確保了視圖和模型之間的數據綁定。每次模型被更新（能夠經過ajax請求，也能夠直接操做控制器），angular會從新運行它的 $digest循環，跟新數據綁定確保全部東西是同步的。前端

　　js代碼是用一種命令的方式操做dom。而在angular中，直接操做dom是不被提倡的。dom由視圖管理，data在scope中，方法在控制器裏。java

3. ng-appajax

　　(1)代碼預覽，引入angular文件編程

　　（2）遊覽器裏效果後端

　　（3）源碼promise

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../build/angular.min.js" charset="utf-8"></script>
  </head>
  <body>
      <div class="" ng-app>
        hello{{'world'}}
      </div>
  </body>
</html>

4. ng-modelapp

　　(1)代碼預覽框架

　　（2）遊覽器裏效果

　　(3)源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../build/angular.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="" ng-app>
      your name :
      <input type="text" name="name" value="" ng-model="yourname" placeholder="angular">
      <hr>
      hello {{yourname || 'angular'}}
    </div>
  </body>
</html>

5.ng-controller

　　(1)代碼預覽

　　（2）遊覽器效果

　　（3）源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello cynthia</title>
    <script src="../build/angular.min.js" charset="utf-8"></script>
  </head>
  
  <script type="text/javascript">
    var app = angular.module('app',[]);
    app.controller('helloCynthia',function($scope){
      $scope.eleName = "cynthia"
    })
  </script>
  
  <body>
    <div class="" ng-app='app' ng-controller='helloCynthia'>
      hello,{{eleName}}
    </div>
  </body>
</html>

6.ng-repeat

　　(1)代碼預覽

　　（2）遊覽器效果

　　（3）源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../build/angular.min.js" charset="utf-8"></script>
  </head>

  <script type="text/javascript">
    var app = angular.module('ngrepeat',[])

    app.controller('ngrepeatCtr',function($scope){
      $scope.developers=[
        {name:'wuqian',country:'china'},
        {name:'cynthia',country:'usa'},
        {name:'wupore',country:'canada'},
        {name:'selene',country:'english'}
      ]
    })
  </script>

  <body>
    <div class="" ng-app='ngrepeat' ng-controller='ngrepeatCtr'>
      <ul>
        <li ng-repeat='person in developers'>
          {{person.name}} from {{person.country}}
        </li>
      </ul>
    </div>
  </body>
</html>

7.example

　　(1)代碼預覽

　　（2）遊覽器效果（用戶在input裏輸入後，點擊button，在下方顯示輸入,可是目前顯示undefined。。。）　

　　（3）源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../build/angular.min.js" charset="utf-8"></script>
  </head>

  <script type="text/javascript">
    var app = angular.module('appName',[]);

    app.controller('controllerName',function($scope){
      $scope.clickName = function(){
        $scope.message = 'Name : ' + $scope.userInput;
      }
    })
  </script>

  <body>
    <div class="" ng-app='appName' ng-controller='controllerName'>
      <p>
        what's your name ?
      </p>
      <br>
      <input type="text" name="name" placeholer="input your name here" ng-model＝‘userInput’>
      <button type="button" name="button" ng-click='clickName()'>click here</button>
      <h3>{{message}}</h3>
    </div>
  </body>
</html>

8.filters 過濾器

　　angular提供的過濾器和unix中的管道pipeline類似。好比咱們要在網頁中顯示價格$能夠這樣寫

　　（1）源碼預覽

　　（2）遊覽器中效果

　　（3）源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../build/angular.min.js" charset="utf-8"></script>
  </head>
  <body>
      <div class="" ng-app>
        <span>iphone : {{63573 | currency}}</span>
      </div>
  </body>
</html>

9.利用filters作刪選

　　（1）代碼預覽

　　（2）遊覽器效果

　　（3）源碼　

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../build/angular.min.js" charset="utf-8"></script>
  </head>

  <script type="text/javascript">
    var app = angular.module('ngrepeat',[])

    app.controller('ngrepeatCtr',function($scope){
      $scope.developers=[
        {name:'wuqian',country:'china'},
        {name:'cynthia',country:'usa'},
        {name:'wupore',country:'canada'},
        {name:'selene',country:'english'}
      ]
    })
  </script>

  <body>
    <div class="" ng-app='ngrepeat' ng-controller='ngrepeatCtr'>
      <input type="text" name="name" value="" ng-model='search'>
      <ul>
        <li ng-repeat='person in developers | filter:search'>
          {{person.name}} from {{person.country}}
        </li>
      </ul>
    </div>
  </body>
</html>

10.自定義filter

　　(1)代碼預覽

　　（2）遊覽器效果（首字母變大寫）

　　（3）源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello cynthia</title>
    <script src="../build/angular.min.js" charset="utf-8"></script>
  </head>

  <script type="text/javascript">
    var app = angular.module('app',[]);

    // 自定義filter
    app.filter('capt',function(){
      return function(input,param){
        return input.substring(0,1).toUpperCase()+input.substring(1);
      }
    })
  </script>

  <body>
    <div class="" ng-app='app'>
      <span>{{'this is some text' | capt}}</span>
    </div>
  </body>
</html>

11.services

　　在controller之間共享數據對咱們是頗有用的，可是每一個controller都有本身的scope，因此咱們不能將其綁定到其餘的controller上。爲此angular提供了的解決方案是services。

　　angular內置了不少services，好比http請求、異步promises編程模式。這也是angular的核心（依賴注入）的關鍵。

　　services都是單例的，也就是說在一個應用裏，每一個service對象只會被實例化一次。它主要負責提供一個接口把特定的函數須要的方法放在一塊兒。最多見的方法是angular.module API的factory方式：

　　例子：經過services實現oneCtrl和twoCtrl之間共享一個數據 user

　　（1）源碼預覽

　　（2）遊覽器裏面效果

　　（3）源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello cynthia</title>
    <script src="../build/angular.min.js" charset="utf-8"></script>
  </head>

  <script type="text/javascript">
    var app = angular.module('app',[]);

    // 經過services實現oneCtrl和twoCtrl之間共享一個數據 user
    app.factory('userInfor',function(){
      var user={
        name : 'Angular.js'
      }
      return user;
    })

    app.controller('oneCtrl',function($scope,userInfor){
      $scope.user = userInfor;
    })
    app.controller('twoCtrl',function($scope,userInfor){
      $scope.user = userInfor;
    })

  </script>

  <body>
    <div class="" ng-app='app'>
      <div class="" ng-controller='oneCtrl'>
        oneCtrl :
        <input type="text" name="name" value="" ng-model='user.name'>
      </div>
      <div class="" ng-controller='twoCtrl'>
        twoCtrl :
        <input type="text" name="name" value="" ng-model='user.name'>
      </div>
    </div>
  </body>
</html>

12.ng-show 和 ng-hide

　　(1) 源碼預覽

　　（2）遊覽器裏效果：點擊按鈕下面的內容出現／隱藏

　　（3）源碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../build/angular.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="" ng-app>
      <button type="button" name="button" ng-init='shouldShow=true' ng-click='shouldShow = !shouldShow'>Flip the shouldShow variable</button>
      <div class="" ng-show='shouldShow'>
        <h3>showing {{shouldShow}}</h3>
      </div>
      <div class="" ng-hide='shouldShow'>
        <h3>hiding {{shouldShow}}</h3>
      </div>
    </div>
  </body>
</html>

13.