AngulaJS路由 ui-router 传参实例

2024-12-03 17:04:36

在这里分享我做的一个使用ui-router 传参的小demo

1.首先第一步设置入口文件index.html，注意加载的顺序，先加载包，再加载自己写的控制器。

<!doctype html>
<html lang="en" ng-app="routerApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>测试</title>
  <!--lib是angular包的文件夹-->
  <script src="lib/jquery/jquery-1.11.3.min.js"></script>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular-ui/angular-ui-router.js"></script>
  <!--js控制器的文件夹-->
  <script src="js/app.js"></script>
  <script src="js/indexCtrl.js"></script>
  <script src="js/resultCtrl.js"></script>
</head>

<body>

<div ui-view>

</div>

</body>

</html>

2.app.js文件，依赖注入，设置路由，此处的路由是使用ui-router路由，这里简单的演示了两个模板之间的传参，传递参数的模板test.html和接收参数的模板result.html

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.run(function($rootScope, $state, $stateParams) {
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
});

routerApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/index');
  $stateProvider
    .state('index', {//模板的参数
      url: '/index',//url的参数
      templateUrl: 'templates/test.html',//模板的位置
      controller: 'MyController'
    })
    .state('result', {
      url: '/result/:id/:number',//需要传的参数的键名
      templateUrl: 'templates/result.html',
      controller: 'resultCtrl'
    });
});

3.第一个主页面的模板test.html,并且设置点击事件toResult()

<meta charset="UTF-8">
<div>hello world</div>
<input type="button" ng-click="toResult()" value="toResult">

4.test.html的控制器indexCtrl.js，设置需要传递的参数$scope.abc和$scope.toResult，点击事件toResult()里面其实就是一个$state.go('模板的参数',{app.js里面需要传的参数的键名:需要传的参数值})的方法

routerApp.controller('MyController', function($scope, $state) {
  $scope.abc = "nice";//需要传的参数值
  $scope.def = 10;//需要传的参数值
  $scope.toResult = function(){
    $state.go('result',{id: $scope.abc,number: $scope.def});
  }
});

5.接收参数的模板result.html

<meta charset="UTF-8">
<div>hello world2</div>

6.result.html的控制器resultCtrl.js，这里使用$stateParams的方法去接收上一个页面传递过来的参数

routerApp.controller('resultCtrl', function($scope, $state, $stateParams) {
  var id = $stateParams.id;
  var number = $stateParams.number;
  console.log(id);
  console.log(number);
});

项目目录

js\app.js、indexCtrl.js、resultCtrl.js

lib\
jquery\jquery-1.11.3.min.js
angular\angular.js
angular-ui\angular-ui-router.js

templates\test.html、result.html

index.html

其实整个过程并不难，只是穿插在模板和控制器之间，容易让人摸不着头脑，只要分清楚具体的参数是对应哪一个，很容易理解。

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

AngularJS ui-router (嵌套路由)实例

我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的.比如这样:<div ng-view></div>.一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图.比如这样: var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.conf
angular基于路由控制ui-router实现系统权限控制

前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配
详解AngularJs ui-router 路由的简单介绍

之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域). 比如我们点击了一个link,我们需要在视图中跳转到指定的一个页面,那么ngRoute
angularjs ui-router中路由的二级嵌套

关于ui-router中嵌套路由中的问题 1.首先我们的页面层次为其中Main.html是我们的主页,我们要在main.html中对路由进行统一的管理. main.html页面中有一个ui-view在这里将填充PageTab.html,同时被填充的PageTab.html中也有一个ui-view 这样就实现了嵌套路由. 最终效果: 当我们点击Page-1时出现的是Page1中的内容,同理点击Page-2. 下面是实际的代码: Main.html <!DOCTYPE html> <htm
vue router 传参获取不到的解决方式

在当前路由中有一个toArticle方法可以跳转到article页面 methods:{ toArticle:function(index) { this.$router.push({path:'/article',params:this.blogList[index]}); } } 在article中接受不到params mounted(){ console.log(this.$route.params) //这里输出undifined } 导致这样的原因是因为params需要通过name来获
vue嵌套组件传参实例分享

目录递归嵌套组件参数传递深层递归组件事件丢失 EventBus 什么事EventBus? 前言: 假设我们已经了解vue组件常见的有父子组件通信,兄弟组件通信.而父子组件通信很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件.那么当两个组件之间不是父子关系,怎样传递数据呢? 先来看一下这个例子: 递归嵌套组件参数传递我们封装了一个名为 NestedDir 的子组件(嵌套目录的意思),内容如下(用到了element ui组件)
vue3 携带参数跳转|router传参方式

目录携带参数跳转|router传参原理 demo vue路由跳转,参数的携带与获取第一种方式第二种方式携带参数跳转|router传参 A页面点击按钮后携带参数跳转到B页面原理导入router import { useRouter } from "vue-router"; A页面传参router.push({}) B页面接收route.params.num; demo route.js { path: '/A', name:'A',component: () => i
js匿名函数使用&传参(实例)

如下所示: function () { alert("error"); } //报错:匿名函数不能直接调用使用 0x01 (function () { alert("Success"); })()//直接使用 0x02 var anonymous=function () { alert("success"); } anonymous();//赋值调用传参 0x01 (function (m,n) { return m+n; })(10,20)
微信小程序动态传参实例详解

微信小程序动态传参实例详解在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=
vue slot与传参实例代码讲解

插槽分为默认插槽和具名插槽: 默认插槽: //父组件 <div> <h3>父组件</h3> <testChild> <div>默认插槽</div> </testChild> </div> //子组件 <div> <h4>子组件</h4> <slot></slot> </div> 具名插槽: 注意:具名插槽需要包裹在 template 标
解决element UI 自定义传参的问题

如下所示: <el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete> 这里的 hanleSelect 默认绑定的参数是选中的那条数据. 但是如果一个页面有好几个相同的组件,要想知道选中的是第几个
AngulaJS路由 ui-router 传参实例

在这里分享我做的一个使用ui-router 传参的小demo 1.首先第一步设置入口文件index.html,注意加载的顺序,先加载包,再加载自己写的控制器. <!doctype html> <html lang="en" ng-app="routerApp"> <head> <meta charset="utf-8"> <meta name="viewport" cont
实例讲解Vue.js中router传参

Vue-router参数传递为什么要在router中传递参数设想一个场景,当前在主页中,你需要点击某一项查看该项的详细信息.那么此时就需要在主页传递该项的id到详情页,详情页通过id获取到详细信息. vue-router 参数传递的方式 Parma传参贴代码: /router/index.vue export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/work
angular.js 路由及页面传参示例

页面传参数方法:1.$rootScope.2.(url)/user/:name/:age. 页面转换方法:1.href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" .2.$state.Go.3.$location.path.4.ui-sref (1)自带路由ngRoute <html> <head&g

AngulaJS路由 ui-router 传参实例

相关推荐

随机推荐