AngularJS Phonecat实例讲解


Posted in Javascript onNovember 21, 2016

前言

最近关于AngularJS的资料也看了一些,其官网上有个实例Phonecat很不错,硬着头皮看了一会实在是看不下去,索性自己动手实现下,遇到问题时再从里面寻找答案也不失为一种好方法。说的再多、看的再多不如自己动手去做一遍,那就开始吧。

正文

1、布局

布局很简单,首页侧边栏是一个输入框和下拉框,右边是一个列表,实现时对首页不做大的修改。详情页做一些改变,尽量做一些简化,考虑加一个自定义指令(轮播图)。

2、架构分析

首先思考一下需要用到的服务。
由于我们要做的是一个单页应用,所以需要服务$route、$location。利用服务$resource获取资源。利用服务$filter对首页数据过滤以及排序。总结一下:

1).服务$route、$location负责路由管理及跳转。
2).服务$resource负责资源的获取。
3).服务$filter负责数据的过滤及排序。

3、首页及详情页view视图

1、首页视图

<div class="main">
  <div class="side">
    <p>
      <label>Search:</label>
      <input ng-model="filterKey" type="text" style="width:150px; ">
    </p>
    <p>
      <label>Sort by:</label>
      <select ng-model="sortKey">
        <option value="price">price</option>
        <option value="name" ng-selected="true">name</option>
      </select>
    </p>
  </div>
  <div class="content">
    <ul>
      <li ng-repeat="item in data" ng-click="$location.path('detail/'+item.id)">
        <img ng-src={{item.img}}>
        <div>
          <h2>名字:{{item.name}}</h2>
          <p>性能:{{item.title}}</p>
          <p>价格:{{item.price | currency}}</p>         
        </div>
      </li>
    </ul>
  </div>
</div>

2、详情页视图

<slide></slide>是一个自定义指令,实现轮播图的功能

<div class="detail">
  <slide links='links' w='200' h='200'></slide>
  <div class="text">
    <h2>设备:{{data.name}}</h2>
    <p>性能:{{data.desc}}</p>
  </div>
</div>

4、逻辑分析

1、首先说明下外部资源infor.json的信息。是一个数组,数组每一项为一个json对象,含有以下字段:

{
    "id" : 1,
    "name" : "aaa",
    "title" : "bbb",
    "desc" : "ccc",
    "img" : "img/a.jpg",
    "price" : 100,
    "showList" : "[{"url":"img/b.jpg"},{"url":"img/c.jpg"}]"
}

2、路由管理($route)

m1.config(['$routeProvider',function($routeProvider){

  $routeProvider
    .when('/index',{
      templateUrl : 'template/index.html',
      controller : 'index'
    })
    .when('/detail/:str',{
      templateUrl : 'template/detail.html',
      controller : 'detail'  
    })
    .otherwise({
      redirectTo : '/index'
    });

}]);

当形如http://localhost/phonecat/phone.html#/index加载index模板

当形如http://localhost/phonecat/phone.html#/detail/0加载detail模板

默认为http://localhost/phonecat/phone.html#/index

3、首页(index)逻辑分析

首页资源加载:

var arr = [];
var objRe = $resource('infor.json');  
$scope.data = arr = objRe.query(); //获得data数据后首页即可进行渲染

首页数据的过滤及排序:

$scope.$watch('filterKey',function(){ //监听输入框的数据变化,完成数据的筛选
    if($scope.filterKey){
      $scope.data = $filter('filter')(arr,$scope.filterKey);
    }else{
      $scope.data = arr; 
    }  
  })

  $scope.$watch('sortKey',function(){  //监听select下拉框的数据变化,完成数据的排序
    if($scope.sortKey){
      $scope.data = $filter('orderBy')($scope.data,$scope.sortKey); 
    }else{
      $scope.data = arr;
    }
  })


//这里有个需要注意的地方,我们用一个数组arr作为媒介,避免bug

点击列表进行详情页的跳转:

$scope.$location = $location; //将$location挂载到$scope下,模板中便可使用$location提供的方法

模板如下:

<li ng-repeat="item in data" ng-click="$location.path('detail/'+item.id)">  --点击的时候将列表跳转到详情页

4、详情页(detail)逻辑分析

m1.controller('detail',['$scope','$resource','$location',function($scope,$resource,$location){
  var id = parseInt($location.path().substring(8));  //获取索引
  $resource('infor.json').query(function(data){
    $scope.data = data[id];
    $scope.links = eval($scope.data.showList);  //自定义指令需要用到此数据
  });

}]);

//注意:$resource.query()为异步操作。数据相关的逻辑需要在回调中完成,否则可能会出现数据undefined的情况。

5、自定义指定slide的编写

AngularJS的自定义指定功能十分强大,为实现组件化开发提供了一种思路。下面简单地实现一个轮播组件。

用法示例: <slide links='links' w='200' h='200'></slide>

模板(slide.html)如下:

<div class="slide">
 <ul>
   <li ng-repeat="item in links">
     <img ng-src={{item.url}}>
   </li>
 </ul>
</div>
m1.directive('slide',function(){
  return {
    restrict : 'E',
    templateUrl : 'template/slide.html',
    replace : true,
    scope : {
      links : '=',
      w : '@',
      h : '@'
    },
    link : function(scope,element,attris){
      setTimeout(function(){
        var w = scope.links.length * scope.w;
        var h = scope.h;
        var iNow = 0;

        $(element).css({'width':scope.w,'height':h,'position':'relative','overflow':'hidden'})
        $(element).find('ul').css({'width':w,'height':h,'position':'absolute'});
        setTimeout(function(){
          $(element).find('li').css({'width':scope.w,'height':h,'float':'left'});
          $(element).find('img').css({'width':scope.w,'height':h});       
        },0);

        setInterval(function(){
          iNow++;
          $(element).find('ul').animate({'left':-iNow*scope.w},function(){
            if(iNow==scope.links.length-1){
              $(element).find('ul').css('left',0);
              iNow = 0;  
            }  
          });
        },1000)       
      },50)

    }
  }  
})

结语

AngularJS给我们提供了很多好用的功能,比如路由的管理、数据的过滤的等。更强大的功能还需要进一步的探索,此文仅作为一个好的开端。

Javascript 相关文章推荐
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
浅谈React 属性和状态的一些总结
Nov 21 #Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 #Javascript
jQuery用FormData实现文件上传的方法
Nov 21 #Javascript
遍历js中对象的属性和值的实例
Nov 21 #Javascript
JavaScript数据结构链表知识详解
Nov 21 #Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 #Javascript
Node.js测试中的Mock文件系统详解
Nov 21 #Javascript
You might like
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
JavaScript类的写法
2016/09/17 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
javascript实现日历效果
2019/06/17 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
react 生命周期实例分析
2020/05/18 Javascript
node.js通过url读取文件
2020/10/16 Javascript
对python 操作solr索引数据的实例详解
2018/12/07 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
生产副总岗位职责
2013/11/28 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
小学庆六一活动总结
2014/08/28 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL