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 相关文章推荐
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
使用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的中问验证码
2006/11/25 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
js实现车辆管理系统
2020/08/26 Javascript
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Django框架实现的分页demo示例
2019/05/25 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
应届大学生自荐书
2014/06/17 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
放弃继承权公证书
2015/01/23 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏