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 相关文章推荐
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
实例讲解vue源码架构
Jan 24 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 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 翻页 实例代码
2009/08/07 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
python实现保存网页到本地示例
2014/03/16 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
英国日常交易网站:Wowcher
2018/09/04 全球购物
个人简历自荐信
2013/12/05 职场文书
三八节主持词
2014/03/17 职场文书
家长建议怎么写
2014/05/15 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
医院合作协议书
2014/08/19 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
初中优秀学生评语
2014/12/29 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL