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> <div> <div> <div> <div> <a href="#">JThink</a> <ul> <li><a href="#/login">login</a></li> <li><a href="#/register">register</a></li> </ul> </div> </div> </div> <div id="content" ng-view></div> </div> </div> <div> <div> <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> <div> <label for="inputEmail">Login</label> </div> <div> <label for="inputEmail">Email</label> <div> <input type="text" id="inputEmail" placeholder="Email" ng-model="login.email"> </div> </div> <div> <label for="inputPassword">Password</label> <div> <input type="password" id="inputPassword" placeholder="Password" ng-model="login.password"> </div> </div> <div> <div> <label> <input type="checkbox"> Remember me </label> <button type="button" ng-click="login.submit()">Sign in</button> </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="inputConfirmPassword">ConfirmPassword</label> <div> <input type="password" id="inputConfirmPassword" placeholder="Confirm Password"> </div> </div> <div> <div> <button type="button">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詳解及示例代碼