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