Angular 路由跳转

最新推荐文章于 2022-01-09 14:07:27 发布
最新推荐文章于 2022-01-09 14:07:27 发布
阅读量223 收藏
点赞数
文章标签： javascript ui ViewUI
原文链接：http://www.cnblogs.com/nns4/p/7001614.html
版权

首先引入

1.angular.min.js

2.angular-ui-router.min.js

引入顺序一定不要错

-----------------------------------------

html部分

<body ng-app="router">       // angular 起作用的地方
<div ui-view>        //要显示的位置

<a ui-sref="one"> 第一个</a>      //state的名字 one
<a ui-sref="two"> 第二个</a>      //state的名字 two

</div>
</body>

 

--------------------------------------------

script 部分

 

<script type="text/javascript">

var app = angular.module('router', ['ui.router']);             //引入ui.router 就是引入的angular-ui-router
app.config(function($stateProvider, $urlRouterProvider) {         //注入的依赖
$stateProvider
.state('one', {                     
url: "/index1",                                                    
templateUrl: "view/page1.html"                               //第一级的地址    view模板的文件夹
})
.state('two', {
url: "/index2",                                                    //第二级的地址   view模板的文件夹
templateUrl: "view/page2.html"
})
})
</script>

 -------------

模板 page1

<!--代码片段-->
<div><span style="font-size: 50px; color: gold;">page1</span></div>

模板 page2

<!--代码片段-->
<div><span style="font-size: 50px; color: gold;">page1</span></div>

 

------------

进入方法  

1.在地址后加   ?/#!/index1

点击 页面中  第一个  第二个 进入

 

----------------------------------------路由跳转嵌套一层

html 部分

<body ng-app="router">       // angular 起作用的地方
<div ui-view>        //要显示的位置

<a ui-sref="one"> 第一个</a>      //state的名字 one
<a ui-sref="two"> 第二个</a>      //state的名字 two

</div>
</body>

----------------------------------------------------------

script 部分

<script type="text/javascript">
var app = angular.module('router', ['ui.router']); //引入ui.router 就是引入的angular-ui-router
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('one', {
url: "/index1",
views: {
'': {
templateUrl: 'view/page1.html'
},
'view1@one': {
templateUrl: 'view/page1-1.html'
},
'view@one': {
templateUrl: 'view/page1-2.html'
}
}

})
.state('two', {
url: "/index2",
templateUrl: "view/page2.html"
})

$urlRouterProvider.otherwise("/index2");     //网址不对 直接跳转
})
</script>

---------------------------------------------

模板

模板 page1

<!--代码片段-->

<div>

<span style="font-size: 50px; color: gold;">page1</span>
<div ui-view="view1"></div>
<div ui-view="view2"></div>
</div>

模板 page1-1

<!--代码片段-->
<div><span style="font-size: 50px; color: gold;">page1-1</span></div>

 

模板 page1-1

<!--代码片段-->
<div><span style="font-size: 50px; color: gold;">page1-2</span></div>

 

模板 page2

<!--代码片段-->
<div><span style="font-size: 50px; color: gold;">page1</span></div>

 

转载于:https://www.cnblogs.com/nns4/p/7001614.html

weixin_30341745
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular 利用路由跳转到指定页面的指定位置方法
10-18
今天小编就为大家分享一篇Angular 利用路由跳转到指定页面的指定位置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Angular】路由跳转
凤凰涅槃
06-15 2038
前言 小编最近做的项目前端使用Angular,要实现一个界面跳转功能，从一个界面调转到另一个界面。 1.在button中写一个click事件 （1）在html中 &lt;button (click)="addteachclass()"&gt;加入班课&lt;/button&gt; //看清楚了哪里该加括号，少一个都不可以滴 （2）在ts中 1&gt;引用Route impor...
angular中的路由跳转
m0_58047238的博客
08-28 6233
一、概述 定义：根据不同的URL地址，动态的让根组件挂载其它组件来实现一个单页面应用。 二、安装与配置 安装项目时ng new 项目名，在询问是否要安装带路由的项目包时，选择Y。其它条件依据情况选择即可。 带路由项目与不带路由项目的区别： 多了一个路由配置文件app-routing.module.ts 在app.module.ts文件中引入了路由配置文件，并在imports中注入了。 import { AppRoutingModule } from './app-routing.modu
Angular-路由跳转
snowy
11-25 326
路由
angular中的路由跳转及路由传参方法整理
m0_54944506的博客
01-09 4182
路由跳转方式 总的大概分为两种 通过模板链接进行跳转 两种写法 <a routerLink="./component-a">跳转a组件</a> <a [routerLink]="['./component-a']" >跳转a组件</a> 定义路由 {path: 'component-a', component: ComponentAComponent} 定义路由出口 <router-outlet></router-ou
angular2中router路由跳转navigate的使用与刷新页面问题详解
08-30
Angular2中Router路由跳转Navigate的使用与刷新页面问题详解 Angular2中Router路由跳转Navigate的使用是Angular2路由跳转的核心部分，而刷新页面问题则是开发中常见的问题。本文将详细介绍Angular2中Router路由跳转...
AngularJS路由实现页面跳转实例
10-20
主要为大家详细介绍了AngularJS路由实现页面跳转的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angular 未登录状态拦截路由跳转的方法
10-17
今天小编就为大家分享一篇angular 未登录状态拦截路由跳转的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Angular 页面跳转时传参问题
09-01
在Angular应用中，页面之间的跳转和数据传递是常见的需求。本文将深入探讨Angular页面跳转时如何有效地传递参数，以便在不同页面间保持数据的连贯性。 首先，我们需要配置路由。在Angular中，路由通常通过`ui-...
本篇文章主要讲述的是angluar中如何运用路由来跳转页面
qq_40317838的博客
09-20 387
src="../../script/angular.min.js"> src="../../script/angular-route.js"> var myapp=angular.module("myapp",["ngRoute"]); myapp.config(['$routeProvider', function($routeProvider){ $route
angular5项目下利用router navigate实现页面跳转
weixin_38286069的博客
04-29 4533
1.需要引入 import {Router} from '@angular/router'; 2.ts中添加触发方法 navigate(){ this.router.navigate(['targetRouter'], { queryParams: { id: this.selectedId, ...
【Angular】路由跳转(代码跳转)
热门推荐
王如霜
11-27 3万+
【WHAT】      在Angular中，路由的作用就是建立URL路径和组件（页面，因为页面就是由组件构成）之间的对应关系，根据不同的URL路径匹配出相应的组件并渲染。 【HOW】 1. 定义路由配置 2. 创建根路由模块 3. 添加路由插座 (以上是基本且必须的三个步骤) 【示例：(文件如下)】                 1.在app.routes定义
Angular——路由跳转
张姐姐聊编程
11-13 3824
Web应用中的页面跳转，指的是应用响应某个事件，从一个页面跳转到另外一个页面的行为。对于使用Angular构建的单页应用而言，页面跳转实质上就是从一个配置项跳转到另一个配置型的行为。当某个事件引发了跳转时，Angular会根据跳转时的参数生成一个UrlTree实例来和配置型进行匹配，如果匹配成功则显示相应的组件并将新URL更新在浏览器地址栏上。如果匹配不成功则报错。
[Angular]路由跳转
那么多的人，你要去哪里
05-20 599
前言在Angular中，路由的作用是建立URL路径和组件之间对应关系，根据不同的URL路径匹配出相应的组件并渲染。下面列出项目中代码展示。正文跳转按钮代码：&lt;a class="plus" (click)="plusmodal()"&gt;添加&lt;/a&gt; 跳转路由代码：plusmodal(){ this.router.navigateByUrl("workspace/gam/plus...
angular8 路由相关
菠菜盼娣
04-21 290
路由使用前提 1 创建组件 2 引入组件(app.module.ts) 3 app.routing.ts中引入组件 4 配置路由 路由配置 const routes:Routes=[ {path:'home',component:HomeComponent}, {path:'news',component:NewsComponent}, {path:'**',redirectTo:'home'},...
AngularJs ui-router动态跳转路由
weixin_43294560的博客
02-22 473
1、在包含路由的控制器中,注入$state 2、跳转 $state.go('state的第一个自定义名称') 代码示例: <html ng-app="app" ng-controller="main"> <head> <meta charset="utf-8"> <title ></title> <script src...
angular7 路由重定向
qq_36620379的博客
01-03 675
1.导入 在ts文件中导入 import {Router} from '@angular/router'; 2.注入依赖 constructor(private router: Router,) { } 3.使用 this.router.navigate([`manage/bill-o/${this.objDetail.id}`]); ...
angular5+easyui ng-router路由不跳转
逝水流年
08-14 409
说明：第一篇博客，文笔不好，有错误，请见谅 本文出现的错误，请大佬们及时指正，如有更好的方法，也请留言，我及时添加。 路由附带图标，点击不跳转，页面无变化，url无变化，原因是路由内部的图标按钮阻碍路由跳转，未触发路由，去掉内部的easyui图标按钮即可。 <arouterLink="/dashboard/resultDetail" [queryParams]="{guid:'123'...
angular跳转路由
最新发布
11-03
在进行路由跳转时，可以使用Router的navigate方法，该方法返回一个Promise，值为boolean类型，表示是否跳转成功。例如，可以通过以下代码实现路由跳转： ``` constructor(public router: Router, public activeRoute...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值