AngularJS Bootstrap

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

檢視 Bootstrap教程。

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

如果站點在國内，建議使用百度靜态資源庫的Bootstrap，代碼如下：

以下是一個完整的 HTML 執行個體, 使用了 AngularJS 指令和 Bootstrap 類。

<!DOCTYPE html>

<html>

href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

<body

ng-app="myApp" ng-controller="userCtrl">

<h3>Users</h3>

<table

class="table table-striped">

<th>First

Name</th>

</tr></thead>

<tbody><tr

ng-repeat="user in users">

<td>

<span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit

</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> Create New User

<h3 ng-show="edit">Create New User:</h3>

<h3 ng-hide="edit">Edit

User:</h3>

<label class="col-sm-2 control-label">First Name:</label>

<div

class="col-sm-10">

<input type="text" ng-model="fName" ng-disabled="!edit"

placeholder="First Name">

</div>

<input type="text" ng-model="lName" ng-disabled="!edit"

placeholder="Last Name">

<label class="col-sm-2 control-label">Password:</label>

<input type="password" ng-model="passw1"

placeholder="Password">

<label class="col-sm-2 control-label">Repeat:</label>

<input type="password" ng-model="passw2"

placeholder="Repeat Password">

</form>

<span class="glyphicon glyphicon-save"></span> Save

Changes

</body>

</html>

AngularJS 指令

描述

<html ng-app

為 <html> 元素定義一個應用(未命名)

<body ng-controller

為 <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> 元素

<button ng-disabled

如果發生錯誤或者 incomplete = true 禁用 <button> 元素

元素

Bootstrap 類

定義

<div>

container

内容容器

<table>

table

表格

table-striped

帶條紋背景的表格

btn

按鈕

btn-success

成功按鈕

<span>

glyphicon

字形圖示

glyphicon-pencil

鉛筆圖示

glyphicon-user

使用者圖示

glyphicon-save

儲存圖示

<form>

form-horizontal

水準表格

form-group

表單組

<label>

control-label

控制器标簽

col-sm-2

跨越 2 列

col-sm-10

跨越 10 列

angular.module('myApp', []).controller('userCtrl',

function($scope) {

$scope.fName

= '';

$scope.lName = '';

$scope.passw1 = '';

$scope.passw2 = '';

$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:"Jones" },

{id:5, fName:'John', lName:"Doe"

{id:6, fName:'Peter',lName:"Pan" }

];

$scope.edit = 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.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() {

($scope.passw1 !== $scope.passw2) {

$scope.error =

true;

false;

$scope.incomplete = false;

if ($scope.edit

&& (!$scope.fName.length ||

!$scope.lName.length ||

!$scope.passw1.length || !$scope.passw2.length)) {

$scope.incomplete = true;

});

Scope 屬性

用途

模型變量 (使用者名)

$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

驗證模型變量的錯誤和完整性