Home > Developer > Web Develop
Objective
What do we do if we want to develop a Gmail-like web App?
In the idea of jquery, we have to listen to all the click events, and we can trigger the function of loading data, submitting, frame, verifying and so on by the event function, and we can set up the design of the declarative architecture by the way of Angularjs. What kind of operations do things, and so on when the event occurs, the program will know what to do.
Today, Angularjs is how to implement the front-end routing Function!
Directory
The ANGULARJS routing feature is a purely front-end solution that is not the same as the background route we are familiar with. Background routing, which is routed through different URLs to different controllers (Controller), then renders (render) to the page (HTML). Angularjs front-end routing, the need to advance to the specified (Ng-app), define the 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, the completion of a single page (Ng-app) view (ng-view) local refresh. In this way, Angularjs to do a single page application is a bit standard feeling.
From this point of view, to achieve a Gmail application, it is really not difficult.
2. Code implementation of the routeTheory not much to say, directly on the code!! or based on the project we built with Yeoman.
Business Scenarios: Forum features, Posts list page (list.html), and post content page (detail.html).
Code files:
1). Added: app/demo-route.html
This file is the main page (Ng-app), including the View (Ng-view)
<!DOCTYPE HTML><Head><MetaCharSet= "Utf-8"><title>Route</title></Head><BodyNg-app= "Routeapp"><H1>Route Demo Index</H1><DivNg-view></Div><Scriptsrc= "Bower_components/angular/angular.js"></Script><Scriptsrc= "Scripts/app.js"></Script><Scriptsrc= "Scripts/controllers/main.js"></Script></Body></HTML>
2). Added: 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 go to the detailed page of the ID.
<HR/><H3>Route:List.html</H3><ul><Ling-repeat= "id in [1, 2, 3]"><ahref= "#/list/{{ID}}">id{{ID}}</a></Li></ul>
3). Added: app/views/route/detail.html
This page is a layout template and is a snippet of HTML code. Access by ID, including ID number, (ID of article content)
< HR /> < H3 > < style= "color:red;" > {{id}} </ span > </ H3 >4). Modified: App/scripts/app.js
This is the definition of the Ng-app file, and we define the Routeapp in the demo-route.html, which we need to declare here.
var routeapp = angular.module (' Routeapp ', []) routeapp.config ([' $routeProvider ',function ($routeProvider) { $routeProvider . When ('/list ', { ' views/route/list.html ') , ' Routelistctl ' }) . When ('/list/:id ', { ' views/route/detail.html ', ' Routedetailctl '} ) . Otherwise ({ '/list ' });In the Routeapp module, we define the routing and layout templates. The default URL for Routeapp is/list, which is http://localhost:9000/demo-route.html#/list. The route of the Jump detail page is/list/:id,id for the parameter.
At the same time,/list's layout template is views/route/list.html, which belongs to Routelistctl's controller management space.
5). Modified: App/scripts/controllers/main.js
This file defines controller controllers.
Routeapp.controller (' routelistctl ',function($scope) {}); Routeapp.controller (' Routedetailctl ', function ($scope, $routeParams) { = $routeParams. ID;});Corresponds to the two controller declarations in the route, respectively.
The program is written well, we open the browser to see the effect.
3. Achieving resultsThis project needs to be powered by a server, Tomecat,grunt or Nodejs, and can be accessed after starting the program
Http://localhost:9000/demo-route.html
The browser is automatically opened, the default is Http://localhost:9000/demo-route.html#/list, "#/list" is the result of the Redirectto turn.
Click on the ID2 link.
The page was refreshed, out of the Detil page. At the same time, we observe that the page does not have an entire refresh, while in the view (Ng-view) does a local refresh. Because, Chrome's development tools are monitored only to see detail.html being loaded.
Let's go through the address bar and enter 212
http://localhost:9000/demo-route.html#/list/212
There is no networking operation to watch Chrome's development tools monitor.
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 and confirm that there are no changes!!
From this experiment, we see the implementation of ANGULARJS pure front-end routing, with the partial refresh of the view, the business functions are sliced and distributed to the HTML template page. Widgets are very easy to implement. Also, this widget can be very reusable and can significantly reduce the amount of front-end code.
Back-end component development ideas, smooth embedded front-end. Cool!!!
Reprint please specify the source:
http://blog.fens.me/angularjs-route-template/
Angularjs Routing and templates
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
