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 相关文章推荐
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
JavaScript严格模式详解
Jan 16 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
微信小程序实现购物车小功能
Dec 30 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
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
ThinkPHP之getField详解
2014/06/20 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
Javascript实现字数统计
2015/07/03 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
大专自我鉴定范文
2013/10/23 职场文书
餐厅筹备计划书
2014/04/25 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2015年仓库工作总结
2015/04/09 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
python 爬取华为应用市场评论
2021/05/29 Python
Python列表的索引与切片
2022/04/07 Python
mysql查看表结构的三种方法总结
2022/07/07 MySQL