webApp 项目流程

构建项目

建立 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 中执行，所以在引入框架的时候要注意路径问题

开始项目

做手机适配

<meta name = 'viewport' content = 'width=device-width maximum-scale=1.0 minimum-scale=1.0 user-scalable=no'>

手机 app 项目不使用 px 单位一般使用 rem 单位，设置项目单位

<script>
    var font = window.screen.width/10 + 'px';
    document.getElementsByTagName('html')[0].style.fontSize = font;
</script>

定义导航
在页面当中展示指令<nav-dir></nav-dir>
定义指令 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 文件

<div class='nav'>
    <i>&lt;</i>
    <span>首页</span>
</div>

设置模版样式，在 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
在页面当中使用指令<tabbar></tabbar>
定义指令，在 directive 文件夹下创建 tabbarDir.js

angular.module('app').directive('tabbar',function(){
    return {
        restrict:'EA',
        templateUrl:'../views/tabbar_tpl.html'
    }
})

创建模版， views 文件夹下创建 tabbar_tpl.html 文件

<div class="tabbar">
    <ul>
        <li ng-click="tabbarChange('home')" ng-class="{active:type == 'home'}">
            ![](images/tabicon/{{type == 'home' ?'homeSel.png':'home_icon.png'}})
            <p>首页</p>
        </li>
        <li ng-click="tabbarChange('author')" ng-class="{active:type == 'author'}">
            ![](images/tabicon/{{type == 'author' ?'authorSel.png':'author_icon.png'}})
            <p>作者</p>
        </li>
        <li ng-click="tabbarChange('content')" ng-class="{active:type == 'content'}">
            ![](images/tabicon/{{type == 'content' ?'contentSel.png':'content_icon.png'}})
            <p>栏目</p>
        </li>
        <li ng-click="tabbarChange('my')" ng-class="{active:type == 'my'}">
            ![](images/tabicon/{{type == 'my' ?'mySel.png':'my_icon.png'}})
            <p>我的</p>
        </li>
    </ul>
</div>

定义模版样式， 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);
      }
    }
  }
}

切换标题，定义事件

//同时判断点击改变字体颜色，点击改变图片
<li ng-click="tabbarChange('home')" ng-class ="{active:type=='home'}">
    <img ng-src = "images/tabicon/{{type == 'home' ? 'homeSel.png' : 'home_icon.png'}}" alt="">
    <p>首页</p>
</li>

控制器实现方法

$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']);

设置多视图占位

<!--通过多视图，实现一个页面展示多个模板-->
<div ui-view="home" ng-show="type == 'home'"></div>
<div ui-view="author" ng-show="type == 'author'"></div>
<div ui-view="content" ng-show="type == 'content'"></div>
<div ui-view="my" ng-show="type == 'my'"></div>

配置多视图路由

.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;

设置是否隐藏对应的视图

<!--通过多视图，实现一个页面展示多个模板-->
<div ui-view="home" ng-show="type == 'home'"></div>
<div ui-view="author" ng-show="type == 'author'"></div>
<div ui-view="content" ng-show="type == 'content'"></div>
<div ui-view="my" ng-show="type == 'my'"></div>

定义列表
展示列表

<home-list></home-list>

定义列表指令,新建 homeListDir.js文件

angular.module('app').directive('homeList',function () {
    return {
        restrict:'EA',
        templateUrl:'../views/homeList_tpl.html',
    }
});

定义列表指令模版，新建 homeList_tpl.html 文件

<div class="content">
    <div ui-sref="detail({id:item.id})" class="home_list" ng-repeat="item in  listData">
        <!--1.小标签-->
        <p class="tag" ng-bind="item.column.name" ng-if="item.column.name"></p>
        <!--2.标题-->
        <h3 ng-bind="item.title"></h3>
        <!--3.内容
            1.标题
            2.文字图片
            3.图片
        -->
        <!--全文本-->
        <div class="pos1" ng-if="item.display_style == '10001'">
            <p ng-bind="item.abstract"></p>
        </div>
        <!--文字图片-->
        <div class="pos2" ng-if="item.display_style == '10002'">
            <p ng-bind="item.abstract"></p>
            ![](images/tabicon/post_1.png)
        </div>
        <!--图片-->
        <div class="pos3"  ng-if="item.display_style == '10003'">
            <ul>
                <li>![](images/tabicon/post_3.png)</li>
                <li>![](images/tabicon/post_4.png)</li>
                <li>![](images/tabicon/post_5.png)</li>
            </ul>
        </div>
    </div>
</div>

定义列表指令样式，新建 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);
    });
}]);

展示列表数据

<div class="content">
    <div ui-sref="detail({id:item.id})" class="home_list" ng-repeat="item in  listData">
        <!--1.小标签-->
        <p class="tag" ng-bind="item.column.name" ng-if="item.column.name"></p>
        <!--2.标题-->
        <h3 ng-bind="item.title"></h3>
        <!--3.内容
            1.标题
            2.文字图片
            3.图片
        -->
        <!--全文本-->
        <div class="pos1" ng-if="item.display_style == '10001'">
            <p ng-bind="item.abstract"></p>
        </div>
        <!--文字图片-->
        <div class="pos2" ng-if="item.display_style == '10002'">
            <p ng-bind="item.abstract"></p>
            ![](images/tabicon/post_1.png)
        </div>
        <!--图片-->
        <div class="pos3"  ng-if="item.display_style == '10003'">
            <ul>
                <li>![](images/tabicon/post_3.png)</li>
                <li>![](images/tabicon/post_4.png)</li>
                <li>![](images/tabicon/post_5.png)</li>
            </ul>
        </div>
    </div>
</div>

子路由
home_tpl.html 当中嵌套了一个 ui-view 使用子路由
home_tpl.html 中使用设置模版<div ui-view></div>
定义子路由

.config(['$stateProvider','$urlRouterProvider', function ($stateProvider,$urlRouterProvider) {
            $stateProvider.state('home.list',{
                template:'<home-list></home-list>'
            })
    }]);

设置默认跳转子路由

angular.module('app').controller('homeController',['$scope','xmgHttp','$state',function ($scope,xmgHttp,$state) {
    //设置 默认跳转子路由
    $state.go('home.list');

最后编辑于：2017.12.08 02:18:32

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,378评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,356评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,702评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,259评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,263评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,036评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,349评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,979评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,469评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,938评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,059评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,703评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,257评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,262评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,485评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,501评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,792评论 2赞 345

webApp 项目流程

构建项目

开始项目

推荐阅读更多精彩内容