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

摘要：1.用AngularJsapp种子初步搭载好框架之后就需要我们手动往里面填充一些东西了，首先打开我们的app文件夹下面的index.html...

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

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

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

<span><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，代码如下：

<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>

<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>/* 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详解及示例代码