Home > Developer > AngularJS

Angularjs Routing and Template Templateurl learning notes

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞


1. Angularjs Routing Introduction



The ANGULARJS routing feature is a pure front-end solution that is not quite the same as our familiar background routing. Background routing, which is routed to a different controller (Controller) and then rendered (render) to the page (HTML) via a different URL. Angularjs front-end routing, the requirement for the specified (NG-APP), defined routing rules (Routeprovider), and then through different URLs, tell (Ng-app) which page (HTML) to load, and then render to (Ng-app) view (Ng-view In



ANGULARJS front-end routing, although the URL input is not the same, the page display is not the same, in fact completed a single page (Ng-app) view (Ng-view) of the local refresh. In this way, Angularjs to do a single page application is a little standard feeling.



From this perspective, to achieve a Gmail application, it is not difficult.



Example



Angularjs itself involves MVC in the Web development philosophy, the Model View controller
And in PHP development has a set of MVC model, it is inevitable that some faint



This code main function: According to the URL dynamic parameter changes, dynamically replace Angularjs specified template



http://domain name/INDEX.HTML#/ROLE/EDIT/2 point to http://domain name/role/edit?id=2
http://domain name/INDEX.HTML#/ROLE/EDIT/3 point to http://domain name/role/edit?id=3



Parameter detailed:



URL: is a matching URL rule
Templateurl: Is the specified template, this parameter can



Code on:


The code is as follows

Edit role
. State ('/role/edit ', {
URL: "/role/edit/:id",//url: "/role/edit?id",
Templateurl:function ($routeParams) {
Return '/role/edit?id= ' + $routeParams. ID + ' &_= ' + math.random (); New Date (). GetTime ();
},
Data: {pagetitle: ' Edit Role '},
Controller: "Generalpagecontroller",
Resolve: {
Deps: [' $ocLazyLoad ', function ($ocLazyLoad) {
return $ocLazyLoad. Load ([{
Name: ' Metronicapp ',
InsertBefore: ' #ng_load_plugins_before ',
Files: []
}]);
}]
}
})


Add JS random number after URL to prevent cache Math.random ()



Well, let's look at an example of a project layout



Directory



Angularjs Routing Introduction
Code implementation for routing
Screenshot of the Implementation effect



. Code implementation for routing



Theory not much said, directly on the code!! or based on a project we built with Yeoman.



Business Scenario: forum function, post list page (list.html) and Post content page (detail.html).



Code files:



1. Add: app/demo-route.html
2. Add: app/views/route/list.html
3. Add: app/views/route/detail.html
4. Modification: App/scripts/app.js
5. Modification: App/scripts/controllers/main.js
1). Add: app/demo-route.html



This file is the main page (Ng-app), containing views (Ng-view)


The code is as follows

<!doctype html>
<meta charset= "Utf-8" >
<title>route</title>
<body ng-app= "Routeapp" >

<div ng-view></div>

<script src= "Bower_components/angular/angular.js" ></script>
<script src= "Scripts/app.js" ></script>
<script src= "Scripts/controllers/main.js" ></script>
</body>


2). Add: app/views/route/list.html



This page is a layout template and is a snippet of HTML code. A list of IDs is included, and a link to the ID list allows you to enter the detailed page of the ID.


The code is as follows

<ul>
<li ng-repeat= "id in [1, 2, 3]" >
<a href= "#/list/{{ID}}" > id{{ID}}</a>
</li>
</ul>


3). Add: app/views/route/detail.html



This page is a layout template and is a snippet of HTML code. Access via ID, including ID number, (article content for ID)





4). Modification: App/scripts/app.js



This is the definition of the Ng-app file, and we define the Routeapp in demo-route.html, where we need to declare it.


The code is as follows
var Routeapp = Angular.module ( ' Routeapp ', []);
Routeapp.config ([' $routeProvider ', function ($routeProvider) {
      $ Routeprovider
      when ('/list ', {
        Templateurl: ' views/route/list.html ',
        controller: ' Routelistctl '
     })
      when ('/list/:id ', {
           Templateurl: ' views/route/detail.html ',
          Controller: ' Routedetailctl '
     })
      otherwise ({
        redirectto: '/list '
     });
}]);


In the Routeapp module, we define the routing and layout templates. The default URL for Routeapp is/list, or http://localhost:9000/demo-route.html#/list. The route to the Jump detail page is/list/:id,id as a parameter.



At the same time, the/list layout template is views/route/list.html, belonging to the ROUTELISTCTL controller management space.



5). Modification: App/scripts/controllers/main.js



This file defines the controller controller.


The code is as follows
Routeapp.controller (' Routelistctl ', function ($scope) {
});
Routeapp.controller (' Routedetailctl ', function ($scope, $routeParams) {
$scope. id = $routeParams. id;
});


Corresponds to the two controller declarations in this route, respectively.



The program is written well, we open the browser to see the effect.



3. Realization Effect screenshot



Don't forget to start the program with the following command.



Grunt Server



The browser is automatically opened, the default is Http://localhost:9000/demo-route.html#/list, "#/list" is the result of Redirectto turn.





Click on the ID2 link.


The page is refreshed and out of the Detil page. At the same time, we notice that the page does not have an entire refresh, while the local refresh in the view (Ng-view) does. Because, in the monitoring of Chrome's development tools, just see detail.html being loaded.

We'll go through the address bar and enter 212. 

http://localhost:9000/demo-route.html#/list/212
There is no networking operation in the monitoring of Chrome's development tools.
In the Browse Address bar, enter the address of the original list 
http://localhost:9000/demo-route.html#/list
Observe the monitoring of Chrome's development tools to make sure there is no change!!
From this experiment, we see the realization of ANGULARJS pure front-end routing, with the view of local refresh, the business function slicing into the HTML template page. It is very easy to implement the widget. Also, the widget reusability is very high and can greatly reduce the amount of front-end code.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
angularjs routing example with parameters angularjs learning path learning angularjs guide to angularjs development angularjs landing page template ccie routing and switching angularjs bootstrap template software release notes template
Related Article
Angularjs Upload picture preview __js
angularjs-the Reading and assignment of global variables thro...
Different Web pages are set by Ui-router in Angularjs
The magical function of the Angularjs self-executing function
Angularjs $state. Go page does not refresh data __js
Angularjs Post Request header field Content-type is not allow...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More