AngularJS 引導程式


AngularJS 的首選樣式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受歡迎的前端框架。

查看 Bootstrap教學。

Bootstrap

你可以加入你的AngularJS 應用程式中Twitter Bootstrap，你可以在你的<head>元素中加入如下程式碼:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

如果網站在國內，建議使用百度靜態資源庫的Bootstrap，程式碼如下：

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css /bootstrap.min.css">

以下是一個完整的HTML 實例, 使用了AngularJS 指令和Bootstrap 類別。


HTML 程式碼

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">
  <thead>
    <tr>
      <th>编辑</th>
      <th>名</th>
      <th>姓</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>
        <button class="btn" ng-click="editUser(user.id)">
          <span class="glyphicon glyphicon-pencil"></span>编辑
        </button>
      </td>
      <td>{{ user.fName }}</td>
      <td>{{ user.lName }}</td>
    </tr>
  </tbody>
</table>

<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">名:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">姓:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="密码">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">重复密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="重复密码">
    </div>
  </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>修改
</button>

</div>

<script src="myUsers.js"></script>

</body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例


指令解析

##為<body> 元素定義一個控制器<tr ng-repeat#循環users 物件數組，每個user 物件放在<tr> 元素中。 <button ng-click當點擊<button> 元素時呼叫函數editUser()< ;h3 ng-show如果edit = true 顯示<h3> 元素<h3 ng-hide#如果edit = true 隱藏<h3> 元素<input ng-model為應用程式綁定<input> 元素
AngularJS 指令描述
<html ng-app為<html> 元素定義一個應用(未命名)
<body ng-controller
##################################################################################。 #<button ng-disabled######如果發生錯誤或ncomplete = true 停用<button> 元素############

Bootstrap 類別解析

#<div><table>##table#表格<table>table-striped有條紋背景的表格<button>btn##<button>btn-success成功按鈕<span>glyphicon字形圖示<span> glyphicon-pencil鉛筆圖示#<span>glyphicon-user#使用者圖標<span>glyphicon-save儲存圖示<form>form-horizo​​ntal水平表格#<div>form-group
#元素Bootstrap 類別
container內容容器
###表單組# ###########<label>######control-label######控制器標籤###########<label># #####col-sm-2######跨越2 列#############<div>######col-sm-10#### ##跨越10 列############
##JavaScript程式碼

#myUsers.js

angular.module(
'myApp', []).controller('userCtrl',   function($scope) {$scope.fName =
'';$scope.lName =
'';$scope.passw1 =
'';$scope.密碼2 =
'';# $scope.users = [
{id:
1, fName:'Hege', lName:"Pege" },{id :
2, fName:'Kim',  lName:"Pim" },{id:
3, fName: 'Sal',  lName:"Smith" },{id:
4, fName:'Jack', lName :"瓊斯" },{id:
5, fName:'John', lName:"Doe" } ,{id:
6, fName:'Peter',lName:"Pan" }];
$範圍。編輯=
true;$scope.error =
false;$scope.incomplete =
false;
$scope.editUser =
function(id) { 
if (id == 'new') {    $scope.edit =
true;    $scope.incomplete =
true;    $scope.fName =
'';    $scope.lName =
'';    }
else {    $scope.edit =
false;    $scope.fName = $scope.users[id-1].fName;
    $scope.lName = $scope.users[id-1].lName;
  }
};

$scope.$watch(
'passw1',function() {$scope.test();});$scope.$watch(
'passw2',function() {$scope.test();}); $scope.$watch(
'fName', function() {$scope.test();});$scope.$watch(
'lName', function() {$scope.test();});
$scope.test =
function() {  if ($scope.passw1 !== $scope.passw2) {
    $scope.error = true;
    } else {
    $scope.error = false;
  }
  $scope.incomplete = false;
  if ($scope.edit && (!$scope.fName.length ||
  !$scope.lName.length ||
  !$scope.passw1.length || !$scope.passw2.length)) {
     $scope.incomplete = true;
  }
};

# });

JavaScript 程式碼解析

#Scope 屬性#使用
$scope.fName模型變數(使用者名稱)
#$scope.lName模型變數(使用者姓)
$scope.passw1模型變數(使用者密碼1)
$scope.passw2#模型變數(使用者密碼2)
$scope.users模型變數(使用者的陣列)
$scope.edit當使用者點擊建立使用者時設定為true。
$scope.error如果passw1 不等於passw2 設定為true
$scope.incomplete如果每個欄位都為空(length = 0)設為true
$scope.editUser設定模型變數
############################ ####$scope.watch######監控模型變數############$scope.test######驗證模型變數的錯誤和完整性### ############