WEBAPP开发之webApp 项目流程-职坐标

WEBAPP开发之webApp 项目流程

白羽 2018-07-19 来源：网络阅读 2390 评论 0

摘要：本文将带你了解WEBAPP开发之webApp 项目流程，希望本文对大家学WebApp有所帮助。

构建项目

建立git仓库
建立本地仓库
通过ssh链接git仓库
全局安装gulpnpminstall-ggulp

项目目录内部再次安装npminstallgulp

安装完成会生成一个node_modules文件夹
创建gulp任务清单清单名固定为gulpfile.js

在gulpfile.js中定义任务（一般这个是公司给的）
通过npminit-f创建一个package.json记录项目中的依赖插件
创建src目录在src目录下创建js/style/views/
下载gulp所需插件
npminstallgulpgulp-lessgulp-cssmingulp-uglifygulp-concatgulp-connectgulp-imageminopen--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文件

![](images/tabicon/{{type=='home'?'homeSel.png':'home_icon.png'}})

首页

![](images/tabicon/{{type=='author'?'authorSel.png':'author_icon.png'}})

作者

![](images/tabicon/{{type=='content'?'contentSel.png':'content_icon.png'}})

栏目

![](images/tabicon/{{type=='my'?'mySel.png':'my_icon.png'}})

我的

定义模版样式，style文件夹下创建tabbarSty.less文件

.active{
color:lightseagreen;
}
.tabbar{
width:100%;
background:#fff;
.h(49);
border-top:1pxsolid#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;
vartitle="首页";
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);
})
}
}
});

定义路由
在创建模版时注入路由

varapp=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文件

![](images/tabicon/post_3.png)

![](images/tabicon/post_4.png)

![](images/tabicon/post_5.png)

定义列表指令样式，新建homeListSty.less文件

.content.home_list:first-child{
.mt(64);
}
.home_list{
.padding(20,0);
border-top:1pxsolid#ccc;
z-index:99;
.tag{
background:#666;
color:#fff;
.w(80);
.h(25);
.ml(10);
text-align:center;
.fs(13);
border-radius:003px3px;
};
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);
});
}]);

![](images/tabicon/post_1.png)

![](images/tabicon/post_3.png)

![](images/tabicon/post_4.png)

![](images/tabicon/post_5.png)

子路由
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');

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

app排行软件手机应用开发公司 app软件编辑

本文由 @白羽发布于职坐标。未经许可，禁止转载。