"Angularjs" "learning experience" routing continue research Chapter

Original: http://www.imooc.com/wenda/detail/236998

In fact, the function of the route is more complex, we actually apply the state of the page is also very much, the above simple route is certainly not enough to meet our needs, so we must have a deeper understanding of the next route and its more useful usage.

--------------------------------------------------------------------

First of all, the Templateurl property, which says its value is the address of the corresponding template, such as

...        templateUrl : ‘tpls/index.html‘,        ...

     But in fact we can also use a function as a value, but this function must return the address of the template, such as

         Code class= "JS plain" > ...          TEMPLATEURL :  function () {                           return   ' tpls/index.html ' ;                         },          ...

The effect of these two pieces of code is actually exactly the same, it is easy to understand. However, we often have this requirement in practical application: stitching the Get parameters in the URL, then using the Get parameters to read the database and return the corresponding content in the background. It may not be easy (but achievable) to implement it in the first way, and it is easy to use the second method.

So before this, we need to introduce a very useful thing called $stateparams, it is easy to understand the name, state parameters. This thing stores the information about the state of the page, and we'll look at this as an example to see if this is God's horse stuff.

This is our list.html page.

< div > &NBSP;&NBSP;&NBSP;&NBSP; < p >this is the list page</ p > &NBSP;&NBSP;&NBSP;&NBSP; < a  ui-sref = "detail ({articleid: ' 111 '})" > article details </ a > </ div >

This is the detail.html page

<div>    <p>This is the detail page</p></div>

This is a part of the road, watch Yo

.state(‘list‘,{    url        : ‘/list‘,    templateUrl : ‘tpls/list.html‘}).state(‘detail‘,{    url        : ‘/detail/{articleId}‘,    templateUrl : function($stateParams){                      console.log($stateParams);                      return‘tpls/detail.html‘;                  }})

Let's take a look at the effect and look like this when we go to the list page

After we click on this link, the page becomes detail, and the following prints out the $stateparams

Here we find that it is an object and contains the arguments that we pass. Little friends See how I passed the parameters in the URL, that is, add a parenthesis, inside a we want to pass the object can be. When passing object parameters, it is important to note that the number of parameters followed by the URL in the route you can only pass so many parameters, such as

That's what the route says.

.state(‘detail‘,{    url        : ‘/detail/{articleId}/{else}‘,    templateUrl : function($stateParams){                      console.log($stateParams);                      return‘tpls/detail.html‘;                  }})

The HTML page is written like this

< div > &NBSP;&NBSP;&NBSP;&NBSP; < p >this is the list page</ p > &NBSP;&NBSP;&NBSP;&NBSP; < a  ui-sref = "detail ({articleid: ' 111 ', Else: ' Imooc '})" > Article details </ a > </ div >

So that's what we're outputting.

How can we use it? The small partners Remember another parameter in the routing controller, which specifies a controller for the template, in fact we can pass the $stateparams into the controller, and see an example.

First we introduce controller.js in index.html.

List page and no changes above

< div > &NBSP;&NBSP;&NBSP;&NBSP; < p >this is the list page</ p > &NBSP;&NBSP;&NBSP;&NBSP; < a  ui-sref = "detail ({articleid: ' 111 ', Else: ' Imooc '})" > Article details </ a > </ div >

We still write this in the route, but we assign a controller to the detail page

And then we're in controller.js.

//注意，我们需要在路由最开头的依赖中加上myModule哦    varmyModule = angular.module(‘myModule‘,[]);    myModule        .controller(‘DetailController‘,function($scope,$stateParams){            console.log($stateParams);        });

When we click on the link in the list page, enter the detail page, the effect is as follows

It's interesting that we can also print out the parameters passed in the controller. We can communicate with the backend server according to the parameters passed in the controller and then bind the returned result to the scope, the page can be displayed, such as

myModule.controller(‘DetailController‘, function($scope,$stateParams){    console.log($stateParams);    $http.post(‘API_URL‘,{params:$stateParams})        .success(function(data,status,headers,config){            $scope.content = data;        });})

We send the $stateparams to the background through the HTTP service, and then bind the returned data to the $scope.content, and the {{content}} in detail.html can be changed?

------------------------------------------------------------------------

So much for the time being today, these are some of the recent practices of routing, but the use of routing can be more flexible, which requires us to learn more about this.

PS: Today there are two days before the end of the course to preview the whole book, short of two days, but I think it should be reflective, to form a good habit is not easy, should not for their own reasons, and visual General Hang section ... Although the time is tight, but the squeeze is certainly still there!

"Angularjs" "learning experience" routing continue research Chapter