AngularJS Bootstrap
AngularJS 的首選樣式表是 Bootstrap。css
能夠在 AngularJS 應用中加入 Twitter Bootstrap，你能夠在你的 <head>元素中添加以下代碼:html
<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">
實例：bootstrap
HTML代碼：數組
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://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>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<h3>Users</h3>
<table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</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> 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
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
<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>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Repeat:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div>
<script src = "myUsers.js"></script>
</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 | 若是發生錯誤或者 ncomplete = true 禁用 <button> 元素 |
bootstrap類解析：app
| 元素 | Bootstrap 類 | 定義 |
|---|---|---|
| <div> | container | 內容容器 |
| <table> | table | 表格 |
| <table> | table-striped | 帶條紋背景的表格 |
| <button> | btn | 按鈕 |
| <button> | btn-success | 成功按鈕 |
| <span> | glyphicon | 字形圖標 |
| <span> | glyphicon-pencil | 鉛筆圖標 |
| <span> | glyphicon-user | 用戶圖標 |
| <span> | glyphicon-save | 保存圖標 |
| <form> | form-horizontal | 水平表格 |
| <div> | form-group | 表單組 |
| <label> | control-label | 控制器標籤 |
| <label> | col-sm-2 | 跨越 2 列 |
| <div> | col-sm-10 | 跨越 10 列 |
JS代碼：框架
AngularJS 教程
AngularJS 教程
AngularJS 簡介
AngularJS 表達式
AngularJS 指令
AngularJS 模型
AngularJS Scope(做用域)
AngularJS 控制器
AngularJS 過濾器
AngularJS Service
AngularJS Http
AngularJS Select
AngularJS 表格
AngularJS SQL
AngularJS HTML DOM
AngularJS 事件
AngularJS 模塊
AngularJS 表單
AngularJS 輸入驗證
AngularJS API
AngularJS Bootstrap
AngularJS 包含
AngularJS 動畫
AngularJS 依賴注入
AngularJS 路由
AngularJS 應用
AngularJS 實例
AngularJS 實例
AngularJS 參考手冊
AngularJS 參考手冊
← AngularJS API
AngularJS 包含 →
AngularJS Bootstrap
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>
<link rel="stylesheet" href="http://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>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<h3>Users</h3>
<table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</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> 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
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
<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>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Repeat:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div>
<script src = "myUsers.js"></script>
</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 若是發生錯誤或者 ncomplete = true 禁用 <button> 元素
Bootstrap 類解析
元素 Bootstrap 類 定義
<div> container 內容容器
<table> table 表格
<table> table-striped 帶條紋背景的表格
<button> btn 按鈕
<button> btn-success 成功按鈕
<span> glyphicon 字形圖標
<span> glyphicon-pencil 鉛筆圖標
<span> glyphicon-user 用戶圖標
<span> glyphicon-save 保存圖標
<form> form-horizontal 水平表格
<div> form-group 表單組
<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.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.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;
}
};
});
JS代碼解析：ide
| 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 | 驗證模型變量的錯誤和完整性 |
相關文章
- 1. AngularJs + Bootstrap
- 2. Bootstrap 、AngularJs
- 3. Salesforce + AngularJS + Bootstrap
- 4. Laravel+AngularJS+BootStrap
- 5. AngularJS -- Bootstrap(啓動器)
- 6. Play1+angularjs+bootstrap ++ (idea + livereload)
- 7. AngularJS 學習筆記---Bootstrap
- 8. bootstrap-select插件angularjs爬坑
- 9. bootstrap+jq+underscore+ionic+react+angularjs
- 10. AngularJs學習筆記--bootstrap
- 更多相關文章...
- • Lua 數據庫訪問 - Lua 教程
- • ionic 教程 - ionic 教程
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. AngularJs + Bootstrap
- 2. Bootstrap 、AngularJs
- 3. Salesforce + AngularJS + Bootstrap
- 4. Laravel+AngularJS+BootStrap
- 5. AngularJS -- Bootstrap(啓動器)
- 6. Play1+angularjs+bootstrap ++ (idea + livereload)
- 7. AngularJS 學習筆記---Bootstrap
- 8. bootstrap-select插件angularjs爬坑
- 9. bootstrap+jq+underscore+ionic+react+angularjs
- 10. AngularJs學習筆記--bootstrap