网站优化

微信小程序APP_angular.js 路由及页面传参示例

作者:admin 发布时间:2021-01-12
angular.js 路由及页面传参示例       本篇文章主要介绍了angular.js 路由及页面传参示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

页面转换方法: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 
 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="libs/jquery/1.10.2/jquery.min.js" /script 
 script src="libs/angular.js/1.4.6/angular.min.js" /script 
 script src="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:"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', 
 {', 
 controller: 'AboutController'} 
 .when('/printers',{template:'这是打印机页面'}) 
 .when('/second_2',{template:'这是second_2'}) 
 .otherwise({redirectTo:'/'}); 
 }]); 

title AngularJS 路由实例 /title script src="libs/angular.js/1.4.6/angular.min.js" /script script src="angular-ui-router/1.0.0-beta.3/angular-ui-router.js" /script /head body ng-app="routerApp" div ng-controller="MainCtrl" 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传参数 /a a ui-sref="fifth({'name':123,'id':256})" ui-sref传参数 /a button ng-click="ngclick_go()" state.go传参数 /button button ng-click="ngclick_location()" location传参数 /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}); // 跳转后的URL: #/camnpr/appManager $scope.ngclick_location = function() { $location.path('/sixth/detail/42'); // 功能也是跳转的
app.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/second'); //与原生的$routerProvider写法不一样的就是$urlRouterProvider先写默认路径 $stateProvider //再用$stateProvider.state('',{}).state('',{})...代替$routerProvider.when()方法 .state('second', { url: '/second', views: {'second0': { ' , //看到templateUrl:后面包含了很多的模板 controller: 'MainCtrl' 'second1': { ', controller: 'MainCtrl' 'second2': { ', controller: 'MainCtrl' .state('third', { url: '/third', ' , //看到templateUrl:后面包含了很多的模板 controller: 'MainCtrl' .state('fourth', { url: '/fourth/:name', ' , //看到templateUrl:后面包含了很多的模板 controller: function ($stateParams,$scope) { $scope.name=$stateParams.name; alert(=$stateParams.name) .state('fifth', { url: '/fifth/:name/:id', ' , //看到templateUrl:后面包含了很多的模板 controller: function ($stateParams,$scope) { alert($stateParams.name+" "+$stateParams.id) .state('sixth', { url: '/sixth/detail/:name', ' , //看到templateUrl:后面包含了很多的模板 controller: function ($stateParams,$scope) { alert($stateParams.name) /* .state('fourth', { url: '/fourth/:name', ' , //看到templateUrl:后面包含了很多的模板 controller: function ($stateParams,$scope) { $scope.name=$stateParams.name; }) */ }); /script /body /html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



收缩