第一步:引入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>