AngularJs bootstrap搭載前台架構——基礎頁面_AngularJS

1.用AngularJs app種子初步搭載好架構之後就需要我們手動往裡面填充一些東西了，首先開啟我們的app檔案夾下面的index.html,加入一些我們需要用的js和css（當然是bootstrap的），代碼如下：

<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 src="js/directives.js"></script> 

    當然要記得我們這裡只是引入，還需要真正的加入這些js和css才行，具體置放位置你可以從上面的引入代碼看出來，這裡就不貼圖了。

2.我們先做一個最簡單的登入註冊頁面，下面是index.html中body標籤中的代碼：

<span style="font-family:SimSun;font-size:14px;"><div class="wrap">  <div class="header">   <div class="navbar navbar-inverse navbar-swapper">   <div class="navbar-inner">    <div class="container">    <a class="brand" href="#">JThink</a>    <ul class="menu nav pull-right">     <li><a href="#/login">login</a></li>     <li><a href="#/register">register</a></li>    </ul>    </div>   </div>   </div>   <div id="content" class="content container" ng-view></div>  </div>  </div>   <div class="footer">  <div class="container">   <p>   version1.0   </p>  </div>  </div></span> 

3.不要忘了我們需要修改app.js中的路由規則，具體代碼如下：

'use strict';   // Declare app level module which depends on filters, and services angular.module('jthink', ['jthink.filters', 'jthink.services', 'jthink.directives']).  config(['$routeProvider', function($routeProvider) {  $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: MyCtrl2});  $routeProvider.when('/register', {templateUrl: 'partials/register.html', controller: MyCtrl2});  $routeProvider.otherwise({redirectTo: '/login'});  }]); 

4.定義好了這些規則之後我們當然不能缺少的是login.html和register.html，代碼如下：

    login.html

<div id="login" ng-controller="login">  <form class="form-horizontal">  <div class="title control-group">   <label class="control-label" for="inputEmail">Login</label>  </div>  <div class="control-group">   <label class="control-label" for="inputEmail">Email</label>   <div class="controls">   <input type="text" id="inputEmail" placeholder="Email" ng-model="login.email">   </div>  </div>  <div class="control-group">   <label class="control-label" for="inputPassword">Password</label>   <div class="controls">   <input type="password" id="inputPassword" placeholder="Password" ng-model="login.password">   </div>  </div>  <div class="control-group">   <div class="controls">   <label class="checkbox">    <input type="checkbox"> Remember me   </label>   <button type="button" class="btn btn-success" ng-click="login.submit()">Sign in</button>   </div>  </div>  </form> </div> 

    register.html

<div id="register">  <form class="form-horizontal">  <div class="title control-group">   <label class="control-label" for="inputEmail">Register</label>  </div>  <div class="control-group">   <label class="control-label" for="inputEmail">Email</label>   <div class="controls">   <input type="text" id="inputEmail" class="email" placeholder="Email">   </div>  </div>  <div class="control-group">   <label class="control-label" for="inputPassword">Password</label>   <div class="controls">   <input type="password" id="inputPassword" class="password" placeholder="Password">   </div>   </div>  <div class="control-group">   <label class="control-label" for="inputConfirmPassword">ConfirmPassword</label>   <div class="controls">   <input type="password" id="inputConfirmPassword" placeholder="Confirm Password">   </div>  </div>  <div class="control-group">   <div class="controls">   <button type="button" class="btn btn-success">Register</button>   </div>  </div>  </form> </div> 

    不可缺少的還有css檔案，當然這個是比較簡單的，因為大部分工作bootstrap已經做完了，在app.css中加入下列布局代碼：

<span style="font-family:SimSun;font-size:14px;">/* app css stylesheet */ html,body {  height: 100%; }  .wrap {  min-height: 100%;  height: auto !important;  height: 100%;  margin: 0 auto -80px; }  .header {  height: 100%;  min-height: 100%;  height: auto !important; }  .footer{  background-color: #333;  color: white;  height: 80px; }  .container .credit {  margin: 10px 0; }  #login .title label {  font-size: 2em;  font-weight: bold; }  #register .title label {  font-size: 2em;  font-weight: bold; }</span> 

    這麼簡單的一些代碼就可以布局出一個比較像樣的前台了，雖然簡單了那麼點，但是還是說得過去的：

    這都要歸功於bootstrap的功勞啊，啟動的時候需要nodejs啟動，具體方法參照前一篇文章

5.好了，這就差不多實現了，挺簡單吧，自己試試吧，改改樣式啊啥的，bootstrap的學習去官方網站中學習吧，挺容易的，下一篇該開始寫我們的js了，差不多就是些controller和service了。

後續繼續添加相關文章，謝謝大家對本站的支援！

              相關文章：

                                 AngularJs bootstrap搭載前台架構——js控制部分
                                 AngularJs bootstrap搭載前台架構——基礎頁面
                                 AngularJs bootstrap搭載前台架構——準備工作
                                 AngularJs bootstrap詳解及範例程式碼