6 JobApp默认视图开发
第一步：引入angularjs 添加app模块
现在我们正式进入开发，下面是我们在上一节建立的目录结构：
我们需要再src路径下，新建index.html文件，先引入angularjs文件：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>Job APP</title>
</head>
<body>
<h1>Hello World !</h1>
<script type="text/javascript" src="vendor/angular/angular.min.js"></script>
</body>
</html>
现在，在我们的src路径下，会多一个index.html文件：
之后，在src/script路径下，新建app.js文件，使用严格模式，并引入angular模块：
'use strict';
angular.module('app',[]);
再次打开index.html文件，在<html>或<body>标签内，加入ng-app指令，这样才能让页面用app模块来启动：
<html lang="en" ng-app="app">
第二步：配置路由
路由是管理页面的业务逻辑以及页面跳转的，要使用路由，我们需要先来安装路由模块，angular.js 1的路由时ui-router。打开终端，进入项目目录，使用bower进行安装，执行命令：
$ bower install --save ui-router
安装完成后，我们在终端执行gulp拷贝第三方依赖的命令：$ gulp lib，然后就能看到ui-router在项目中的目录地址：
然后，我们在index.html文件的angularjs后面，引入ui-router文件：
<body>
<h1>Hello World !</h1>
<script type="text/javascript" src="vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
打开app.js文件，进入ui-router依赖：
angular.module('app',['ui.router']);
现在可以开始配置路由了，在src/script/目录下，新建config文件夹，用来放置配置项，在config文件夹里，新建router.js文件，配置路由：
'use strict';
angular.module('app').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider.state('main',{
url:'/main',
templateUrl:'view/main.html',
controller:'mainCtrl'
});
$urlRouterProvider.otherwise('main');
}]);
然后声明引入页面的指令，打开index.html文件：
<body>
<!-- 声明引入页面指令ui-view -->
<section ui-view></section>
现在，我们在src/view/下的main.html文件里写入内容，预览应用即可看到对应内容啦~
第三步：使用rem 让移动端自适应
打开index.html，写入控制根字体大写的JS代码：
<script>
document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 10 + 'px';
</script>
6 JobApp默认视图开发的更多相关文章
- vs2013修改默认的开发环境
可能会有朋友和我一样,当安装完VS完成之后,没有选择默认的开发模板,在后面添加新项目时,总是不能选择默认的开发语言,下面给出个简单步骤,记录一下以备用. 看图吧 1.工具>导入和导出设置 2.选 ...
- jQuery EasyUI Datagrid组件默认视图分析
在Datagrid基础DOM结构的一文中,我对Datagrid组件的骨架做了很详细的描述.有了骨架还并不完整,还得有血有肉有衣服穿才行.强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健 ...
- WPF Knowledge Points - 默认视图(DefaultView)，CollectionSourceView，CollectionView的区别
这些天一直在做一些关于Treeview的事情,想写出来一些用法和心得.说到集合对象的显示和表现,CollectionSourceView和CollectionView有着至关重要的作用,所以在写Tre ...
- 网页导出成word文档的默认视图方式问题
网页导出成word文档的默认视图方式问题 一般保存后的word文档默认是“Web版式视图”打开,这样会给客户的感觉不是真正的word文档,必须实现打开就是“页面视图” 1. 修改<html> ...
- (27)odoo 中改变菜单动作的默认视图
一个动作下面有多个视图来支持,像表单视图.列表视图.看板视图.图表视图等 这时我们想改变系统默认指定的视图,方法其实有两种,一种是通过面板改,一种是开发一个小模块 举一例:项目默认打开是用了看板视图, ...
- visual studio 2017 中默认无法开发 Android 8.0 及以上系统的解决方案
一般默认比较旧有两个原因,系统版本过旧,Visual Studio 版本过旧. 第一步,将windows 更新到最新版,必须是windows 10 并且更新到最新. 第二步,将visual studi ...
- django 视图开发与url配置
可识别的视图需满足一下两个条件: 1.第一个参数的类型:HttpRequest 2.返回HttpResponse实例 在新建app的views当中写下以下内容 from django.shortcut ...
- 2.MVC框架开发（视图开发----基础语法）
1.区别普通的html,在普通的html中不能将控制器里面的数据展示在html中. 在MVC框架中,它提供了一种视图模板(就是结合普通的html标签并能将控制器里传出来的数据进行显示) 视图模板特性: ...
- Win7如何修改文件夹的默认视图，如何把详细信息改为平铺视图
先任意进入一个文件夹,右击选择平铺视图. 然后点击左上角的组织,文件夹和搜索选项,在文件夹选项的查看中点击"应用到文件夹",然后点击确定,弹出对话框,再确定. 随后再浏览别 ...
随机推荐
- MySQL InnoDB配置统计信息
MySQL InnoDB配置统计信息 1. 配置持久化(Persistent)统计信息参数 1.1 配置自动触发更新统计信息参数 1.2 配置每张表的统计参数 1.3 配置InnoDB优化器统计信息的 ...
- Go：获取命令行参数
一.Low B 方式 package main import ( "fmt" "os" ) func main() { fmt.Println("命令 ...
- JavaScript基础对象---Map
一.创建Map对象 Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值 1.构造函数 语法:new Map([iterable])参数: iterable 可 ...
- 【HIHOCODER 1478】 水陆距离（BFS）
描述 给定一个N x M的01矩阵,其中1表示陆地,0表示水域.对于每一个位置,求出它距离最近的水域的距离是多少. 矩阵中每个位置与它上下左右相邻的格子距离为1. 输入 第一行包含两个整数,N和M. ...
- 【HIHOCODER 1575】 两个机器人（BFS）
描述 一个N × M的2D迷宫中有两个机器人.机器人A在迷宫左上角,只能向右或向下移动:机器人B在迷宫右下角,只能向左或向上移动.机器人不能移动到迷宫外.此外,由于奇怪的同步机制,这两个机器人只能同时 ...
- tiles介绍
主要目的是为了将复数的jsp页面作为一个的页面的部分机能,然后用来组合成一个最终表示用页面用的,这样的话,便于对页面的各个机能的变更及维护. Tiles使得struts在页面的处理方面多了一种选择.并 ...
- 数组和String几种方法的需要注意的地方
array的方法总结 会更改原来的的数组 push.unshift方法,返回length.增加值得就返回length,其他返回该元素 pop,shift返回该元素 reverse返回该元素 splic ...
- 服务器端架构及实战 — C#分享
简介 此文是我2008年读研究生期间做的C#项目技术分享,给计算机专业学生的一些经验分享. 当时工作2年后读研. 计算机基础了解及介绍 了解计算机的核心课程和大家的理解 二进制的历史和原理 数字逻辑及 ...
- PTA 05-树9 Huffman Codes (30分)
题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/671 5-9 Huffman Codes (30分) In 1953, David ...
- [Kubernetes]Volume
容器技术使用rootfs机制和Mount Namespace,构建出一个同宿主机完全隔离开的文件系统环境 那容器里进程新建的文件,怎么样才能让宿主机获取到?宿主机上的文件和目录,怎么样才能让容器里的进 ...