首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular routing中添加了#%2F,但在angular 1.6.4中不起作用

在Angular 1.6.4中,添加了#%2F在Angular routing中不起作用的原因是,从Angular 1.6版本开始,路由的默认行为已经发生了变化。在之前的版本中,路由使用的是基于哈希(hash-based)的URL,即URL中带有#符号。而在Angular 1.6及更高版本中,默认使用的是基于HTML5的URL模式,即URL中不带有#符号。

因此,如果你在Angular 1.6.4中添加了#%2F,它不会被识别为有效的路由路径。相反,你应该使用正常的URL路径来定义路由。

例如,如果你想定义一个名为"home"的路由,你可以这样做:

代码语言:txt
复制
angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      })
      .otherwise({
        redirectTo: '/home'
      });
  });

在上面的代码中,我们使用$routeProvider来定义了一个名为"home"的路由,它的URL路径为"/home"。当用户访问"/home"时,Angular会加载"views/home.html"模板,并使用"HomeController"来控制该视图。

关于Angular routing的更多信息,你可以参考腾讯云的Angular开发文档:Angular开发文档

请注意,以上答案仅适用于Angular 1.6.4版本,如果你使用的是其他版本的Angular,请参考相应版本的文档和指南。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Angular 从入坑到挖坑 - 路由守卫连连看

    4.2、路由守卫 Angular ,路由守卫主要可以解决以下的问题 对于用户访问页面的权限校验(是否已经登录?已经登录的角色是否有权限进入?)...CanActivateChild:功能同 CanActivate,只不过针对的是子路由 CanDeactivate:用来处理从当前路由离开的情况(判断是否存在未提交的信息) CanLoad:是否允许通过延迟加载的方式加载某个模块 加了路由守卫之后...app-routing.module.ts 文件引入 AuthGuard 类,针对需要保护的路由进行路由守卫的配置 import { NgModule } from '@angular/core';...,并将 app-routing.module.ts 相关的路由配置删除 import { NgModule } from '@angular/core'; import { Routes, RouterModule...crisis-routing.module.ts 中了,框架在进行路由匹配时会预先匹配上 app-routing.module.ts 设置的通配路由,从而导致无法找到实际应该对应的组件,因此这里我们需要将

    3.7K30

    模块化开发 Angular 应用

    想要更好地理解 Angular 应用程序所有的不同构建的模块? 在这篇文章,我们将走进模块的内容。 angular 应用,模块是共享和重用代码的好方法。...Declarations declarations 数组,我们定义着所有的组件,指令和管道,我们可以在这个模块内使用。...即使你没有任何模块,你仍然需要导入一些 angular 模块。正如我们之前提到的,Angular 构建之初已经考虑到了模块化。... AppModule 案例,这些 @Injectables 就是 application-scoped。 构建自定义模块 我们假装已经构建了一个很棒的应用程序。...为了实现这点,我们要在应用添加路由。 首先,我们用路由配置来配置路由模块。所以,我们创建一个名为 app.routing.ts 的文件,它跟 app.module 同级。

    3K10

    Angular 启用预加载

    使用路由延迟加载,我们介绍了如何使用模块来拆分应用,访问到这个模块的时候, Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候,会有一点延迟。...在上一节,我们的根路由定义 main.routing.ts,我们 app.module.ts 中使用了根路由定义。 需要注意的是,Home 组件是提前加载的。我们将在系统启动之后渲染这个组件。... Angular 渲染 Home 组件之后,用户就可以与应用交互了,我们可以通过简单的配置在后台预加载其它模块。 启用预加载 我们 forRoot 函数,提供一个预加载的策略。.../main.routing'; import { RouterModule } from '@angular/router'; import { PreloadAllModules } from '@angular...加载指定模块 我们还可以路由中定义附加的参数来指定哪些模块进行预加载,我们使用路由定义的 data 来提供这个附加的数据。

    1.5K00

    Angular 路由配置(预加载配置,懒加载配置)

    forRoot()//主模块定义主要的路由信息 forChild()``//应用在特性模块(子模块) (2)懒加载:loadChildren 此处并没有将对应的模块加入到AppModule,而是通过.../main.routing'; import { RouterModule } from '@angular/router'; import { PreloadAllModules } from '...组建的同级新建一个selective-preloading-strategy.ts文件(需要在app-routing.module.ts的providers注入,然后路由中定义的data通过附加参数来设置是否预加载...--此处依照下面的路由配置,默认显示AComponent组件的内容--> 复制代码 (1)main-routing.module.ts里面配置文件夹main下的路由,需要引用各组件的component...引入各组件(包括自身、路由配置文件所用到的所有组件以及路由的module) import { FormsModule } from '@angular/forms'; import { CommonModule

    3.2K30

    教程| Angular 4 中加载功能模块(上)

    尽管 Angular 4 最初是为 JavaScript 而设计的,但它在 Angular 2 基础之上添加了对更多语言的支持,比如 Dart 和 Typescript。...请注意,本教程适用于熟悉使用 Angular 进行基本 Web 应用程序开发的开发人员。 Angular 的功能模块 单页 Web 应用程序启动时仅呈现一个 HTML 页面。...您可以引导根模块来启动 Angular 应用程序。对于小型应用程序,只需要根模块和一些组件。构建更复杂的到大型应用程序时,会向应用程序添加功能模块。...主应用程序的路径 打开文件 app-routing.module.ts,如下所示。...图 6. app-routing.module.ts 调用 /markets 和 /sports 路径时,会调用 MarketComponent 和 SportsComponent。

    2.2K10

    Angular 初始化显示出大括号语法的解决方法(ngCloak)

    在做angular的SPA开发时,我们经常会遇见如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。...angular为我们提供了ng-cloak来实现纺织闪烁的方案,我们只需要在需要的地方加上ng-cloak。...将带有ng-clock的的元素设置为display:none,隐藏掉,等到angular解析到带有ng-clock的节点时候,会把attribute和class同时remove掉,这样就可以实现防止节点的闪烁...$set('ngCloak', undefined); element.removeClass('ng-cloak'); } }); angular.js的最后一段代码能看见前面所说的增加...(如果你也遇见了加了ng-cloak还不起作用的话,那么试试直接引入css文件吧)

    1.5K10

    Angular 从入坑到挖坑 - 模块简介

    NgModule 简介 Angular 应用,至少会存在一个 NgModule,也就是应用的根模块(AppModule),通过引导这个根模块就可以启动整个项目 像开发中使用到 FormsModule...、HttpClientModule 这种 Angular 内置的库也都是一个个的 NgModule,开发通过将组件、指令、管道、服务或其它的代码文件聚合成一个内聚的功能块,专注于系统的某个功能模块...http 请求 JavaScript 模块与 NgModule JavaScript ,每一个 js 文件就是一个模块,文件定义的所有对象都从属于那个模块。...CrisisModule,定义了我们该特性模块创建的组件,以及需要使用到的其它模块 ?...每个组件都只能声明一个 NgModule 类,同时,如果你使用了未声明过的组件,Angular 将会报错 同样的,对于当前模块使用到的自定义指令、自定义管道,也需要在 declarations 数组中进行声明

    1.8K20

    Angular实战之使用NG-ZORRO创建一个企业级后台框架(进阶篇)

    前言:   上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业台组件库,并且快速构建后台管理页面框架模板。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。...修改项目默认调转页面,Angular应用多模块路由配置: 找到app-routing.module.ts文件,【routes】对象声明新模块路由,以及项目默认调转页面地址修改。 ?...2、配置首页组件路由(多模块路由完美解决): 首先,我们的博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件配置多个模块的路由...如下所示 前往【my-blog-routing.module.ts】文件配置上新创建的首页组件的路由。 ? 3、前往根模块【my-blog.module.ts】声明首页组件: ?

    3.9K20

    AngularDart4.0 英雄之旅-教程-07路由 顶

    更新pubspec 使用Angular路由(angular_router)启用导航。 由于路由器自己的包,首先将该包添加到应用的pubspec: ?...Angular注入HeroService,您可以DashboardComponent中使用它。 获取英雄 dashboard_component.dart,添加以下导入语句。...构造函数中注入HeroService,并将其保存在一个专用的_heroService字段。 调用服务来获取Angular ngOnInit()生命周期钩子的英雄。...仪表板或英雄列表中选择英雄不起作用。 你会接下来的处理。 选择一个仪表板英雄 当用户选择仪表板的英雄时,应用程序应该导航到HeroDetailComponent以允许用户查看和编辑选择的英雄。...应用程序结构和代码 查看此页面的实例(查看源代码)的示例源代码。 确认您具有以下结构: ? 你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由器来浏览不同的组件。

    17.5K30

    Angular学习(01)-架构概览

    组件与模板 Angular ,最常接触的应该就是组件了。 我是这么理解的,组件可以是你界面上看到的任何东西,可以是一个页面,可以是页面上的一个按钮。... Angular ,可以说,是以组件为单位来组成页面的,组件是核心,因为 Angular 提供的功能基本都是用来为组件服务的。 以上,是我的理解。...但在 Angular ,你可以借助它依赖注入的机制,来让 Angular 帮你去做这些依赖的对象的实例管理的事,如果需要一个全局的单例服务,那么可以将该服务声明成 root 即全局可用;如果需要一个模块内的单例...但在 Angular ,不用这么麻烦,直接在组件的构造函数的参数,声明某个服务类型的参数即可。 指令 指令也是为组件服务的,但是,是组件的模板文件来使用。...比如,我们新创建个 Home 模块,然后根模块创建个 app-routing 路由配置文件: //app-routing.module.ts import { NgModule } from '@angular

    3.6K50

    教程| Angular 4 中加载功能模块(下)

    您的任务是将新模块合并到主应用程序。 从应用程序源代码解压 Angular4LazyLoadModules 文件(位于 Angular4TutorialSrc.zip )。...要将新模块添加到基础应用程序,可以编辑 app-routing.module.ts,如下所示: 清单 1....幕后过程 继续操作之前,我们看看此加载机制的细节。首先在 Chrome 浏览器运行该应用程序。 Windows 机器上,按下 Fn+F12。 Mac 上,按下 Command->alt->i。... Chrome 浏览器重新加载该应用程序,然后转到 Chrome 开发人员工具的 Network 和 Sources 选项卡。...参见 Angular4PreLoadModules.zip 的示例应用程序,更详细地了解预加载。 自定义预加载:大型应用程序,仅预先加载少数惰性加载模块的做法是比较合理的。

    2.3K10

    Angular 从入坑到挖坑 - Router 路由使用入门指北

    一、Overview Angular 入坑记录的笔记第五篇,因为一直加班的缘故拖了有一个多月,主要是介绍 Angular 如何配置路由,完成重定向以及参数传递。...四、Step by Step 4.1、基础概念 4.1.1、base url Angular 应用,框架会自动将 index.html 文件的 base url 配置作为组件、模板和模块文件的基础路径地址...,因此我们可以直接在 app-routing.module.ts 文件完成路由的定义。...social', date: '2020-05-04' } }; this.router.navigate(['/news' ], query); } } 既然进行跳转时附加了参数信息... Angular ,需要在组件类依赖注入 ActivatedRoute 来获取传递的参数信息 这里的 queryParamMap 是一个 Observable 对象,所以这里需要使用 subscribe

    4.2K50

    阿克曼运动模型(ackermann)的一些资料-室外光电组参考资料

    检查优化反馈 本教程,学习如何检查优化轨迹的反馈; 提供了一个示例,其可视化当前所选轨迹的速度分布。...配置并运行机器人导航 本教程,学习如何将teb_local_planner设置为导航的本地规划程序插件。 避障和机器人轨迹模型 本教程,了解如何实现避障。...代价地图转换 本教程,学习如何应用costmap转换插件将已占用的costmap2d单元格转换为几何图元以进行优化(实验)。...规划类似汽车(ackermann)的机器人 本教程,学习如何为类似汽车的机器人设置计划器(实验)。 规划完整机器人 本教程,学习如何设置完整机器人的计划器(实验)。...考虑定制的障碍 本教程,学习如何将从其他节点发布的多边形障碍考虑在内。 考虑动态障碍 本教程,学习如何将从其他节点发布的动态障碍考虑在内。

    3.1K20

    JavaScript 框架大战已结束,赢家只有一个

    然而这还不是 Angular 的最大的问题,它最大的问题是碎片化和版本升级。升级版本非常困难,以至于用户不敢冒险升级其应用程序。 npm 官网可以看到有很多旧版本的用户。...但是 VueJS 版本 1 和版本 2 遇到了一个严重的问题:它不能很好地处理数组,作者指责 JavaScript 对更新算法的选择不佳。...你可以看到 AngularJS 可用的应用程序,但在 VueJS 却不行。 从理论上讲,这个问题在版本 3 得到了解决。但是,将自己的错误归咎于他人并不适合社区。...Mitosis 是由 Angular 的创建者 Misko Hevery 编写的最新框架。没错,它是 Misko Angular 之后创建的另一个框架。...React 它是最古老的现代框架之一, npm 存储库已经有 10 多年了。尽管它已经发生了很大的变化,但它仍然与以前的大多数版本兼容。所有的变化都变得更好了。

    1K30
    领券