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>
文章来源: www.cnblogs.com，作者：姜腾腾，版权归原作者所有，如需转载，请联系作者。
原文链接：www.cnblogs.com/jiangtengteng/p/6801334.html
- 点赞
- 收藏
- 关注作者
评论（0）