6 JobApp默认视图开发

第一步:引入angularjs 添加app模块

现在我们正式进入开发,下面是我们在上一节建立的目录结构:

6 JobApp默认视图开发

我们需要再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文件:

6 JobApp默认视图开发

之后,在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在项目中的目录地址:

6 JobApp默认视图开发

然后,我们在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>
上一篇:下一代微服务 ~ Service Mesh


下一篇:Vue 过滤器与计算属性