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 相关文章推荐
JScript的条件编译
May 29 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
潜说js对象和数组
May 25 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
浅谈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控制器间实现相互调用的方法
2014/10/31 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python之Socket网络编程详解
2016/09/29 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
企业宣传方案
2014/03/04 职场文书
委托书的写法
2014/08/30 职场文书
春季运动会开幕词
2015/01/28 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书