AngularJSブートストラップ
AngularJSの優先スタイルシートは、現在最も人気のあるフロントエンドフレームワークである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ディレクティブとBootstrapクラスを使用した完全な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"> userttrl "> <div> <h3> <th> name </th> <th> last </th> </tr> </thead> <tbody> <tr ng-repeat = "user in user in"> <td> <button ng-click = "edituser（user.id）"> </span> edit </button> </td> <td> {{user.fname} </td> </td> user.lName }}</td> </tr> </tbody></table><hr><button ng-click="editUser('new')"><span></span>Create a new user</button><hr><h3 ng-show="edit">Create a new user:</h3><h3 ng-hide="edit">Editor user:</h3><form> <div> <label> name：</label> <div> <input type = "text" ng-model = "fname" ng-disabled = "！edit" placeholder = "name"> </div> </div> <div> <ablead>件名：</label> <div> <input type = "text" ng-model = "lname" lnam = " </div> <div> <label>パスワード：</label> <div> <入力タイプ= "password" ng-model = "passw1" placeholder = "password"> </div> </div> <div> <aburent>繰り返しパスワード：</label> <div> <入力タイプ= "パスワード" ng-model = "passw2" passw2 "placeholder ="> </div> </< ng-disabled = "エラー||不完全"> <span> </span> modify </button> </div> <script src = "myusers.js"> </scrip> </body> </html>実行結果：
命令分析
| AngularJS指令 | 説明する |
|---|---|
| <html ng-app | <html>要素のアプリケーションを定義します（名前なし） |
| <body ng-controller | <body>要素のコントローラーを定義します |
| <tr ng-repeat | ユーザーオブジェクトの配列をループし、各ユーザーオブジェクトは<tr>要素に配置されます。 |
| <ボタンngクリック | <button>要素をクリックするときに、関数edituser（）を呼び出します |
| <h3 ng-show | 編集= trueの場合、<h3>要素を表示します |
| <h3 ng-hide | 編集= trueの場合、<h3>要素を隠します |
| <入力ng-model | アプリケーションのバインド<inupt>要素 |
| <ボタンng-disabled | エラーが発生した場合、またはncomplete = trueが<button>要素を無効にする場合 |
ブートストラップクラス分析
| 要素 | ブートストラップクラス | 意味 |
|---|---|---|
| <div> | 容器 | コンテンツコンテナ |
| <表> | テーブル | シート |
| <表> | テーブルストライプ | 縞模様の背景を持つテーブル |
| <ボタン> | btn | ボタン |
| <ボタン> | btn-success | 成功ボタン |
| <span> | グリフィコン | グリフアイコン |
| <span> | グリフィコンペンシル | 鉛筆アイコン |
| <span> | グリフィコンユーザー | ユーザーアイコン |
| <span> | グリフィコンゼーブ | アイコンを保存します |
| <form> | form-horizontal | レベルテーブル |
| <div> | フォームグループ | フォームグループ |
| <label> | コントロールラベル | コントローラータグ |
| <label> | Col-SM-2 | 2列にまたがる |
| <div> | COL-SM-10 | 10列にまたがる |
JavaScriptコード
myusers.js
angular.module（ 'myApp'、[]）。コントローラー（ 'userctrl'、function（$ scope）{$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = ''; $ scope.passw2 = '' '; $ scope.users = [{id：1、fname：fname： }、{id：2、fname： 'kim'、lname： "pim"}、{id：3、fname： 'sal'、lname： "smith"}、{id：4、fname： 'jack'、lname： "jones"}、{id：5、fname： 'john'、lname： 'lname： "doe"}、 " fname： "pan"}]; $ scope.error = false; $ scope.edituser = function（id）{if（id == 'new'） {$ scope.edit = false.fname = $ scope.users [id-1] .lname; {$ scope.test（）;}）; $ scope。$ watch（ 'fname'、function（）{$ scope.test（）;}）; $ scope。$ watch（ 'lname'、function（）{$ scope.test（）;}）; $ scope。 {$ scope.passw1！== scope.passw2）{$ scope.error; ！$ scope.passw2.length））{$ scope.incomplete = true;}）;JavaScriptコードの解析
| スコーププロパティ | 使用 |
|---|---|
| $ scope.fname | モデル変数（ユーザー名） |
| $ scope.lname | モデル変数（ユーザーの姓） |
| $ scope.passw1 | モデル変数（ユーザーパスワード1） |
| $ scope.passw2 | モデル変数（ユーザーパスワード2） |
| $ scope.users | モデル変数（ユーザーアレイ） |
| $ scope.edit | ユーザーがクリックしてユーザーを作成するときにtrueに設定します。 |
| $ scope.error | passw1が等しくない場合、passw2がtrueに設定されています |
| $ scope.incomplete | 各フィールドが空の場合（長さ= 0）がtrueに設定されています |
| $ scope.edituser | モデル変数を設定します |
| $ scope.watch | モデル変数を監視します |
| $ scope.test | モデル変数のエラーと整合性を確認します |
上記は、Angularjs Bootstrap情報の編集です。後で追加し続けます。 Angularjsのプログラムを支援できる学生を願っています。