AngularJS Phonecat example explanation

Foreword

I have read some information about AngularJS recently. There is an example of Phonecat on its official website which is very good. After looking at it for a while, I really can’t stand it. So I simply implemented it myself and looked at it from the inside when encountering problems. It’s also a good idea to look for answers. No matter how much you say or see, it’s better to do it yourself, so let’s get started.

Text

1. Layout

The layout is very simple. The sidebar of the homepage is an input box and a drop-down box, and the right side is a list. No major changes will be made to the homepage during implementation. Make some changes to the details page, try to simplify it, and consider adding a custom command (carousel image).

2. Architecture analysis

First think about the services you need to use.
Since what we are going to do is a single-page application, we need to serve $route and $location. Use service $resource to obtain resources. Use the service $filter to filter and sort the homepage data. To summarize:

1). The services $route and $location are responsible for routing management and jumps.
2). Service $resource is responsible for resource acquisition.
3). The service $filter is responsible for filtering and sorting data.

3. Home page and detail page view

1. Home page view

<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(&#39;detail/&#39;+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. Details page view

<slide></slide>是一个自定义指令，实现轮播图的功能
 
<div class="detail">
  <slide links=&#39;links&#39; w=&#39;200&#39; h=&#39;200&#39;></slide>
  <div class="text">
    <h2>设备：{{data.name}}</h2>
    <p>性能：{{data.desc}}</p>
  </div>
</div>

4. Logical analysis

1. First, explain the information of the external resource infor.json. It is an array, each item of the array is a json object, containing the following fields:

{
    "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 management ($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'
    });
 
}]);

When the shape is http://localhost/phonecat/phone.html#/index load index Template

When the shape is http://localhost/phonecat/phone.html#/detail/0, load the detail template

The default is http://localhost/phonecat/phone.html#/index

3. Home page (index ) Logical analysis

Home page resource loading:

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

Filtering and sorting of home page 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

Click on the list to jump to the details page:

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

Template As follows:

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

4. Logical analysis of details page

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. Writing of custom specified slides

The custom specified function of AngularJS is very powerful, providing a way to achieve component-based development ideas. Let's simply implement a carousel component.

Usage example: c5d78ac0771abcd9072419e8fbde58f8813d8b7ad24b2efd298fbc1d2e96befb

The template (slide.html) is as follows:

<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)
 
    }
  } 
})

Conclusion

AngularJS provides us with many useful functions, such as routing management, data filtering, etc. More powerful functions require further exploration, and this article is only a good start.