AngularJs+bootstrap搭载前台框架——基础页面

1.用AngularJs app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了，首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css（当然是bootstrap的），代码如下：

[html] view plain copy

1. <script src="lib/angular/angular.min.js"></script>  

2. <script src="lib/jquery/jquery-1.10.2.min.js"></script>  

3. <script src="lib/bootstrap/bootstrap.min.js"></script>  

4. <script src="js/app.js"></script>  

5. <script src="js/services.js"></script>  

6. <script src="js/controllers.js"></script>  

7. <script src="js/filters.js"></script>  

8. <script src="js/directives.js"></script>  

    当然要记得我们这里只是引入，还需要真正的加入这些js和css才行，具体放置位置你可以从上面的引入代码看出来，这里就不贴图了。

2.我们先做一个最简单的登录注册页面，下面是index.html中body标签中的代码：

[html] view plain copy

1. <span style="font-family:SimSun;font-size:14px;"><div class="wrap">  

2.     <div class="header">  

3.       <div class="navbar navbar-inverse navbar-swapper">  

4.         <div class="navbar-inner">  

5.           <div class="container">  

6.             <a class="brand" href="#">JThink</a>  

7.             <ul class="menu nav pull-right">  

8.               <li><a href="#/login">login</a></li>  

9.               <li><a href="#/register">register</a></li>  

10.             </ul>  

11.           </div>  

12.         </div>  

13.       </div>  

14.       <div id="content" class="content container" ng-view></div>  

15.     </div>  

16.   </div>  

17.   

18.   <div class="footer">  

19.     <div class="container">  

20.       <p>  

21.         version1.0  

22.       </p>  

23.     </div>  

24.   </div></span>  

3.不要忘了我们需要修改app.js中的路由规则，具体代码如下：

[javascript] view plain copy

1. 'use strict';  

2.   

3.   

4. // Declare app level module which depends on filters, and services  

5. angular.module('jthink', ['jthink.filters', 'jthink.services', 'jthink.directives']).  

6.   config(['$routeProvider', function($routeProvider) {  

7.     $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: MyCtrl2});  

8.     $routeProvider.when('/register', {templateUrl: 'partials/register.html', controller: MyCtrl2});  

9.     $routeProvider.otherwise({redirectTo: '/login'});  

10.   }]);  

4.定义好了这些规则之后我们当然不能缺少的是login.html和register.html，代码如下：

    login.html

[html] view plain copy

1. <div id="login" ng-controller="login">  

2.   <form class="form-horizontal">  

3.     <div class="title control-group">  

4.       <label class="control-label" for="inputEmail">Login</label>  

5.     </div>  

6.     <div class="control-group">  

7.       <label class="control-label" for="inputEmail">Email</label>  

8.       <div class="controls">  

9.         <input type="text" id="inputEmail" placeholder="Email" ng-model="login.email">  

10.       </div>  

11.     </div>  

12.     <div class="control-group">  

13.       <label class="control-label" for="inputPassword">Password</label>  

14.       <div class="controls">  

15.         <input type="password" id="inputPassword" placeholder="Password" ng-model="login.password">  

16.       </div>  

17.     </div>  

18.     <div class="control-group">  

19.       <div class="controls">  

20.         <label class="checkbox">  

21.           <input type="checkbox"> Remember me  

22.         </label>  

23.         <button type="button" class="btn btn-success" ng-click="login.submit()">Sign in</button>  

24.       </div>  

25.     </div>  

26.   </form>  

27. </div>  

    register.html

[html] view plain copy

1. <div id="register">  

2.   <form class="form-horizontal">  

3.     <div class="title control-group">  

4.       <label class="control-label" for="inputEmail">Register</label>  

5.     </div>  

6.     <div class="control-group">  

7.       <label class="control-label" for="inputEmail">Email</label>  

8.       <div class="controls">  

9.         <input type="text" id="inputEmail" class="email" placeholder="Email">  

10.       </div>  

11.     </div>  

12.     <div class="control-group">  

13.       <label class="control-label" for="inputPassword">Password</label>  

14.       <div class="controls">  

15.         <input type="password" id="inputPassword" class="password" placeholder="Password">  

16.       </div>  

17.       </div>  

18.     <div class="control-group">  

19.       <label class="control-label" for="inputConfirmPassword">ConfirmPassword</label>  

20.       <div class="controls">  

21.         <input type="password" id="inputConfirmPassword" placeholder="Confirm Password">  

22.       </div>  

23.     </div>  

24.     <div class="control-group">  

25.       <div class="controls">  

26.         <button type="button" class="btn btn-success">Register</button>  

27.       </div>  

28.     </div>  

29.   </form>  

30. </div>  

    不可缺少的还有css文件，当然这个是比较简单的，因为大部分工作bootstrap已经做完了，在app.css中加入下列布局代码：

[css] view plain copy

1. <span style="font-family:SimSun;font-size:14px;">/* app css stylesheet */  

2. html,body {  

3.   height: 100%;  

4. }  

5.   

6. .wrap {  

7.   min-height: 100%;  

8.   height: auto !important;  

9.   height: 100%;  

10.   margin: 0 auto -80px;  

11. }  

12.   

13. .header {  

14.   height: 100%;  

15.   min-height: 100%;  

16.   height: auto !important;  

17. }  

18.   

19. .footer{  

20.   background-color: #333;  

21.   color: white;  

22.   height: 80px;  

23. }  

24.   

25. .container .credit {  

26.   margin: 10px 0;  

27. }  

28.   

29. #login .title label {  

30.   font-size: 2em;  

31.   font-weight: bold;  

32. }  

33.   

34. #register .title label {  

35.   font-size: 2em;  

36.   font-weight: bold;  

37. }</span>  

    这么简单的一些代码就可以布局出一个比较像样的前台了，虽然简单了那么点，但是还是说得过去的：

    这都要归功于bootstrap的功劳啊，启动的时候需要nodejs启动，具体方法参照前一篇文章

5.好了，这就差不多实现了，挺简单吧，自己试试吧，改改样式啊啥的，bootstrap的学习去官方网站中学习吧，挺容易的，下一篇该开始写我们的js了，差不多就是些controller和service了。

后记：这几天实在是有点忙，所以忘记了更新，发布这篇的时候距离上一篇已经有近2个星期了，以后我尽量抽出时间写吧~~