1. AngularJS App Seedを使用して最初にフレームワークをインストールした後、手動でいくつかのものを入力する必要があります。まず、アプリフォルダーの下にindex.htmlを開き、使用する必要があるJSとCSSを追加します（もちろんブートストラップです）。コードは次のとおりです。
<script src="lib/angular/angular.min.js"></script> <script src="lib/jquery/jquery-1.10.2.min.js"></script> <script src="lib/bootstrap/bootstrap.min.js"></script> <script src="js/app.js"></script> <script src = "js/services.js"> </script> <script src = "js/controllers.js"> </script> <script src = "js/filters.js"> </script> <script> <scrits src = "js/filters.js"> </script> <script src = "JS src = "js/filters.js"> </script> src = "js/directives.js"> </script>
もちろん、ここで紹介しているだけであり、これらのJSとCSSを実際に追加する必要があることを忘れないでください。上記の紹介コードから特定の配置を確認できるため、ここにはマップはありません。
2。まず、最も簡単なログイン登録ページを作成しましょう。以下は、index.htmlのボディタグのコードです。
<span style = "font-family：simsun; font-size：14px;"> <div> <div> <div> <div> <div> <div> <a href = "＃"> jthink </a> <ul> <li> <a href = "＃/login"> login </a> </div> </div> </div> </div> <div id = "content" ng-view> </div> </div> </div> </div> <div> <p> version1.0 </p> </div> </div> </div> </div> <div> <p> version1.0 </p> </div> </div> </div> </div> </div> <div> <p> version1.0 </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> <p> version1.0 </p>
3. app.jsのルーティングルールを変更する必要があることを忘れないでください。特定のコードは次のとおりです。
「Strictを使用」; //フィルター、およびサービスangular.module（ 'jthink'、['jthink.filters'、 'jthink.services'、 'jthink.directives']）に依存するアプリレベルモジュールを宣言します。 config（['$ routeprovider'、function（$ routeprovider）{$ routeprovider.when（ '/login'、{templateurl： 'partials/login.html'、controller：myctrl2}）; $ routeprovider.when（ '/登録者'、{templateurr： myctrl2}）;4。これらのルールを定義した後、もちろんlogin.htmlとregister.htmlを欠くことはできません。コードは次のとおりです。
login.html
<div id = "login" ng-controller = "login"> <form> <div> <label for = "inputemail"> login </label> </div> <div> <label for = "inputemail"> email </label> <div> for = "inputPassWord">パスワード</label> <div> <input型= "password" id = "inputpassword" placeholder = "placeholder =" ng-model = "login.password"> </div> </div> <div> <div> </div> </div> </form> </div>
Register.html
<div id="register"> <form> <div> <label for="inputEmail">Register</label> </div> <div> <label for="inputEmail">Email</label> <div> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div> <label for="inputPassword">Password</label> <div> <input type="password" id = "inputPassWord" PlaceHolder = "Password"> </div> </div> <div> <label for = "inputPassWord">パスワード</label> <div> <入力タイプ= "パスワード" ID = "Idpuspassword" Placeholder = "Password"> </div> </div> <div> <label for = "inputconfirmPassword" id = "inputConfirmPassWord" PlaceHolder = "Prident Password"> </div> </div> <div> <div> <button type = "button">登録</button> </div> </form> </div>
不可欠なものはCSSファイルでもあります。もちろん、これは比較的簡単です。ほとんどのワークブートストラップが完了しているため、次のレイアウトコードをapp.cssに追加します。
<span style = "font-family：simsun; font-size：14px;">/ * app css styleSheet */ html、body {height：100％; } .wrap {min-height：100％;高さ：自動！重要。高さ：100％;マージン：0 Auto -80px; } .header {height：100％; MIN-HEIGHT：100％;高さ：自動！重要。 } .footer {background-color：＃333;色：白;高さ：80px; } .container .credit {マージン：10px 0; } #login .titleラベル{font-size：2em; font-weight：bold; } #register .titleラベル{font-size：2em; font-weight：bold; } </span>このような単純なコードは、比較的まともなフロントデスクを作成できます。それは少し簡単ですが、それでも合理的です：
これはすべてブートストラップのおかげです。 NodeJSは、開始時に開始する必要があります。特定の方法については、前の記事を参照してください。
5。さて、これはほぼ実装されています。とても簡単です。自分で試してみてください。スタイルやその他のものを変えます。 Bootstrapの学習は、公式ウェブサイトから簡単に学ぶことができます。とても簡単です。次の記事でJSを書き始める時です。ほとんどコントローラーとサービスです。
今後も関連する記事を追加し続けます。このサイトへのご支援ありがとうございます！
関連記事：
Angularjs Bootstrapにはフロントエンドフレームワークが装備されています-JSコントロールパーツ
AngularJS Bootstrapにはフロントエンドフレームワークが装備されています-BASICページ
フロントエンドフレームワークを備えたAngularJSブートストラップ - 準備作業
Angularjs Bootstrap詳細な説明とサンプルコード