第一步:引入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默认视图开发的更多相关文章

  1. vs2013修改默认的开发环境

    可能会有朋友和我一样,当安装完VS完成之后,没有选择默认的开发模板,在后面添加新项目时,总是不能选择默认的开发语言,下面给出个简单步骤,记录一下以备用. 看图吧 1.工具>导入和导出设置 2.选 ...

  2. jQuery EasyUI Datagrid组件默认视图分析

    在Datagrid基础DOM结构的一文中,我对Datagrid组件的骨架做了很详细的描述.有了骨架还并不完整,还得有血有肉有衣服穿才行.强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健 ...

  3. WPF Knowledge Points - 默认视图(DefaultView),CollectionSourceView,CollectionView的区别

    这些天一直在做一些关于Treeview的事情,想写出来一些用法和心得.说到集合对象的显示和表现,CollectionSourceView和CollectionView有着至关重要的作用,所以在写Tre ...

  4. 网页导出成word文档的默认视图方式问题

    网页导出成word文档的默认视图方式问题 一般保存后的word文档默认是“Web版式视图”打开,这样会给客户的感觉不是真正的word文档,必须实现打开就是“页面视图” 1. 修改<html> ...

  5. (27)odoo 中改变菜单动作的默认视图

    一个动作下面有多个视图来支持,像表单视图.列表视图.看板视图.图表视图等 这时我们想改变系统默认指定的视图,方法其实有两种,一种是通过面板改,一种是开发一个小模块 举一例:项目默认打开是用了看板视图, ...

  6. visual studio 2017 中默认无法开发 Android 8.0 及以上系统的解决方案

    一般默认比较旧有两个原因,系统版本过旧,Visual Studio 版本过旧. 第一步,将windows 更新到最新版,必须是windows 10 并且更新到最新. 第二步,将visual studi ...

  7. django 视图开发与url配置

    可识别的视图需满足一下两个条件: 1.第一个参数的类型:HttpRequest 2.返回HttpResponse实例 在新建app的views当中写下以下内容 from django.shortcut ...

  8. 2.MVC框架开发(视图开发----基础语法)

    1.区别普通的html,在普通的html中不能将控制器里面的数据展示在html中. 在MVC框架中,它提供了一种视图模板(就是结合普通的html标签并能将控制器里传出来的数据进行显示) 视图模板特性: ...

  9. Win7如何修改文件夹的默认视图,如何把详细信息改为平铺视图

    先任意进入一个文件夹,右击选择平铺视图.   然后点击左上角的组织,文件夹和搜索选项,在文件夹选项的查看中点击"应用到文件夹",然后点击确定,弹出对话框,再确定.   随后再浏览别 ...

随机推荐

  1. Hadoop集群安装指南(CHD5.9.1)(分布式+图文详解)

    centos7.1,CDH5.9.1,3台机器,终极指导安装 下载链接如下: 安装文件下载链接如下: 链接:https://pan.baidu.com/s/1RQYNiWn9a-T8GXcCsoDBs ...

  2. thinkphp5 自定义验证码使用

    控制器[https://blog.csdn.net/John_rush/article/details/80169702] public function verify(){ $captcha = n ...

  3. python3.6以上 asyncio模块的异步编程模型 async await语法

    这是python3.6以上版本的用法,本例是python3.7.2编写使用asyncio模块的异步编程模型,生产这消费者,异步生产,用sleep来代替IO等待使用async和await语法来进行描述a ...

  4. Mysql ICP(翻译)

    英文版原文链接 https://mariadb.com/kb/en/library/index-condition-pushdown/ ICP 全称 Index Condition Pushdown. ...

  5. DEV Express中ImageCollection的使用

    1,        ImageCollection作为窗体组件的一种,位于Components分类下,拖进窗体以后,显示在界面的底部. 2,        注意ImageCollection的Imag ...

  6. 大数据学习——hdfs集群启动

    第一种方式: 1 格式化namecode(是对namecode进行格式化) hdfs namenode -format(或者是hadoop namenode -format) 进入 cd /root/ ...

  7. 遇到的Ajax相关问题

  8. python自定义模块导入方法,文件夹,包的区别

    python模块导入,网上介绍的资料很多,方法也众说纷纭.根据自己的实践,感觉这个方法最简单直接,而且可以与主流的python ide生成的工程是一样的. 规则只有三条 1.      严格区分包和文 ...

  9. XV6调度

    调度 任何操作系统都可能碰到进程数多于处理器数的情况,这样就需要考虑如何分享处理器资源.理想的做法是让分享机制对进程透明.通常我们对进程造成一个自己独占处理器的假象,然后让操作系统的多路复用机制(mu ...

  10. 【转】关于大型网站技术演进的思考(十九)--网站静态化处理—web前端优化—上(11)

    网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...