AngularJS Phonecat example explanation

Preface

I have read some information about AngularJS recently. There is an example of Phonecat on its official website which is very good. I just couldn’t stand it after looking at it for a while, so I decided to implement it myself. When it comes to questions, it’s also a good way to look for answers inside. 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. The homepage will not be enlarged during implementation. Modifications. 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). 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 in 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 loads the index template

When the format is http://localhost/phonecat/phone.html#/detail/0 loads 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提供的方法

The template is as follows:

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

4. Logical analysis of the details page (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. Customization Writing designated slides

The custom designation function of AngularJS is very powerful, providing an idea for component-based development. Let's simply implement a carousel component.

Usage example:

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.

For more AngularJS Phonecat examples and related articles, please pay attention to the PHP Chinese website!