AngularJS ブートストラップ
AngularJS で推奨されるスタイル シートは Twitter Bootstrap です。Twitter Bootstrap は現在最も人気のあるフロントエンド フレームワークです。
ブートストラップ チュートリアルを確認してください。
Bootstrap
Twitter Bootstrap を AngularJS アプリケーションに追加できます。次のコードを <head> 要素に追加できます:
<link rel="stylesheet" href="//maxcdn .bootstrapcdn. com/bootstrap/3.3.4/css/bootstrap.min.css">
サイトが中国にある場合は、Baidu 静的リソース ライブラリの Bootstrap を使用することをお勧めします。コードは次のとおりです:
< ;link rel=" stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
以下は、AngularJS ディレクティブを使用した完全な HTML の例です。そしてブートストラップクラス。
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>サンプルを実行する»
オンラインサンプルを表示するには、「サンプルを実行」ボタンをクリックしてください
命令分析
| AngularJS ディレクティブ | 説明 |
|---|---|
| <html ng-app | は、<html>要素のアプリケーション(名前なし)を定義します |
| <body ng-controller | は、<body>要素のコントローラを定義します |
| <tr ng-repeat | は、ユーザー オブジェクト配列をループし、各ユーザー オブジェクトは <tr> 要素に配置されます。 |
| <button ng-click | <button> 要素がクリックされると関数 editUser() が呼び出されます |
| <h3 ng-show | edit = true の場合、<h3> が表示されます。 element |
| <h3 ng-hide | edit = true の場合に <h3> 要素を非表示にする |
| <input ng-model | アプリケーションの <input> 要素をバインドする |
| <button ng-disabled | エラーが発生した場合、または ncomplete = true の場合、<button> 要素を無効にします |
ブートストラップクラス分析
<ボタン>b tn-success成功ボタン<スパン>グリフィコングリフアイコン<スパン>グリフィコン鉛筆鉛筆アイコン<スパン> グリフィコンユーザーユーザーアイコン<span>glyphicon-savesave-icon<form>form-horizontalhorizontal form<div> フォーム - グループフォーム グループ<label><label>< div>JavaScript代
myUsers.js
angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'ヘゲ', lName:"ペゲ" },
{id:2, fName:'キム', lName: 「ピム」 },
{id:3, fName:「サル」, lName:「スミス」 },
{id:4, fName:「ジャック」, lName: "ジョーンズ" },
{id:5, fName:'ジョン', lName:"ドウ" },
{id:6, fName:'ピーター',lName: 「パン」 }
];
$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;
}
};
});
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'ヘゲ', lName:"ペゲ" },
{id:2, fName:'キム', lName: 「ピム」 },
{id:3, fName:「サル」, lName:「スミス」 },
{id:4, fName:「ジャック」, lName: "ジョーンズ" },
{id:5, fName:'ジョン', lName:"ドウ" },
{id:6, fName:'ピーター',lName: 「パン」 }
];
$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;
}
};
});
JavaScriptコード分析
| 要素 | ブートストラップクラス | 定義 |
|---|---|---|
| <div> | コンテナ | コンテンツコンテナ |
| <テーブル> | テーブル | テーブル |
| <テーブル> | テーブルストライプ | ストライプの背景付きテーブル |
| <ボタン> | btn | ボタン |
| control-label | controller-label | |
| col-sm-2 | 2列にわたる | |
| col- sm -10 | 10 列全体 |
