Angularjs Phonecat Example Explain _angularjs

Objective

Recent information about Angularjs also read some, its official online has an example phonecat is very good, the bullet-bite to see a while is really not going to go on, simply do their own hands-on implementation, when the problem is found from the inside to find the answer is also a good way. Say more, see more than do their own hands to do it, then start it.

Body

1, layout

The layout is very simple, the home side bar is an input box and Drop-down box, the right is a list, when the home page does not make big changes. Details page make some changes, try to do some simplification, consider adding a custom instruction (carousel map).

2. Architecture Analysis

First think about the services you need to use.
Because we want to do is a single page application, therefore needs the service $route, the $location. Use service $resource to get resources. Use the service $filter to filter and sort the homepage data. To sum up:

1. Service $route, $location responsible for routing management and jump.
2. Service $resource is responsible for the acquisition of resources.
3. Service $filter is responsible for data filtering and sorting.

3. Home and Details Page view view

1. Home 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 (' detail/' +item.id)" >
        
        <div>
          

2. Details Page view

<slide></slide> is a custom instruction to implement the function of the carousel map

<div class= "Detail" >
  <slide links= ' links ' w= ' ' ></slide>
  <div class= ' text ' >
    

4. Logical Analysis

1, the first description of the external resources Infor.json information. is an array in which each item is a JSON object that contains the following fields:

{
    "id": 1,
    "name": "AAA",
    "title": "BBB",
    "desc": "CCC",
    "img": "Img/a.jpg",
    "price": M,
    "showlist": [{"url": "Img/b.jpg"},{"url": "Img/c.jpg"}] "
}

2. Routing 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 form is loaded with the index template like Http://localhost/phonecat/phone.html#/index

When shaped like http://localhost/phonecat/phone.html#/detail/0 load detail template

Default is Http://localhost/phonecat/phone.html#/index

3, Home (index) logic analysis

Home Resource loading:

var arr = [];
var objre = $resource (' Infor.json ');  
$scope. data = arr = Objre.query (); The first page can be rendered after the data is obtained

Home page data filtering and sorting:

  $scope. $watch (' Filterkey ', function () {//Listening for data changes in input boxes, filtering of completed data
    if ($scope. filterkey) {
      $scope. Data = $filter (' Filter ') (arr, $scope. Filterkey);
    else{
      $scope. Data = Arr 
    }  
  })

  $scope. $watch (' SortKey ', function () {  //monitor the data changes in the Select dropdown box, sort the completed data
    if ($scope. SortKey) {
      $scope. Data = $ Filter (' by ') ($scope. Data, $scope. SortKey); 
    } else{
      $scope. Data = Arr
    }
  })


Here's where we need to be aware that we use an array arr as a medium to avoid bugs

Click on the list to go to the details page of the jump:

$scope. $location = $location; $location is mounted under $scope, the $location provided method is available in the template

The template is as follows:

<li ng-repeat= "Item in Data" ng-click= "$location. Path (' detail/' +item.id) ' >  --click to jump to the details page

4, Details page (detail) logical analysis

M1.controller (' detail ', [' $scope ', ' $resource ', ' $location ', function ($scope, $resource, $location) {
  var id = parseint ($location. Path (). SUBSTRING (8));  Gets the index
  $resource (' Infor.json '). Query (function (data) {
    $scope. data = Data[id];
    $scope. Links = eval ($scope. data.showlist);  Custom directives need to use this data
  });

Note: $resource. Query () is an asynchronous operation. Data-related logic needs to be done in a callback, otherwise data undefined may occur.

5, custom designated slide writing

Angularjs's custom designation is powerful and provides a way to achieve component-based development. The following is a simple implementation of a carousel component.

Usage Example: <slide links= ' links ' w= ' h= ' ></slide>

The template (slide.html) is as follows:

<div class= "Slide" >
 <ul>
   <li ng-repeat= "item in Links" >
     
   </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 a lot of useful functions, such as routing management, data filtering and so on. More powerful features require further exploration, and this article is only a good start.