Page parameter transfer method: 1. $rootScope. 2. (url)/user/:name/:age.
Page conversion method: 1. href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" . 2. $. 3. $. 4. ui-sref
(1) Bring your own route ngRoute
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Routing instance</title>
</head>
<body ng-app='routingDemoApp' ng-controller="myCtrl">
<h2>AngularJS Routing Application</h2>
name: <input type="text" ng-model="names"><br>
<ul>
<li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home 1</a></li> <li><a href="#/second/2/3" rel="external nofollow" >second</a></li>
<li><a href="#/printers" rel="external nofollow" >Print</a></li> <li><a href="#/blabla" rel="external nofollow" >Other</a></li> </ul>
<div ng-view></div>
<script src="/libs/jquery/1.10.2/" ></script>
<script src="/libs//1.4.6/"></script>
<script src="/libs/angular-route/1.3.13/"></script>
<script>
var transform =function(data){return $.param(data); }
var app=('routingDemoApp',['ngRoute']);
('myCtrl', function($scope,$http, $rootScope) {
$http({
method:'POST',
url:"http://localhost:8090/angu_demo/",
data:{"age":20 }
})
.success(function(data,header,config,status){
//Response successfully $ = data[0].age;
$="rrrrrr";
}).error(function(data,header,config,status){
//Processing response failed });
});
('AboutController', function($scope,$http,$rootScope,$routeParams) {
$ = $;
$ = $;
$=$;
})
(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'This is the home page'})
.when('/second/:id/:age',
{templateUrl: '',
controller: 'AboutController'}
)
.when('/printers',{template:'This is the printer page'})
.when('/second_2',{template:'This is second_2'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>
(2)ui-router
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Routing instance </title>
<script src="/libs//1.4.6/"></script>
<script src="/angular-ui-router/1.0.0-beta.3/"></script>
</head>
<body ng-app="routerApp" >
<div ng-controller="MainCtrl">
<ul>
<li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home 1</a></li> <li><a href="#/second/" rel="external nofollow" >second</a></li>
<li><a href="#/third" rel="external nofollow" >third</a></li>
</ul>
<a href="#/fourth/42" rel="external nofollow" >href pass parameters</a> <a ui-sref="fifth({'name':123,'id':256})">ui-srefPass parameters</a>
<button ng-click="ngclick_go()" class="btn btn-primary " >Pass parameters</button>
<button ng-click="ngclick_location()" class="btn btn-primary " >locationPass parameters</button>
<div ui-view></div>
<div ui-view="second0"></div>
<div ui-view="second1"></div>
<div ui-view="second2"></div>
</div>
<script type="text/javascript">
/* var app = ('routerApp', ['']); */
var app=('routerApp',['']);
('MainCtrl', function($scope, $state,$location) {
$scope.ngclick_go = function() {
$('sixth',{name: 42}); // The URL after jump: #/camnpr/appManager };
$scope.ngclick_location = function() {
$('/sixth/detail/42'); // The function is also jumped };
});
(function($stateProvider, $urlRouterProvider) {
$('/second'); //The difference from the native $routerProvider is that $urlRouterProvider first writes the default path $stateProvider //Replace the $() method with $('',{}).state('',{}).. .state('second', {
url: '/second',
views: {'second0': {
templateUrl: '' , //See templateUrl: There are many templates included in the back controller: 'MainCtrl'
},
'second1': {
templateUrl: '',
controller: 'MainCtrl'
},
'second2': {
templateUrl: '',
controller: 'MainCtrl'
}
}
})
.state('third', {
url: '/third',
templateUrl: '' , //See templateUrl: There are many templates included in the back controller: 'MainCtrl'
})
.state('fourth', {
url: '/fourth/:name',
templateUrl: '' , //See templateUrl: There are many templates included in the back controller: function ($stateParams,$scope) {
$=$;
alert(=$)
}
})
.state('fifth', {
url: '/fifth/:name/:id',
templateUrl: '' , //See templateUrl: There are many templates included in the back controller: function ($stateParams,$scope) {
alert($+" "+$)
}
})
.state('sixth', {
url: '/sixth/detail/:name',
templateUrl: '' , //See templateUrl: There are many templates included in the back controller: function ($stateParams,$scope) {
alert($)
}
})
/* .state('fourth', {
url: '/fourth/:name',
templateUrl: '' , //See templateUrl: There are many templates behind it
controller: function ($stateParams,$scope) {
$=$;
}
}) */
});
</script>
</body>
</html>
Download address:angu_demo_jb51.rar
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.