angular.js 路由及頁面?zhèn)鲄⑹纠?/h1>
更新時間：2017年02月24日 15:11:29 作者：GOODDEEP
本篇文章主要介紹了angular.js 路由及頁面?zhèn)鲄⑹纠【幱X得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
頁面?zhèn)鲄?shù)方法：1、$rootScope。2、（url）/user/:name/:age。
頁面轉(zhuǎn)換方法：1、href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" 。2、$state.Go。3、$location.path。4、ui-sref
（1）自帶路由ngRoute
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由實例</title>
</head>
<body ng-app='routingDemoApp' ng-controller="myCtrl">
<h2>AngularJS 路由應用</h2>
名: <input type="text" ng-model="names"><br>
<ul>
<li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁1</a></li>
<li><a href="#/second/2/3" rel="external nofollow" >second</a></li>
<li><a href="#/printers" rel="external nofollow" >打印機</a></li>
<li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<div ng-view></div>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
var transform =function(data){return $.param(data); }
var app=angular.module('routingDemoApp',['ngRoute']);
app.controller('myCtrl', function($scope,$http, $rootScope) {
$http({
method:'POST',
url:"http://localhost:8090/angu_demo/test.chtm",
data:{"age":20 }
})
.success(function(data,header,config,status){
//響應成功
$scope.names = data[0].age;
$rootScope.name="rrrrrr";
}).error(function(data,header,config,status){
//處理響應失敗
});
});
app.controller('AboutController', function($scope,$http,$rootScope,$routeParams) {
$scope.id = $routeParams.id;
$scope.age = $routeParams.age;
$scope.name=$rootScope.name;
})
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/second/:id/:age',
{templateUrl: 'second.html',
controller: 'AboutController'}
)
.when('/printers',{template:'這是打印機頁面'})
.when('/second_2',{template:'這是second_2'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>
(2)ui-router
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由實例 </title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.js"></script>
</head>
<body ng-app="routerApp" >
<div ng-controller="MainCtrl">
<ul>
<li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁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傳參數(shù)</a>
<a ui-sref="fifth({'name':123,'id':256})">ui-sref傳參數(shù)</a>
<button ng-click="ngclick_go()" class="btn btn-primary " >state.go傳參數(shù)</button>
<button ng-click="ngclick_location()" class="btn btn-primary " >location傳參數(shù)</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 = angular.module('routerApp', ['ui.router']); */
var app=angular.module('routerApp',['ui.router']);
app.controller('MainCtrl', function($scope, $state,$location) {
$scope.ngclick_go = function() {
$state.go('sixth',{name: 42}); // 跳轉(zhuǎn)后的URL： #/camnpr/appManager
};
$scope.ngclick_location = function() {
$location.path('/sixth/detail/42'); // 功能也是跳轉(zhuǎn)的
};
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/second'); //與原生的$routerProvider寫法不一樣的就是$urlRouterProvider先寫默認路徑
$stateProvider //再用$stateProvider.state('',{}).state('',{})...代替$routerProvider.when()方法
.state('second', {
url: '/second',
views: {'second0': {
templateUrl: 'second0.html' , //看到templateUrl:后面包含了很多的模板
controller: 'MainCtrl'
},
'second1': {
templateUrl: 'second1.html',
controller: 'MainCtrl'
},
'second2': {
templateUrl: 'second2.html',
controller: 'MainCtrl'
}
}
})
.state('third', {
url: '/third',
templateUrl: 'third.html' , //看到templateUrl:后面包含了很多的模板
controller: 'MainCtrl'
})
.state('fourth', {
url: '/fourth/:name',
templateUrl: 'forth.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
$scope.name=$stateParams.name;
alert(=$stateParams.name)
}
})
.state('fifth', {
url: '/fifth/:name/:id',
templateUrl: 'fifth.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
alert($stateParams.name+" "+$stateParams.id)
}
})
.state('sixth', {
url: '/sixth/detail/:name',
templateUrl: 'sixth.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
alert($stateParams.name)
}
})
/* .state('fourth', {
url: '/fourth/:name',
templateUrl: 'third1.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
$scope.name=$stateParams.name;
}
}) */
});
</script>
</body>
</html>
下載地址：angu_demo_jb51.rar
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
-
本文主要介紹AngularJS ng-copy 指令,這里幫大家整理了ng-copy指令的基礎資料,并附有示例代碼和效果圖,有需要的朋友參考下 2016-08-08
-
angularjs ocLazyLoad分步加載js文件實例
本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 2017-01-01
-
angular2+node.js express打包部署的實戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
-
這篇文章主要為大家介紹了Angular應用懶加載模塊配置管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪 2023-10-10
-
AngularJS 在同一個界面啟動多個ng-app應用模塊詳解
這篇文章主要介紹了AngularJS 在同一個界面啟動多個ng-app應用模塊詳解的相關資料,需要的朋友可以參考下 2016-12-12
-
這篇文章主要介紹了使用Angular.js制作一個簡單的RSS閱讀器的教程,AngularJS是一個非常有人氣的JavaScript庫,文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下 2015-06-06
-
這篇文章主要介紹了詳解angularjs跨頁面?zhèn)鲄⒂龅降囊恍﹩栴}，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 2018-11-11
-
angular中實現(xiàn)控制器之間傳遞參數(shù)的方式
本篇文章主要介紹了angular中實現(xiàn)控制器之間傳遞參數(shù)的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-04-04
-
這篇文章主要介紹了AngularJS變量及過濾器Filter用法,結(jié)合實例形式分析了AngularJS變量、過濾器及自定義過濾器的相關用法與注意事項,需要的朋友可以參考下 2016-11-11
-
仿Angular Bootstrap TimePicker創(chuàng)建分鐘數(shù)-秒數(shù)的輸入控件
這篇文章主要為大家詳細介紹了仿Angular Bootstrap TimePicker創(chuàng)建分鐘數(shù)-秒數(shù)的輸入控件的相關資料，感興趣的小伙伴們可以參考一下 2016-07-07
最新評論
頁面?zhèn)鲄?shù)方法：1、$rootScope。2、（url）/user/:name/:age。
頁面轉(zhuǎn)換方法：1、href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" 。2、$state.Go。3、$location.path。4、ui-sref
（1）自帶路由ngRoute
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由實例</title>
</head>
<body ng-app='routingDemoApp' ng-controller="myCtrl">
<h2>AngularJS 路由應用</h2>
名: <input type="text" ng-model="names"><br>
<ul>
<li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁1</a></li>
<li><a href="#/second/2/3" rel="external nofollow" >second</a></li>
<li><a href="#/printers" rel="external nofollow" >打印機</a></li>
<li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<div ng-view></div>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
var transform =function(data){return $.param(data); }
var app=angular.module('routingDemoApp',['ngRoute']);
app.controller('myCtrl', function($scope,$http, $rootScope) {
$http({
method:'POST',
url:"http://localhost:8090/angu_demo/test.chtm",
data:{"age":20 }
})
.success(function(data,header,config,status){
//響應成功
$scope.names = data[0].age;
$rootScope.name="rrrrrr";
}).error(function(data,header,config,status){
//處理響應失敗
});
});
app.controller('AboutController', function($scope,$http,$rootScope,$routeParams) {
$scope.id = $routeParams.id;
$scope.age = $routeParams.age;
$scope.name=$rootScope.name;
})
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/second/:id/:age',
{templateUrl: 'second.html',
controller: 'AboutController'}
)
.when('/printers',{template:'這是打印機頁面'})
.when('/second_2',{template:'這是second_2'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>
(2)ui-router
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由實例 </title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.js"></script>
</head>
<body ng-app="routerApp" >
<div ng-controller="MainCtrl">
<ul>
<li><a href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁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傳參數(shù)</a>
<a ui-sref="fifth({'name':123,'id':256})">ui-sref傳參數(shù)</a>
<button ng-click="ngclick_go()" class="btn btn-primary " >state.go傳參數(shù)</button>
<button ng-click="ngclick_location()" class="btn btn-primary " >location傳參數(shù)</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 = angular.module('routerApp', ['ui.router']); */
var app=angular.module('routerApp',['ui.router']);
app.controller('MainCtrl', function($scope, $state,$location) {
$scope.ngclick_go = function() {
$state.go('sixth',{name: 42}); // 跳轉(zhuǎn)后的URL： #/camnpr/appManager
};
$scope.ngclick_location = function() {
$location.path('/sixth/detail/42'); // 功能也是跳轉(zhuǎn)的
};
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/second'); //與原生的$routerProvider寫法不一樣的就是$urlRouterProvider先寫默認路徑
$stateProvider //再用$stateProvider.state('',{}).state('',{})...代替$routerProvider.when()方法
.state('second', {
url: '/second',
views: {'second0': {
templateUrl: 'second0.html' , //看到templateUrl:后面包含了很多的模板
controller: 'MainCtrl'
},
'second1': {
templateUrl: 'second1.html',
controller: 'MainCtrl'
},
'second2': {
templateUrl: 'second2.html',
controller: 'MainCtrl'
}
}
})
.state('third', {
url: '/third',
templateUrl: 'third.html' , //看到templateUrl:后面包含了很多的模板
controller: 'MainCtrl'
})
.state('fourth', {
url: '/fourth/:name',
templateUrl: 'forth.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
$scope.name=$stateParams.name;
alert(=$stateParams.name)
}
})
.state('fifth', {
url: '/fifth/:name/:id',
templateUrl: 'fifth.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
alert($stateParams.name+" "+$stateParams.id)
}
})
.state('sixth', {
url: '/sixth/detail/:name',
templateUrl: 'sixth.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
alert($stateParams.name)
}
})
/* .state('fourth', {
url: '/fourth/:name',
templateUrl: 'third1.html' , //看到templateUrl:后面包含了很多的模板
controller: function ($stateParams,$scope) {
$scope.name=$stateParams.name;
}
}) */
});
</script>
</body>
</html>
下載地址：angu_demo_jb51.rar
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
- 本文主要介紹AngularJS ng-copy 指令,這里幫大家整理了ng-copy指令的基礎資料,并附有示例代碼和效果圖,有需要的朋友參考下2016-08-08
-
angularjs ocLazyLoad分步加載js文件實例
本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01 -
angular2+node.js express打包部署的實戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實戰(zhàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07 - 這篇文章主要為大家介紹了Angular應用懶加載模塊配置管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
-
AngularJS 在同一個界面啟動多個ng-app應用模塊詳解
這篇文章主要介紹了AngularJS 在同一個界面啟動多個ng-app應用模塊詳解的相關資料,需要的朋友可以參考下2016-12-12 - 這篇文章主要介紹了使用Angular.js制作一個簡單的RSS閱讀器的教程,AngularJS是一個非常有人氣的JavaScript庫,文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下2015-06-06
- 這篇文章主要介紹了詳解angularjs跨頁面?zhèn)鲄⒂龅降囊恍﹩栴}，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
-
angular中實現(xiàn)控制器之間傳遞參數(shù)的方式
本篇文章主要介紹了angular中實現(xiàn)控制器之間傳遞參數(shù)的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04 - 這篇文章主要介紹了AngularJS變量及過濾器Filter用法,結(jié)合實例形式分析了AngularJS變量、過濾器及自定義過濾器的相關用法與注意事項,需要的朋友可以參考下2016-11-11
-
仿Angular Bootstrap TimePicker創(chuàng)建分鐘數(shù)-秒數(shù)的輸入控件
這篇文章主要為大家詳細介紹了仿Angular Bootstrap TimePicker創(chuàng)建分鐘數(shù)-秒數(shù)的輸入控件的相關資料，感興趣的小伙伴們可以參考一下2016-07-07