AngularJs+bootstrap搭載前臺框架——基礎頁面
1.用AngularJs app種子初步搭載好框架之後就需要我們手動往裡面填充一些東西了，首先開啟我們的app資料夾下面的index.html,加入一些我們需要用的js和css（當然是bootstrap的），程式碼如下：
[html]view plaincopy
<scriptsrc="lib/angular/angular.min.js"></script>
<scriptsrc="lib/jquery/jquery-1.10.2.min.js"></script>
<scriptsrc="lib/bootstrap/bootstrap.min.js"
></script><scriptsrc="js/app.js"></script>
<scriptsrc="js/services.js"></script>
<scriptsrc="js/controllers.js"></script>
<scriptsrc="js/filters.js"></script>
<scriptsrc="js/directives.js"></script>
當然要記得我們這裡只是引入，還需要真正的加入這些js和css才行，具體放置位置你可以從上面的引入程式碼看出來，這裡就不貼圖了。
2.我們先做一個最簡單的登入註冊頁面，下面是index.html中body標籤中的程式碼：
[html]view plaincopy
<spanstyle="font-family:SimSun;font-size:14px;"><divclass="wrap">
<divclass="header">
<divclass="navbarnavbar-inversenavbar-swapper"
><divclass="navbar-inner">
<divclass="container">
<aclass="brand"href="#">JThink</a>
<ulclass="menunavpull-right">
<li><ahref="#/login">login</a></li>
<li><ahref="#/register">register</a></li>
</ul>
</div>
</div>
</div>
<divid="content"class="contentcontainer"ng-view></div>
</div>
</div>
<divclass="footer">
<divclass="container">
<p>
version1.0
</p>
</div>
</div></span>
3.不要忘了我們需要修改app.js中的路由規則，具體程式碼如下：
[javascript]view plaincopy
'usestrict';
//Declareapplevelmodulewhichdependsonfilters,andservices
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
[html]view plaincopy
<divid="login"ng-controller="login">
<formclass="form-horizontal">
<divclass="titlecontrol-group">
<labelclass="control-label"for="inputEmail">Login</label>
</div>
<divclass="control-group">
<labelclass="control-label"for="inputEmail">Email</label>
<divclass="controls">
<inputtype="text"id="inputEmail"placeholder="Email"ng-model="login.email">
</div>
</div>
<divclass="control-group">
<labelclass="control-label"for="inputPassword">Password</label>
<divclass="controls">
<inputtype="password"id="inputPassword"placeholder="Password"ng-model="login.password">
</div>
</div>
<divclass="control-group">
<divclass="controls">
<labelclass="checkbox">
<inputtype="checkbox">Rememberme
</label>
<buttontype="button"class="btnbtn-success"ng-click="login.submit()">Signin</button>
</div>
</div>
</form>
</div>
register.html
[html]view plaincopy
<divid="register">
<formclass="form-horizontal">
<divclass="titlecontrol-group">
<labelclass="control-label"for="inputEmail">Register</label>
</div>
<divclass="control-group">
<labelclass="control-label"for="inputEmail">Email</label>
<divclass="controls">
<inputtype="text"id="inputEmail"class="email"placeholder="Email">
</div>
</div>
<divclass="control-group">
<labelclass="control-label"for="inputPassword">Password</label>
<divclass="controls">
<inputtype="password"id="inputPassword"class="password"placeholder="Password">
</div>
</div>
<divclass="control-group">
<labelclass="control-label"for="inputConfirmPassword">ConfirmPassword</label>
<divclass="controls">
<inputtype="password"id="inputConfirmPassword"placeholder="ConfirmPassword">
</div>
</div>
<divclass="control-group">
<divclass="controls">
<buttontype="button"class="btnbtn-success">Register</button>
</div>
</div>
</form>
</div>
不可缺少的還有css檔案，當然這個是比較簡單的，因為大部分工作bootstrap已經做完了，在app.css中加入下列布局程式碼：
[css]view plaincopy
<spanstyle="font-family:SimSun;font-size:14px;">/*appcssstylesheet*/
html,body{
height:100%;
}
.wrap{
min-height:100%;
height:auto!important;
height:100%;
margin:0auto-80px;
}
.header{
height:100%;
min-height:100%;
height:auto!important;
}
.footer{
background-color:#333;
color:white;
height:80px;
}
.container.credit{
margin:10px0;
}
#login.titlelabel{
font-size:2em;
font-weight:bold;
}
#register.titlelabel{
font-size:2em;
font-weight:bold;
}</span>
這麼簡單的一些程式碼就可以佈局出一個比較像樣的前臺了，雖然簡單了那麼點，但是還是說得過去的：
這都要歸功於bootstrap的功勞啊，啟動的時候需要nodejs啟動，具體方法參照前一篇文章
5.好了，這就差不多實現了，挺簡單吧，自己試試吧，改改樣式啊啥的，bootstrap的學習去官方網站中學習吧，挺容易的，下一篇該開始寫我們的js了，差不多就是些controller和service了。
後記：這幾天實在是有點忙，所以忘記了更新，釋出這篇的時候距離上一篇已經有近2個星期了，以後我儘量抽出時間寫吧~~
轉載於:https://blog.51cto.com/rmlifejun/1743405