Angular基礎

表達式

在Angular中表達式是運用在視圖中的一段代碼，如：

{{ 1.98 + 2.98 | number : 0 }}

控制器

在Angular中，控制器(controller)的功能是管理頁面的邏輯代碼，當控制器通過ng-controller指令被添加到DOM頁面時，Angular將會通過控制器構造函數(shù)生成一個實體對象，在這個過程中，$scope對象作為參數(shù)注入其中，并允許用戶訪問$scope對象

初始化$scope對象

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-controller="MyController">

  {{text}}

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('MyController', function($scope){
    $scope.text = 'Hello, World!';
  })
</script>
</body>
</html>

添加$scope對象方法

除了可以通過初始化的方式為$scope對象添加屬性之外，還可以為$scope對象添加方法，并依靠這些定義的方法來滿足視圖層中邏輯處理和事件執(zhí)行的需要

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-controller="MyController">

  {{text_show()}}

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('MyController', function($scope){
    $scope.text_show = function () {
      return 'Hello, Angular!';
    }
  })
</script>
</body>
</html>

在事件中為$scope對象綁定方法

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-controller="MyController">

  <p>{{text}}</p>
  <button ng-click="click_show()">點擊</button>

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('MyController', function($scope){
    $scope.text = 'Hello, World!';
    $scope.click_show = function() {
      $scope.text = '這是點擊后顯示的內容';
    }
  })
</script>
</body>
</html>

除了可以向$scope對象添加方法外，還可以在方法中添加參數(shù)，多個參數(shù)通過口號隔開

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-controller="MyController">

  <p>{{text}}</p>
  <button ng-click="click_show()">點擊顯示</button>
  <button ng-click="click_params('我是帶參數(shù)的')">帶參數(shù)的點擊</button>

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('MyController', function($scope){
    $scope.text = '';
    $scope.click_show = function() {
      $scope.text = 'Hello, World!';
    }
    $scope.click_params = function(param) {
      $scope.text = param;
    }
  })
</script>
</body>
</html>

$scope對象屬性和方法的繼承

在Angular中，ng-controller指令允許在不同的層次元素中指定控制器，處于子層控制器中的$scope對象將會自動繼承父層控制器中$scope對象的屬性和方法

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <div ng-controller="parentController">
    <div ng-controller="childController">
      <span>{{text}}</span><br>
      <span>{{child_text}}</span><br>
      <button ng-click="click_show()">繼承</button>
    </div>
  </div>

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('parentController', function($scope){
    $scope.text = 'Hello, Angular!';
    $scope.click_show = function() {
      $scope.text = '單擊后顯示的內容';
    }
  })
  .controller('childController', function($scope){
    $scope.child_text = '歡迎來到AngularJS的世界！';
  })
</script>
</body>
</html>

模板

Angular提供一套完善的模板系統(tǒng)，配合$scope對象和數(shù)據(jù)雙向綁定機制，將頁面純靜態(tài)元素經過行為、屬性的添加和格式的轉換，最終變成在瀏覽器中顯示的動態(tài)頁

構建模板內容

構建的方式一般通過下面三種方式：

  • 直接在頁面中添加元素和Angular指令，依賴控制器中構建的屬性和方式綁定模板中的元素內容和事件，實現(xiàn)應用需求
  • 通過type類型為text/ng-template的<script>元素來構建一個用于綁定數(shù)據(jù)的模板
  • 通過添加元素的src屬性，導入一個外部文件作為綁定數(shù)據(jù)的模板，除了src屬性外，還需要使用ng-include指令
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<script type="text/ng-template" id="tplbase">
  姓名: {{name}} <br>
  郵箱: {{email}}
</script>
<div ng-include="'tplbase'" ng-controller="MyController"></div>

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
          .controller('MyController', function($scope){
            $scope.name = 'Kaindy7633';
            $scope.email = 'kaindy7633@gmail.com';
          })
</script>
</body>
</html>

使用指令復制元素

在Angular中，使用ng-repeat指令來復制元素，也可以叫循環(huán)輸入元素

在使用ng-repeat中，Angular還提供了幾個專有變量，通過它們可以處理顯示數(shù)據(jù)時的各種狀態(tài)

  • $first：標記記錄是否是首條，如果是返回true，否則返回false
  • $last：標記記錄是否是尾條，如果是返回true，否則返回false
  • $middle：標記記錄是否是中間條，如果是返回true，否則返回false
  • $index：標記記錄的索引號，其對應的值從0開始
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <div ng-controller="MyController">
    <ul>
      <li>
        <span>序號</span>
        <span>姓名</span>
        <span>性別</span>
        <span>是否首條</span>
        <span>是否尾條</span>
      </li>
      <li ng-repeat="stu in data">
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{$first?'是':'否'}}</span>
        <span>{{$last?'是':'否'}}</span>
      </li>
    </ul>
  </div>

<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
          .controller('MyController', function($scope){
            $scope.data = [
              {name: '張明明', sex: '女'},
              {name: '李青思', sex: '女'},
              {name: '劉曉華', sex: '男'},
              {name: '陳忠忠', sex: '男'}
            ];
          })
</script>
</body>
</html>

添加元素樣式

在Angular中，添加元素樣式分為以下幾種方式：

(1) 直接綁定值為CSS類別名稱的$scope對象屬性，如：

在Angular中定義：

$scope.red = 'red';

在HTML中定義：

<div ng-class="{{red}}"></div>

或者

<div class="{{red}}"></div>

上面的這種方式簡單，但不提倡，在開發(fā)Angular應用時，盡量保證控制器代碼是處理業(yè)務邏輯，而不涉及頁面元素

(2) 以字符串數(shù)組方式選擇性添加CSS類別名稱

這種方式根據(jù)控制器中一個布爾類型的屬性值來決定頁面元素添加那種CSS樣式

在Angular中定義：

$scope.blnfocus = true;

在html中定義：

<div ng-class="{true: 'red', false: 'green'}[blnfocus]"><div>

(3) 通過定義key/value對象的方式來添加多個CSS樣式名稱

這種方式根據(jù)控制顯示樣式的屬性值添加多個樣式名

在Angular中定義：

$scope.a = false;
$scope.b = true;

在html中定義：

<div ng-class="{'red': a, 'green': b}"></div>

另外，在Angular中，還有兩個與定義樣式相關的指令，分別是ng-class-odd和ng-class-even，它們專用于以列表方式顯示數(shù)據(jù)，對應奇數(shù)行與偶數(shù)行的樣式

<!doctype html>
<html ng-app="MyApp">
<head>    
  <meta charset="UTF-8">    
  <title>Document</title>    
    <style>        
        body {font-size: 12px;}        
        ul {list-style-type: none; width: 408px; margin: 0; padding: 0;}        
        ul li {float: left; padding: 5px 0;}        
        ul .odd {color: #0026ff;}        
        ul .even {color: #ff0000;}        
        ul .bold {font-weight: bold;}        
        ul li span {width: 52px; float: left; padding: 0px 10px;}                        ul .focus {background-color: #ccc;}    
    </style>  
  </head>
    <body>    
    <div ng-controller="MyController">        
        <ul>            
          <li ng-class="{{bold}}">                
              <span>序號</span>                
              <span>姓名</span>                
              <span>性別</span>                
              <span>是否首條</span>                
              <span>是否尾條</span>            
          </li>            
          <li ng-repeat="stu in data"                
               ng-class-odd="'odd'"                
               ng-class-even="'even'"                
               ng-click="li_click($index)"                
               ng-class="{focus: $index==focus}">                          
              <span>{{$index+1}}</span>                
              <span>{{stu.name}}</span>                
              <span>{{stu.sex}}</span>                
              <span>{{$first?'是':'否'}}</span>                
              <span>{{$last?'是':'否'}}</span>            
          </li>        
      </ul>    
    </div>
<script src="./angular.min.js"></script>
<script>
  angular.module('MyApp', [])
  .controller('MyController', function($scope){
    $scope.bold = 'bold';
    $scope.li_click = function() {
      $scope.focus = i;
    };
    $scope.data = [
      {name: '張明明', sex: '女'},                    
      {name: '李青思', sex: '女'},                   
      {name: '劉曉華', sex: '男'},                   
      {name: '陳忠忠', sex: '男'}  
    ];
  })
</script>
</body>
</html>

控制元素的隱藏與顯示狀態(tài)

在Angular中，可以通過ng-show、ng-hide和ng-switch指令來控制元素的隱藏與顯示

而ng-switch指令的功能是顯示匹配成功的元素，它要與ng-switch-when和ng-switch-default指令配合使用

<!doctype html>
<html ng-app="MyApp">
  <head>  
    <meta charset="UTF-8">  
    <title>Document</title>
  </head>
  <body>  
    <div ng-controller="MyController">    
      <div ng-show="{{isshow}}">Kaindy7633</div>    
      <div ng-hide="{{isHide}}">kaindy7633@gmail.com</div>      
      <ul ng-switch on={{switch}}>      
        <li ng-switch-when="1">Kaindy7633</li>      
        <li ng-switch-when="2">Kaindy7633@gmail.com</li>  
        <li ng-switch-default>更多...</li>    
      </ul>  
    </div>  
    <script src="./angular.min.js"></script>  
    <script>    
      angular.module('MyApp', [])    
      .controller('MyController', function($scope){       
        $scope.isshow = true;      
        $scope.isHide = false;      
        $scope.switch = 3;    
      })  
    </script>
  </body>
</html>

表單控件

表單基本驗證功能

在Angular中，針對表單和表單控件提供了如下屬性，用于驗證控件交互值的狀態(tài)

  • $prisine表示表單或控件內容是否未輸入過
  • $dirty表示表單或控件內容是否已輸入過
  • $valid表單或控件內容是否已驗證通過
  • $invalid表示表單或控件內容是否未驗證通過
  • $error表示表單或控件內容驗證時的錯誤提示信息

前面4個均返回布爾類型的值，最后一個返回一個錯誤對象

<!doctype html>
<html ng-app="MyAPp">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body {font-size: 12px;}
    input {padding: 3px;}
  </style>
</head>
<body>
<form name="myForm" ng-submit="save()" ng-controller="MyController">
  <div>
    <input type="text" name="username" ng-model="name" required>
    <span ng-show="myForm.username.$error.required">
       用戶名不能為空
    </span>
  </div>
  <div>
    <input type="email" name="email" ng-model="email" required>
    <span ng-show="myForm.email.$error.required">Email地址不能為空</sapn>
    <span ng-show="myForm.email.$error.email">Email格式不正確</span>
  </div>
  <div>
    <input type="submit" name="submit" ng-disabled="myForm.$invalid" value="提交">
  </div>
</form>

<script src="./angular.min.js"></script>
<script>
  var myform = angular.module('MyApp', []);
  myfrom.controller('MyController', ['$scope', function($scope){
    $scope.name = 'Kaindy7633';
    $scope.email = 'kaindy7633@gmail.com';
    $scope.save = function(){
      alert('保存成功');
    }  
  }]);
</script>
</body>
</html>

表單中的checkbox和radio控件

<!doctype html>
<html ng-app="MyApp">
  <head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>    
      body { font-size: 12px;}    
      input { padding: 3px;}  
    </style>
  </head>
  <body>
  <form name="myForm" ng-submit="save()" ng-controller="MyController">  
    <input type="checkbox" ng-model="a">同意  
    性別:  
    <input type="radio" ng-model="b" value="男">男  
    <input type="radio" ng-model="b" value="女">女  
    <input type="submit" vlaue="提交">  
    <p>{{c}}</p>
  </form>
  <script src="./angular.min.js"></script>
  <script>  
  var myform = angular.module('MyApp', []);  
  myform.controller('MyController', ['$scope', function($scope){    
    $scope.a = true;    
    $scope.b = '男';    
    $scope.save = function() {      
      $scope.c = '您選擇的是:' + $scope.a + '和' + $scope.b;    }  }]);
  </script>
</body>
</html>

表單中的select控件

在Angular中，select控件可以借助ng-options指令將數(shù)組、對象等數(shù)據(jù)添加到<option>元素中

(1) 綁定簡單的數(shù)組數(shù)據(jù)

在控制器中添加數(shù)組數(shù)據(jù)

$scope.data = ['a', 'b', 'c', 'd'];

在select控件中，通過ng-options指令，采用...for...in...格式將數(shù)組數(shù)據(jù)與select控件綁定

<select ng-model="a" ng-options="text for txt in data">
  <option value="">--請選擇--</option>
</select>

<!doctype html>
<html ng-app="MyApp">
<head>  
  <meta charset="UTF-8">  
  <title>Document</title>
</head>
<body>
  <form ng-controller="MyController">  
    <select ng-model="a" ng-options="txt for txt in data"> 
      <option value="">--請選擇--</option>  
    </select>
  </form>
  <script src="./angular.min.js"></script>
  <script>  
  var myform = angular.module('MyApp', []); 
  myform.controller('MyController', ['$scope', function($scope){    
    $scope.data = ['A', 'B', 'C', 'D', 'E'];  
  }]);
  </script>
</body>
</html>

(2) 綁定簡單的對象數(shù)據(jù)

在控制器中添加對象數(shù)據(jù)

$scope.data = [
  {id: '1', name: 'A'},
  {id: '2', name: 'B'},
  {id: '3', name: 'C'},
  {id: '4', name: 'D'}
];

在控件中，采用...as...for...in...的格式將對象數(shù)據(jù)與select綁定

<select ng-model="a" ng-options="txt.id as txt.name for txt in data">
  <option value="">--請選擇--</option>
</select>

(3) 以分組的形式綁定對象數(shù)據(jù)

首先在控制器中添加對象數(shù)據(jù)

$scope.data = [
  {id: '1', name: 'A', key: '大寫'},
  {id: '2', name: 'B', key: '大寫'},
  {id: '3', name: 'C', key: '小寫'},
  {id: '4', name: 'D', key: '小寫'}
];

如果在上述數(shù)據(jù)中，以key為分組依據(jù)，則可以采用...as...group by...for...in...的格式

<select ng-model="a" ng-options="txt.id as txt.name group by txt.key for txt in data">
  <option value="">--請選擇--</option>
</select>

綜合示例：

<!doctype html>
<html ng-app="MyApp">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<form name="myform" ng-controller="MyController">  
  <div>
    學制: 
   <select ng-model="school" ng-options="s.id as s.name for s in schoolData" ng-change="schoolChange(school)"> 
     <option value="">--請選擇--</option>
    </select>
    <span>{{school_show}}</span>  
  </div>
  <div>
    班級:
   <select ng-model="class" ng-options="c.id as c.name group by c.grade for c in classData" ng-change="classChange(class)">
      <option value="">--請選擇--</option>
    </select>
    <span>{{class_show}}</span>
  </div>
</form>
<script src="./angular.min.js"></script>
<script>
  var myapp = angular.module('MyApp', []);  
  myapp.controller('MyController', ['$scope', function($scope){    
    $scope.schoolData = [      
      {id: '1001', name: '小學'}, 
      {id: '1002', name: '初中'},
      {id: '1003', name: '高中'}    
    ];
    $scope.classData = [
      {id: '1001', name: '(1)班', grade: '一年級'},
      {id: '1002', name: '(2)班', grade: '一年級'}, 
      {id: '2001', name: '(1)班', grade: '二年級'},
      {id: '2002', name: '(2)班', grade: '二年級'},
      {id: '3001', name: '(1)班', grade: '三年級'},
      {id: '3002', name: '(2)班', grade: '三年級'}
    ];
    $scope.school = '';
    $scope.class = '';
    $scope.schoolChange = function(e) {      
      $scope.school_show = '您選擇的是:' + e;
    }
    $scope.classChange = function(e) { 
     $scope.class_show = '您選擇的是:' + e; 
    }  
 }]);
</script>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 227,837評論 6贊 531
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,196評論 3贊 414
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 175,688評論 0贊 373
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,654評論 1贊 309
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,456評論 6贊 406
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 54,955評論 1贊 321
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,044評論 3贊 440
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,195評論 0贊 287
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
    沈念sama閱讀 48,725評論 1贊 333
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,608評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,802評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,318評論 5贊 358
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 44,048評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,422評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,673評論 1贊 281
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,424評論 3贊 390
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,762評論 2贊 372

推薦閱讀更多精彩內容

  • AngularJS是什么？AngularJs（后面就簡稱ng了）是一個用于設計動態(tài)web應用的結構框架。首先，它是...
    200813閱讀 1,624評論 0贊 3
  • angular:庫、框架！ 是一個mvc的框架！ 衍生出來好多其他名稱：mvp mvvm mv*... 現(xiàn)階段比較...
    His鵬閱讀 1,197評論 0贊 6
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應用程序數(shù)據(jù)。ng-model 指令也可以：...
    壬萬er閱讀 884評論 0贊 2
  • 坐了一天車，收拾完宿舍，繼續(xù)做筆記，本節(jié)的內容有AngularJS的http、select、表格、SQL、DOM、...
    Victor細節(jié)閱讀 312評論 0贊 0
  • 一上城樓萬里愁，蒹葭楊柳似肅洲。 溪云初起日沉閣，山雨欲來風滿樓。 鳥下綠蕪陌上夕，蟬鳴黃葉大漠秋。 行人莫問當年...
    行走在人間的一葉扁舟閱讀 179評論 1贊 1