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


Posted in Javascript onSeptember 01, 2016

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>

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

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

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

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

后续继续添加相关文章,谢谢大家对本站的支持!

              相关文章:

                                 AngularJs bootstrap搭载前台框架——js控制部分
                                
AngularJs bootstrap搭载前台框架——基础页面
                                 
AngularJs bootstrap搭载前台框架——准备工作
                                
AngularJs bootstrap详解及示例代码

Javascript 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
react国际化react-intl的使用
May 06 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 #Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 #Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 #Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 #Javascript
javaScript如何跳出多重循环break、continue
Sep 01 #Javascript
AngularJs bootstrap详解及示例代码
Sep 01 #Javascript
JavaScript数据类型学习笔记分享
Sep 01 #Javascript
You might like
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
浅谈JS函数节流防抖
2017/10/18 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python协程的用法和例子详解
2017/09/09 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
廉洁校园实施方案
2014/05/25 职场文书
课例研修方案
2014/05/31 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
学习十八大的感悟
2015/08/11 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
服务器间如何实现文件共享
2022/05/20 Servers