AngularJs+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>
这么简单的一些代码就可以布局出一个比较像样的前台了,虽然简单了那么点,但是还是说得过去的:
这都要归功于bootstrap的功劳啊,启动的时候需要nodejs启动,具体方法参照前一篇文章
5.好了,这就差不多实现了,挺简单吧,自己试试吧,改改样式啊啥的,bootstrap的学习去官方网站中学习吧,挺容易的,下一篇该开始写我们的js了,差不多就是些controller和service了。
后记:这几天实在是有点忙,所以忘记了更新,发布这篇的时候距离上一篇已经有近2个星期了,以后我尽量抽出时间写吧~~
AngularJs+bootstrap搭载前台框架——基础页面相关推荐
- AngularJs+bootstrap搭载前台框架——准备工作
1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包 ...
- bootstrap框架基础使用
bootstrap框架基础使用 bootstrap简介 bootstrap引入和使用 网络引用 本地引用 bootstrap基础 bootstrap组成 bootstrap组件 bootstrap简介 ...
- 开发无框架单页面应用 — 老码农的祖传秘方
什么是单页面应用(SPA)? 维基百科上的描述是这样的: JavaScript 1 2 3 "A single-page application (SPA), is a web applic ...
- python前端学习-------Flask框架基础(建议收藏)
Flask框架基础 下载并安装Flask框架 Flask基础 第一个Flask应用 开启调试模式 路由 变量规则 构造URL HTTP方法 模板 语法格式 模板变量 控制结构 条件控制语句 `if` ...
- java ibatis 获取执行的sql_小程序官宣+JAVA 三大框架基础面试题
每天给你诚意满满的干货 虽然每天都会写代码,但编程语言里有太多知识点,许多知识长时间不用就会忘记,在我们要去参加面试或是其它一些场景下,需要做些题来查缺补漏.我在搜索过程中发现没有太好的刷题小程序,所 ...
- Django框架基础知识汇总(有项目版)
Web框架本质## web系统概念 1. Http,无状态,短连接 2. 浏览器(socket客户端).网站(socket服务端) web框架本质 import socket def handle_r ...
- Aurora框架基础开发总结
Aurora框架基础开发 通过本文将学习到 bm是什么 bm文件创建 screen文件是什么 创建screen文件 bm中的各种组件介绍 screen文件的各种组件介绍 1.前言 时间过的真快,这句话 ...
- python学习框架图-Python学习---Python的框架基础学习
框架基础 框架实质: 所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端 B/S结构的响应: import socket def handle_requ ...
- data spring 指定时区_Spring 框架基础(05):Mvc架构模式,执行流程详解
本文源码:GitHub || GitEE 一.SpringMvc框架简介 1.Mvc设计理念 MVC是一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集到一个组件里面, ...
最新文章
- java页面弹出窗口输出语句_jsp %%程序段里的catch语句里怎么弹出提示框?
- 超级计算机的生产流程,精密陶瓷的生产流程分为几个步骤(图)
- 将图片序列压缩成视频
- DotNet_Performance_Tuning_ANTS_Performance_Profiler
- Spring Boot 线程池的创建、@Async 配置步骤及注意事项
- idea怎么直接拉去git_我用了一条Git命令,帮助同事免去了失业的风险
- facelets_Java EE 8中的MVC 1.0:使用Facelets入门
- xp系统目前禁用索引服务器,WinXP系统中可以被禁用的服务对照表
- python安装函数库pip网址_批量安装python库函数---pip
- Android动画的实现 上
- 数据切分——MySql表分区概述
- Android Studio 快速实现上传项目到Github(详细步骤)
- Jquery消息提示插件toastr的使用
- Android USB通信开发总结和热敏打印机开发实例解析
- 「ZigBee模块」基础实验(4)定时器T1的简单应用
- matlab rms数据滤波,与RMS相关的5个信息,如何通过RMS结果滤波来提高精度
- ThreadLocal工具类
- excel 2007 冻结单元格
- 原创分享 | 如何从非技术层面实现数据驱动
- Android开发文件上传格式,(android开发)使用okhttp上传文件