The example in this article describes the Angularjs multiple view switching usage. Share to everyone for your reference, specific as follows:
In the ANGULARJS application, we can write HTML fragments in a separate file, and then load the fragment into another page. If there are more than one fragmented file, we can also dynamically load different fragments in the controller according to the user's operation, thus achieving the effect of switching views.
Let's take a look at a case I wrote:
These two words are actually two HTML fragments, written separately in page1.html and page2.html. The following are the contents of these two files:
<!--page1.html content--> <div> <p> "Nan Xiang Zi Deng Jingkou North Solid pavilion have bosom" </p> <p> where look Shenzhou? Eyeful scenery North Solid building. The rise and fall of the eternal number of things, long, endless stream of Yangtze River. </p> <p> Young million 兜鍪, sit off the southeast war. The world hero who rivals, Cao Liu. Give birth to a child as a Sun Zhongmou. </p> </div>
<!--page2.html content--> <div> <p> "Butterfly Love Flower" </p> <p> rely on dangerous buildings wind thin, looking at the very spring sorrow, dark sky. Grass-colored smoke light setting sun, no words who will by the diaphragm. </p> <p> to Shing, complaining, Chang also tasteless. Shiriko end not regret, for Iraq to eliminate people haggard. </p> </div>
Let's look at how to switch between the two fragments.
<! DOCTYPE html>
<html ng-app = "routeMod">
<head lang = "en">
<meta charset = "UTF-8">
<script type = "text / javascript" src = "angular-1.3.0.14 / angular.js"> </ script>
<script type = "text / javascript" src = "angular-1.3.0.14 / angular-route.js"> </ script>
<link type = "text / css" href = "css / tutorial07.css" rel = "stylesheet">
<title> tutorial07.html </ title>
</ head>
<body>
<header>
Header
</ header>
<div id = "content" ng-controller = "MultiViewController">
<div id = "myView" ng-view = "myView" ng-init = "init ()">
</ div>
<div id = "btnDiv">
<button ng-click = "prePage ()"> Previous page </ button>
<button ng-click = "nextPage ()"> Next page </ button>
</ div>
</ div>
<footer>
Copyright: Rongbo_J
</ footer>
<script>
var routeMod = angular.module ('routeMod', ['ngRoute']);
routeMod.config (['$ routeProvider', function ($ routeProvider) {
$ routeProvider.when ('/ 1', {
templateUrl: 'tutorial07 / page1.html',
controller: 'MultiViewController'
})
.when ('/ 2', {
templateUrl: 'tutorial07 / page2.html',
controller: 'MultiViewController'
})
}])
routeMod.controller ("MultiViewController", function ($ scope, $ log, $ location) {
$ scope.init = function () {
$ location.path ("/ 1");
}
$ scope.prePage = function () {
$ log.info ("prePage");
$ location.path ("/ 1");
};
$ scope.nextPage = function () {
$ log.info ("nextPage");
$ location.path ("/ 2");
};
});
</ script>
</ body>
</ html>
Here we need to use the Angularjs routing module Ngroute, the module code is encapsulated in the Angular-route.js file, and we need to introduce it as the last section.
<script type= "Text/javascript" src= "Angular-1.3.0.14/angular-route.js" ></script>
And then inject it into our module with the following code:
var routemod = angular.module (' Routemod ', [' Ngroute ']);
The next step is to configure the access path to the HTML fragment, and we need to call the module's Config method to configure the $routeprovider service as follows:
Routemod.config ([' $routeProvider ', function ($routeProvider) {
$routeProvider. When ('/1 ', {
templateurl: ') Tutorial07/page1.html ',
controller: ' Multiviewcontroller '
})
. When ('/2 ', {
templateurl: ' Tutorial07/page2.html ',
controller: ' Multiviewcontroller '
})
}]
We defined a view through the ng-view instruction and called the $location.path () method in the controller to specify which fragment to load in the view .
Angularjs Source can click here to download the site .
I hope this article will help you to Angularjs program design.
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
