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 控制弹出窗口
Apr 10 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
前端开发基础javaScript的六大作用
Aug 06 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
PHP操作xml代码
2010/06/17 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Django实现跨域请求过程详解
2019/07/25 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
爱情寄语大全
2014/04/09 职场文书
团日活动总结
2014/04/28 职场文书
世界环境日活动总结
2015/02/11 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android