第一步：引入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. VS C++项目报错warning C4199: ……use /Zc:twoPhase-

    具体的报错如下: c1xx : warning C4199: two-phase name lookup is not supported for C++/CLI, C++/CX, or OpenMP ...

  2. SCOI2013 数数

    题目描述 题解: 很玄学的一道数位$dp$,看了很多篇题解才懂. 直接挂$l$的题解. 代码: #include<cstdio> #include<cstring> #incl ...

  3. 环境变量HISTCONTROL命令及对快捷键Ctrl+o命令的影响

    在linux中环境变量HISTCONTROL可以控制历史的记录方式. HISTCONTROL有以下的选项: ignoredups          默认,忽略重复命令 ignorespace      ...

  4. 条款27：尽量少做转型动作（Minimize casting）

    NOTE : 1.如果可以,尽量避免转型,特别是在注重效率的代码中避免dynamic_casts. 如果有个设计需要转型动作,试着发展无需转型的替代设计. 2.如果转型是必须要的,试着将它隐藏于某个函 ...

  5. Python之队列

    Python之队列 队列:先进先出 队列与线程有关. 在多线程编程时,会起到作用. 作用:确保信息安全的进行交换. 有get 和 put 方法. ''' 创建一个“队列”对象 import Queue ...

  6. Python-接口自动化（十一）

    配置文件的作用(十一) (十二)配置文件 1.python当中有一个模块可以读取配置文件里面的信息:configparser,对这个模块进行导入之后就可以使用了,import configparser ...

  7. 【51nod 1092】 回文字符串（区间DP）

    回文串是指aba.abba.cccbccc.aaaa这种左右对称的字符串.每个字符串都可以通过向中间添加一些字符,使之变为回文字符串. 例如:abbc 添加2个字符可以变为 acbbca,也可以添加3 ...

  8. idea 神键

    http://blog.csdn.net/dc_726/article/details/42784275 idea 中几个十分酸爽的快捷键.

  9. webservice学习第二天

    1 课程回顾 l 什么是webservice 远程调用技术:系统和系统之间的调用,获取远程系统里的业务数据 Webservice使用http传输SOAP协议的数据的一种远程调用技术 l Webserv ...

  10. 【数据传输 2】批量导入的前奏：将Excel表中的数据转换为DataTable类型

    导读:我们知道,在数据库中,数据集DataSet是由多张DataTable表组成.所以,如果我们需要将数据从外部导入到数据库中,那么要做的很重要的一步是将这些数据转换为数据库可以接受的结构.今天在用S ...