AngularJSブートストラップ2024 年の最新の入門チュートリアル。このコースでは ブートストラップ,HTMLコード,コマンドの構文解析,アナリティックのブートストラップクラス,JavaScriptコード,myUsers.js,JavaScriptのコード解析, について学習できます。
AngularJSブートストラップ
AngularJS優先スタイルシートは、Twitterのブートストラップは、最も人気のあるフロントエンドのフレームワークであり、Twitterのブートストラップです。
ブートストラップチュートリアルを参照してください 。
ブートストラップ
:あなたはTwitterのブートストラップあなたのAngularJSのアプリケーションに参加することができ、あなたはあなたの<head>に以下のコード要素を追加することができます
<リンクのrel = "スタイルシート"のhref = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
国のサイトならば、Baiduの静的リポジトリのブートストラップ、次のコードを使用することをお勧めします。
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
以下は、AngularJSとブートストラップクラスの命令を使用して、完全なHTMLの例です。
HTMLコード
<!DOCTYPE HTML>
<HTML>
<リンクのrel = "スタイルシート"の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"> </スクリプト>
<ボディngのアプリ= "て、myApp " NG-コントローラ= "userCtrl">
<DIVクラス = "コンテナ">
<H3>ユーザー</ H3>
<Tableクラス= "テーブルには、卓上ストライプ">
<THEAD> <TR>
<Thの>編集</目>
<Thの>姓</目 >
<Thの>姓</目 >
</ TR> </ thead要素>
<TBODY> <TR-リピートngの 「ユーザーがユーザーを"=>
<TD>
<Buttonクラス= "btnの" NG +クリック= "editUser(user.id)">
<スパンクラス= "glyphicon glyphicon-鉛筆"> </ span>の&NBSP;&NBSP;編集
</ボタン>
</ TD>
<TD> {{user.fName}} </ TD>
<TD> {{user.lName}} </ TD>
</ TR> </ TBODY>
</表>
<HR>
<Buttonクラス= "btn- BTN成功」NGクリック=" editUser( '新') ">
<スパンクラス= "glyphicon glyphicon-ユーザー"> </ span>の新規作成ユーザー
</ボタン>
<HR>
<H3のNG-ショー= "編集 ">新しいユーザーを作成します。</ H3>
<H3 ngの非表示= "編集 ">ユーザーの編集:</ H3>
<Formクラス= "フォームの水平 ">
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">ファーストネーム:</ label>は
<DIVクラス= "COL-SM -10">
<input type = "text" NG -model = "fNameを「NG-無効="!編集"プレースホルダ="ファーストネーム">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">姓:</ label>は
<DIVクラス= "COL-SM -10">
<input type = "text" NG -model = "LNAME" NG-無効= "!編集"プレースホルダ= "姓">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">パスワード:</ label>は
<DIVクラス= "COL-SM -10">
<入力タイプ= "パスワード" NG -model = "passw1"プレースホルダ= "パスワード">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">繰り返し:</ label>は
<DIVクラス= "COL-SM -10">
<入力タイプ= "パスワード" NG -model = "passw2"プレースホルダ= "繰り返しパスワード">
</ DIV>
</ DIV>
</フォーム>
<HR>
<Buttonクラスは、= "btn- BTN成功」NG-無効="エラー||不完全">
<スパンクラス= "glyphicon glyphicon- </ span>の変更を保存保存します">
</ボタン>
</ DIV>
<スクリプトSRC = "myUsers.js"> </スクリプト>
</ BODY>
</ HTML>
»をお試しください
コマンドの構文解析
AngularJSディレクティブ | 説明 |
---|
<HTML ngのアプリ | <HTML>要素は、(名前の)アプリケーションを定義するために |
<ボディNG-コントローラ | <body>要素は、コントローラを定義するために |
<Trのngのリピート | サイクルユーザーオブジェクトの配列、<TR>要素内の各ユーザーオブジェクト。 |
<ボタンNGクリック | 関数はeditUserをクリックし、<ボタン>要素()が呼び出されるとき |
<H3のNG-ショー | あなたは= trueを表示<H3>要素を編集する場合 |
<H3のngの非表示 | あなたは=真の隠された<H3>要素を編集する場合 |
<入力ngのモデル | アプリケーションのための<input>要素を結合 |
<ボタンngの禁止 | エラーが発生した場合、またはncomplete = trueを無効にする<ボタン>要素 |
アナリティックのブートストラップクラス
要素 | ブートストラップクラス | 定義 |
---|
<DIV> | コンテナ | 容器の内容物 |
<表> | テーブル | テーブル |
<表> | テーブルストライプ | 表のストライプの背景 |
<ボタン> | BTN | プッシュボタン |
<ボタン> | BTN-成功 | サクセス・ボタン |
<スパン> | glyphicon | シェブロン |
<スパン> | glyphicon鉛筆 | 鉛筆アイコン |
<スパン> | glyphiconユーザー | ユーザーアイコン |
<スパン> | glyphicon保存 | [保存]アイコン |
<フォーム> | フォームの水平 | 水平台 |
<DIV> | フォーム・グループ | フォームグループ |
<ラベル> | コントロールラベル | コントローラタグ |
<ラベル> | COL-SM-2 | 2オーバー |
<DIV> | COL-SM-10 | 10以上 |
JavaScriptコード
myUsers.js
angular.module( 'て、myApp'、[] )。コントローラ( 'userCtrl'、関数($スコープ){
$ scope.fName = '';
$ scope.lName = '';
$ scope.passw1 = '';
$ scope.passw2 = '';
$ Scope.users = [
{ID:1、fNameを: ' HEGE'、LNAME:「Pege "}、
{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 =関数(ID){
場合(ID == '新') {
$の scope.edit =はtrue。
$ scope.incomplete =はtrue。
$ scope.fName = '';
$ scope.lName = '';
}エルス{
$の scope.edit = falseは、
$ Scope.fName = $ scope.users [ID-1] .fName。
$ Scope.lName = $ scope.users [ID-1] .lName。
}
};
。$スコープ$ウォッチ( 'passw1 '、関数(){$ scope.test();});
。$スコープ$ウォッチ( 'passw2 '、関数(){$ scope.test();});
。$スコープ$ウォッチ( 'fNameを '、関数(){$ scope.test();});
。$スコープ$ウォッチ( 'LNAME '、関数(){$ scope.test();});
$ scope.test =関数(){
($ scope.passw1!== $のscope.passw2場合 ){
$の scope.error =はtrue。
}エルス{
$の scope.error = falseは、
}
$ scope.incomplete = falseは、
($のscope.edit &&(!$場合 scope.fName.length ||
!$ Scope.lName.length ||
!$ Scope.passw1.length ||!$ 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 | 検証エラー、およびモデル変数の完全性 |