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解决小数的加减乘除精度丢失的方案
May 31 Javascript
深入理解vue中的$set
Jun 01 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
vue实现图片懒加载的方法分析
Feb 05 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中的(伪)多线程与多进程
2013/07/01 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
angular中的post请求处理示例详解
2020/06/30 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
三方股东合作协议书范本
2014/09/28 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Tomcat用户管理的优化配置详解
2022/03/31 Servers