构建项目
- 建立 git 仓库
- 建立本地仓库
- 通过 ssh 链接 git 仓库
- 全局安装 gulp
npm install -g gulp - 项目目录内部再次安装
npm install gulp - 安装完成会生成一个 node_modules 文件夹
- 创建 gulp 任务清单 清单名固定为
gulpfile.js - 在 gulpfile.js 中定义任务（一般这个是公司给的）
- 通过
npm init -f创建一个 package.json 记录项目中的依赖插件 - 创建 src 目录 在 src 目录下创建 js/style/views/
- 下载 gulp 所需插件
npm install gulp gulp-less gulp-cssmin gulp-uglify gulp-concat gulp-connect gulp-imagemin open --save-dev - 执行 gulp 可以在 phpStorm 中 也可以在 git 中
- 所有文件都是在 src 中输入，在 build 中执行，所以在引入框架的时候要注意路径问题
开始项目
- 做手机适配
- 手机 app 项目不使用 px 单位 一般使用 rem 单位，设置项目单位
- 定义导航
- 在页面当中展示指令
- 定义指令 navDir 文件
angular.module('app').directive('navDir',function(){
return {
restrict:'EA',
templateUrl:'../views/nav_tpl.html',
link:function($scope,ele,attr){
//监听
$scope.$on('changeTitle',function(e,obj){
//修改标题
ele.find('span').html(obj.title)
})
}
}
})
- 创建模版 nav_tpl.html 文件
- 设置模版样式，在 style 文件夹下创建 navDirSty.less 文件
.nav{
z-index: 101;
width: 100%;
.h(64);
.lh(64);
background: lightseagreen;
text-align: center;
color: #fff;
.fs(25);
position: fixed;
.left(0);
.top(0);
.right(0);
i{
font-style: normal;
.fs(40);
position: absolute;
.left(10);
}
}
- 定义 tabbar
- 在页面当中使用指令
- 定义指令，在 directive 文件夹下创建 tabbarDir.js
angular.module('app').directive('tabbar',function(){
return {
restrict:'EA',
templateUrl:'../views/tabbar_tpl.html'
}
})
- 创建模版， views 文件夹下创建 tabbar_tpl.html 文件
- 定义模版样式， style 文件夹下创建 tabbarSty.less 文件
.active{
color: lightseagreen;
}
.tabbar{
width: 100%;
background: #fff;
.h(49);
border-top: 1px solid #ccc;
position: fixed;
left: 0;
right: 0;
bottom: 0;
ul{
display: flex;
list-style: none;
li{
flex: 1;
text-align: center;
.fs(14);
img{
.w(23);
.h(23);
}
}
}
}
- 切换标题，定义事件
//同时判断点击改变字体颜色，点击改变图片
![]()
首页
- 控制器实现方法
$scope.tabbarChange = function (type) {
$scope.type = type;
var title = "首页";
switch (type){
case 'home':
title = "首页";
break;
case 'author':
title = "作者";
break;
case 'content':
title = "栏目";
break;
case 'my':
title = "我的";
break;
}
$scope.$broadcast('changeTitle',{title:title})
};
}]);
- 控制器广播事件
$scope.$broadcast('changeTitle',{title:title})
- 导航栏监听广播
angular.module('app').directive('navDir',function () {
return {
restrict:'EA',
templateUrl:'../views/nav_tpl.html',
link:function ($scope,ele,attr) {
$scope.$on('changeTitle',function (e,obj) {
ele.find('span').html(obj.title);
})
}
}
});
- 定义路由
- 在创建模版时注入路由
var app = angular.module.('app',['ui.router']);
- 设置多视图占位
- 配置多视图路由
.config(['$stateProvider','$urlRouterProvider', function ($stateProvider,$urlRouterProvider) {
$stateProvider.state('home',{
url:'/',
views:{
home:{
templateUrl:'../views/home_tpl.html',
controller:'homeController'
},
author:{
templateUrl:'../views/author_tpl.html',
controller:'authorController'
},
content:{
templateUrl:'../views/content_tpl.html',
controller:'authorController'
},
my:{
templateUrl:'../views/my_tpl.html',
controller:'authorController'
}
}
});
$urlRouterProvider.otherwise('/');
}])
- 设置默认跳转路由
$urlRouterProvider.otherwise('/');
- tab 切换
- 在控制器当中定义属性记录当前是哪一个 tab
$scope.type = "home";
$scope.tabbarChange = function (type) {
$scope.type = type;
- 设置是否隐藏对应的视图
- 定义列表
- 展示列表
- 定义列表指令,新建 homeListDir.js文件
angular.module('app').directive('homeList',function () {
return {
restrict:'EA',
templateUrl:'../views/homeList_tpl.html',
}
});
- 定义列表指令模版，新建 homeList_tpl.html 文件
- 
- 
- 
- 定义列表指令样式，新建 homeListSty.less 文件
.content .home_list:first-child{
.mt(64);
}
.home_list{
.padding(20,0);
border-top:1px solid #ccc;
z-index: 99;
.tag{
background: #666;
color: #fff;
.w(80);
.h(25);
.ml(10);
text-align: center;
.fs(13);
border-radius: 0 0 3px 3px;
};
h3{
.ml(10);
}
.pos1{
.padding(0,10);
}
p{
.fs(14);
color: #666;
}
.pos2{
.padding(0,10);
position: relative;
p{
.w(270);
}
img{
position: absolute;
.right(10);
top: 0;
.w(80);
.h(80);
}
}
.pos3{
.padding(0,10);
ul{
display: flex;
list-style: none;
li{
flex: 1;
.ml(3);
img{
.w(110);
}
}
}
}
}
- 在对应的 homeController 当中请求网络数据,其中自己封装了请求服务，提升代码复用性和修改效率
angular.module('app').controller('homeController',['$scope','xmgHttp','$state',function ($scope,xmgHttp,$state) {
xmgHttp.getData(function (res) {
console.log(res);
$scope.listData = res.posts;
},function (error) {
console.log(error);
});
}]);
- 展示列表数据
- 
- 
- 
- 子路由
- home_tpl.html 当中嵌套了一个 ui-view 使用子路由
- home_tpl.html 中使用设置模版
- 定义子路由
.config(['$stateProvider','$urlRouterProvider', function ($stateProvider,$urlRouterProvider) {
$stateProvider.state('home.list',{
template:'- 设置默认跳转子路由
angular.module('app').controller('homeController',['$scope','xmgHttp','$state',function ($scope,xmgHttp,$state) {
//设置 默认跳转子路由
$state.go('home.list');