Parsing angular in GitHub step-12 using events to achieve thumbnail switching effects

In-depth analysis of angular in the event processing mechanism to achieve thumbnail switching effect step-12

First, look at the page effect

In the page we click on the right side of the small thumbnail, the left side of the picture can make a dynamic switch effect, then how this is achieved, eh?

Second, the realization of ideas:

1. Import Angular-animate.js

2, in the detailed view of the phone we bind the instruction of the big picture ngSrc to the mainImageUrl attribute, and we register a ngclick processor to the thumbnail. When a user clicks on any of the thumbnails, the processor uses the setImage event handler to mainImageUrl set the property to the URL of the selected thumbnail image.

Third, the realization process analysis:

1. phone-list.html page

Phone.query () is called when the page is loaded; Then $resource will go to the Phones/phones.json file. Because Phoneid is assigned to phones in Params:{phoneid: ' Phones '}.

As said: 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/:p Honeid.json ', {}, {      query: {method: ' GET ', Params:{phoneid: ' Phones '}, isarray:true}    }  ]); </span>

A brief description follows:

Module name is: phonecatservices

Service Name: Phone

The defined method is named: query, send a GET request and pass a parameter, the variable name is Phoneid, return an array.

2. And then we'll look at the 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>

Each picture shown here adds a URL, and each picture has a phone.id This is important, because it carries the file name of the JSON files: for example, the Phones.json file (that is, the list page to load the file)

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 are the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet. "    

Did you see that? Here phone.id refers to the nexus-s (below can be found according to the corresponding file)

The first thing we do when we click on a picture is:app.js

' Use strict ';/* App Module */var Phonecatapp = angular.module (' Phonecatapp ', [  ' Ngroute ',//Add dependent resources, Must have angular-route.js  ' phonecatanimations ',  ' phonecatcontrollers ', '  phonecatfilters ',  ' Phonecatservices ']);//define the routing rule phonecatapp.config ([' $routeProvider ', function ($routeProvider) {    $ Routeprovider.when ('/phones ', {        templateurl: ' partials/phone-list.html ',        controller: ' Phonelistctrl '      }).      When ('/phones/:p Honeid ', {         templateurl: ' partials/phone-detail.html ',        controller: ' Phonedetailctrl '      }).      Otherwise ({        redirectto: '/phones '      );  }]);

In this case, because the routing rules are defined, it is natural to go to the detailed list page. Note: The variable defined here is Phoneid, which is also the parameter that the previous face carries over: Phone.id. To this page will take Phonedetailcontrl control.

And then look at the page phone-detail.html

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

The small picture is traversed from here, you may wonder where the phone.images came from? Don't worry ...

Let's 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 will be able to obtain the corresponding mobile information according to the Phoneid (also the above nexus-s) from the page, which is also a mobile object. For example, Nexus-s.json file

Some shows:

"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 you use Phone.images to traverse images at this time?

Of course, today's focus is the analysis of the incident response mechanism, the front has been done enough to pave the phone-detail.html, see above is there a ng-click directive? The first thing I do when I click on a small picture setimage function assigns the currently selected Imgeurl to the main mainimageurl, when a large image is replaced, the first image configured in the JSON file is displayed by default in the larger image.

Sharing is a virtue, learning progress is inseparable from the Exchange O (∩_∩) o~

Parsing angular in GitHub step-12 using events to achieve thumbnail switching effects