Parsing angular in github step-12 using events to achieve thumbnail switching effect, githubstep-12

Parsing angular in github step-12 using events to achieve thumbnail switching effect, githubstep-12

In-depth parsing of thumbnails switching in angular's event processing mechanism step-12

1. First, check the page Effect

On the page, click the small thumbnail on the right. The picture on the left can be dynamically switched. How can this be achieved?

II. Implementation ideas:

1. Import angular-animate.js

2. In the cell phone details viewngSrcBind commandsmainImageUrlAnd register an ngClick processor to the thumbnail. When a user clicks any thumbnail, This processor will usesetImageThe event processing functionmainImageUrlProperty to the URL of the selected thumbnail.

Iii. Implementation Process Analysis:

1. phone-list.html page

When the page is loaded, the Phone. query () is called. Then $ resource will go to the phones/phones. json file. Because phoneId is assigned to phones in params: {phoneId: 'phones.

Say: service. js

<span style="font-size:18px;">'use strict';/* Services */var phonecatServices = angular.module('phonecatServices', ['ngResource']);phonecatServices.factory('Phone', ['$resource',function($resource){    return $resource('phones/:phoneId.json', {}, {      query: {method:'GET', params:{phoneId:'phones'}, isArray:true}    });  }]);</span>

Brief description:

Module name: phonecatServices

Service name: Phone

The defined method is: query, send get request, and pass a parameter. The variable is named phoneId, and an array is returned.

2,Take a look at phone-list.html

 <ul class="phones">        <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail phone-listing">          <a href="#/phones/{{phone.id}}" class="thumb"></a>          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>          <p>{{phone.snippet}}</p>        </li>      </ul>

A url is added to each image, and each image containsPhone. idThis is very important because it carries the file name of the json file, such as the phones. json file (that is, the file to be loaded on the list page)

Some examples:

 {        "age": 6,         "carrier": "Best Buy",         "id": "nexus-s",         "imageUrl": "img/phones/nexus-s.0.jpg",         "name": "Nexus S",         "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet."    }, 

See? The phone. id here refers to nexus-s (you can find the corresponding file below)

When we click an image, the first task is:App. js

'Use strict ';/* App Module */var phonecatApp = angular. module ('phonecatapp', ['ngroute', // Add dependent resources, must have angular-route.js 'phonecatanimations', 'phonecatcontrollers', 'phonecatfilters ', 'phonecatservice']); // define the routing rule phonecatApp. config (['$ routeProvider', function ($ routeProvider) {$ routeProvider. when ('/phones', {templateUrl: 'partials/phone-list.html ', controller: 'phonelistctrl '}). when ('/phones/: phoneid', {templateUrl: 'partials/phone-detail.html', controller: 'phonedetailctrl '}). otherwise ({redirectTo: '/phones'}) ;}]);

Because the routing rules are defined, the detailed list page is displayed. Note: The Defined variable is phoneId, that is, the previous parameter phone. id. On this page, you need to control PhoneDetailContrl.

Access and view the page phone-detail.html

<ul class="phone-thumbs">  <li ng-repeat="img in phone.images">      </li></ul>

The thumbnail is traversed from here. You may wonder where the phone. images came from? Don't worry...

Let's take a look at the controller section:

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',  function($scope, $routeParams, Phone) {    $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {      $scope.mainImageUrl = phone.images[0];    });    $scope.setImage = function(imageUrl) {      $scope.mainImageUrl = imageUrl;    }  }]);

The get request sent through the Phone service can obtain the corresponding mobile Phone information based on the phoneId (that is, the nexus-s above) sent from the page, that is, a mobile Phone object. For example: nexus-s.json files

Partial display:

"id": "nexus-s",     "images": [        "img/phones/nexus-s.0.jpg",         "img/phones/nexus-s.1.jpg",         "img/phones/nexus-s.2.jpg",         "img/phones/nexus-s.3.jpg"    ], 

Can phone. images be used to traverse images?

Of course, the most important part of today is the analysis of the Event Response Mechanism, which has already been completed. See if there is an ng-click Command in your phone-detail.html? When I click on a small image, the setImage function first assigns the currently selected imgeUrl to the main mainImageUrl. In this case, the big image is replaced, by default, the first image configured in the json file is displayed.

Sharing is a virtue, and learning and progress cannot be separated from communication O ~