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

在angular 1.6中,当url params中包含'@‘符号时,我的页面会崩溃

在Angular 1.6中,当URL参数中包含'@'符号时,页面会崩溃的原因是因为'@'符号在URL中具有特殊含义,被视为分隔符。为了解决这个问题,可以使用Angular的内置服务$location来处理URL参数。

首先,需要在控制器中注入$location服务:

代码语言:txt
复制
app.controller('MyController', ['$scope', '$location', function($scope, $location) {
  // 控制器代码
}]);

然后,可以使用$location服务的search()方法来获取URL参数,并进行处理。在处理之前,可以使用encodeURIComponent()方法对参数进行编码,以确保特殊字符被正确处理:

代码语言:txt
复制
app.controller('MyController', ['$scope', '$location', function($scope, $location) {
  var params = $location.search();
  var paramWithAtSymbol = params.paramName; // 假设参数名为paramName

  // 对参数进行处理
  var decodedParam = decodeURIComponent(paramWithAtSymbol);

  // 其他逻辑
}]);

通过以上代码,可以获取包含'@'符号的URL参数,并对其进行处理,避免页面崩溃的问题。

关于Angular 1.6的更多信息,您可以参考腾讯云的AngularJS产品文档:AngularJS产品介绍

请注意,本回答中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,以遵守您的要求。

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

相关·内容

react-03

SPA应用 单Web应用(single page web application,SPA) 整个应用只有一个完整页面 点击页面链接不会刷新页面, 本身也不会向服务器发请求 点击链接, 只会做页面的局部更新...path, 浏览器端前没有发送http请求, 但界面会更新显示对应组件 3....关于url# 1. 理解# '#'代表网页一个位置。其右面的字符,就是该位置标识符 改变#不触发网页重载 改变#会改变浏览器访问历史 2....相关API 1). react-router相关组件: Router: 路由器组件, 用来包含各个路由组件 Route: 路由组件, 注册路由 IndexRoute: 默认子路由组件 hashHistory...IndexRoute: 默认路由 父路由被请求, 默认就会请求此路由组件 5). hashHistory 用于Router组件history属性 作用: 为地址url生成?

2.4K30

使用Angular8和百度地图api开发《旅游清单》

大陆面主要展示你去过和即将要去路线,可以进行相关操作。...根模块提供了用来启动应用引导机制。一个应用通常会包含很多功能模块。 组件 每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树和页面 DOM 连接起来。...class Storage {} ``` 复制代码 路由 Angular Router 模块提供了一个服务,它可以让你定义应用各个不同状态和视图层次结构之间导航要使用路径。...,这里用来做存储第三方组件位置,定义好之后app.module.ts引入: // material组件库 import { CustomMaterialModule } from '....如果想了解完整代码,欢迎github上查看。 接下来看看我大陆面,其实涉及难点不是很多,主要是根据hasDone为true或false去显示不同样式。

6K30

深究AngularJS(3)——$res

如果设置参数值是函数,那么该函数将在每次获取其值被执行(有那么点废话意思)。...对于设置没有出现在url模板(第一个参数)参数,将会以search query方式添加,例如: 如果url模板为/codingcool/:author,paramDefaults为{author...下面再来看一下$resource返回值: 返回值类型是对象,它包含了和指定服务api(即url)进行互动所有方法,默认会包含如下默认方法:  { 'get':    {method:'GET'},...http服务~ 异步请求成功,数据从服务器端取回后,被封装到一个$resource服务一个对象实例,这个对象可以被save,remove,delete方法直接操作,这种封装并提供简单CRUD操作方式...save(params, payload, successFn, errorFn); save方法会发起一个post请求,params参数用来填充url变量,对象payload会作为请求体进行发送

1.1K10

爬取豆瓣书单100本

,反反复复一直运行真的好不容易看来要多加练习,然鹅现在还要学习csv操作,唉,好难,一度崩溃想哭。...这是没翻页url: 这是翻了一url: 所以我们可以分析出,我们翻页,只有start参数发生变化,表示是从第几本开始书,第一从0开始,第二从第25本书开始(也就是说一面有...25本书)...后面也以此类推,因此我们可以用param将参数封装在字典里传入get方法,他会自动帮我们把这些参数放入url,拼接成图片中那种url。...,方便后面的使用 for page in range(0, 76, 25): # 获取page分别是0,25,50,75 刚好4个页面,100本书 # 这里参数会被传入到url params...=url, headers=headers, params=params).text 接下来就是重头。

36310

hash和history路由模式

事件,可以event.state里获取 title:标题,基本没用,一般传 null url:设定新历史记录 url,新 url 与当前 url origin 必须是一样,否则会抛错,url...HTTP 请求,对服务端完全没有影响,因此改变 hash 不会重新加载页面 hash 模式下,仅 hash 符号之前内容会被包含在请求,如 http://website.com/#/login...只有#符号之前内容才会包含在请求中被发送到后端,也就是说就算后端没有对路由全覆盖,但是不会返回404错误 hash值改变,都会在浏览器访问历史增加一个记录,所以可以通过浏览器回退、前进按钮控制...单应用 当我们浏览器地址栏输入一个地址,浏览器就会去服务端去请求内容。但每次点击一个链接,就去服务端请求,这样会有页面加载等待。...后来慢慢就出现了单应用,第一次访问,就把 html 文件,以及其他静态资源都请求到了客户端。之后操作,只是利用 js 实现组件展示和隐藏。除非需要刷新数据,才会利用 ajax 去请求。

12810

使用 Angular Transfer State 一个具体例子

我们有一个天气应用程序,在其侧边栏显示城市列表。 您单击城市名称,该应用程序会显示该城市的当前天气。...这些页面将包含浏览器应用程序,因此用户可以加载第一后使用 Angular 强大功能继续应用程序中导航。 您可以按照以下步骤尝试这个简单示例。...TransferState to the rescue Angular v5 引入 TransferState API 可以帮助解决这种情况。...它可以将数据从应用程序服务器端传输到浏览器应用程序。 为此,服务器应用程序将在它生成 HTML 页面添加我们要传输数据。 包含在此生成 HTML 页面浏览器应用程序将能够读取此数据。...,所以浏览器显示以下页面会调用onSerialize方法,但是这个方法没有效果,因为toJson只服务端调用。

65700

前端知识点总结vue篇(下)

Vue,Angular,React前端三大框架巨头,重要性不用多说,不过目前项目开发主要用vue,现总结了一些Vue常用知识点。 1....(因为history模式改变URL方式会导致浏览器向服务器发送请求,因此要在服务器端 做处理,如果URL匹配不到任何静态资源,应该返回同一个index.html页面,这个页面就是app依赖页面,访问二级页面...b.假设首页进入详情,如果用户首页每次点击都是相同,那么详情就没必要重复请求,直接缓存起来。 如果点击不是同一个,则直接请求。...高 d.对应两个钩子函数 activated 和 deactivated ,组件被激活,触发钩子函数activated,组件被移除,触发钩子 函数 deactivated。...直白来说 query相当于get请求, 而params相当于post请求 24.vue set()方法 vue,当我们像对象添加属性,数据变化时,页面也要随着变化,这时用到set() set

29820

【路由】:路由那些事——上

我们把页面间(即组件间)切换与浏览器地址栏 URL 变换关联起来(例如:根据浏览器地址栏变化切换页面),这就是前端路由。...路由基本原理 前端三杰 Angular、React、Vue 都推荐单页面应用 SPA 开发模式,它们都有自己前端路由解决方案: Angular:@angular/router React:react-router...Hash Hash —— 即地址栏 URL # 符号。路由里 # 我们称之为 hash。 ?...其右面的字符,就是该位置标识符。而且第一个 # 后面出现任何字符,都会被浏览器解读为位置标识符。 HTTP请求不包括 #。#是用来指导浏览器动作,对服务器端完全无用。...允许不刷新页面的前提下,通过脚本语言方式来进行页面上某块局部内容更新。这些方法通常与 window.onpopstate 配合使用。 示例: ? <!

1.8K40

HarmonyOS开发学习(1)–多页面开发

单实例模式下:如果目标页面的url页面栈已经存在同url页面,离栈顶最近同url面会被移动到栈顶,移动后页面为新建,原来页面仍然存在栈,页面栈元素数量不变;如果目标页面的url页面栈不存在同...页面栈元素数量较大或者超过32,可以通过调用router.clear()方法清除页面栈所有历史页面,仅保留当前页面作为栈顶页面。...router.pushUrl({ url: 'pages/Second', params: { src: 'Index页面传来数据', } }, router.RouterMode.Single...与pushUrl()不同是,该方法会将目标页面替换当前页面,旧页面会被销毁: router.replaceUrl({ url: 'pages/Second', params: { src...Record)['src']; // 页面刷新展示 // ... } 页面返回和参数接收 我们可以调用router.back()方法来实现返回到上一个页面,同时也可以调用该方法增加可选

11810

angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)

使用 NG ZORRO 在上一篇文章,我们已经安装了NG ZORRO,并在跟模块引入了,子模块中使用还需要再次引入。...编辑layout模块header组件 layout.module.ts引入NG ZORRO import { NgZorroAntdModule } from 'ng-zorro-antd...展开二级菜单时候报错了 app.module.ts引用 import { BrowserAnimationsModule } from '@angular/platform-browser/...简单实现 添加点动画效果 定义两组动画:入场浮动动画,点击喜欢动画效果 share文件夹下添加一个动画效果文件animations.ts。...加入动画效果 有动画使用相关疑惑可以参考这篇文章及其相关文章:Angular练习之animations动画 源码下载 思考 angular模块,组件,普通ts文件之间关系和区别。

1.6K30

Angular路由实现原理

基于hash通过将一个URL path部分用 # (Hash符号) 拆分。浏览器将 # 后面的部分视作虚拟片段。早期前端路由实现是基于 location.hash来实现。...他有如下特性:URL hash值改变不会被触发页面的重载。页面发送请求, hash 部分不会被发送。hash 值改变,会记录在浏览器历史记录,可使用浏览器“后退”,“前进”触发页面跳转。...监听hashchange事件,hash改变触发。并且页面打开也同样触发一次。<!...Angular路由实现已经了解了基本原理,那么Angular路由又是怎么实现呢。到github上下载了angular路由实现源码。...之前做过一个前端获取ip需求,封装getUserIP方法入参是一个回调函数,回调函数里调用navigate调用失败,后面也是通过设置ngZone.run()来解决,这下原理终于搞清楚了,原来是执行上下文问题

75910

【转载】【ionic+angularjs】angularjs ui-router路由简介

有lossy(第一个参数url未被提供是否继承导航url进行构建href),inherit(是否继承当前url参数),relative(变化相对路径:如"^,定义状态是相对),absolute...$stateProvider 处理路由状态服务,路由状态反映了该项应用程序位置,描述了在当前状态下UI是应该怎么样,并且该做什么。...这个文件,且angular.min.js必须导入angular-ui-router.min.js前面。...通过views实现多视图 多个示图,使用views属性。该属性里包含了哪些ui-view,则对应template或templateUrl里内容就会填充该ui-view。...ngRouteresolve选项可以允许开发者路由到达前载入数据保证(promises)。使用这个选项比使用angular-route有更大自由度。

7.4K70

【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)

有lossy(第一个参数url未被提供是否继承导航url进行构建href),inherit(是否继承当前url参数),relative(变化相对路径:如"^,定义状态是相对),absolute...$stateProvider 处理路由状态服务,路由状态反映了该项应用程序位置,描述了在当前状态下UI是应该怎么样,并且该做什么。...这个文件,且angular.min.js必须导入angular-ui-router.min.js前面。...通过views实现多视图 多个示图,使用views属性。该属性里包含了哪些ui-view,则对应template或templateUrl里内容就会填充该ui-view。...ngRouteresolve选项可以允许开发者路由到达前载入数据保证(promises)。使用这个选项比使用angular-route有更大自由度。

7.2K40

Angular2学习记录-给后端程序员经验分享

1.前言 前几天刚下定决心把毕业设计改造下,因为毕业设计算是学习基石,学习到东西都尽可能在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后端只提供接口.便于以后维护.那么就要学习...,self并不受angular管理,导致刷新变量是selfisBackColor. 3.2http参数传递 按照下面代码传参数应该是没有问题,但是遇到了url被编码问题,例如输入`1111@qq.com...路由匹配规则是从根路由也就是forRoot()这个开始.该处匹配寻找规则....} 链接:http://domain/article/1 路由:[routerLink]="['article',article.id]"或者直接拼接url js获取:this.route.params...一系列方法,或者this.route.snapshot.params['id'] — 问号参数风格 配置:{path:'article',component:ArticleComponent} 链接

3.1K20

Angular核心-路由和导航

中使用单应用步骤 (0.)准备整个应用需要路由组件 ng g component index ng g component product-list ng g component product-detail...-需要“路由器”服务 this.router.navigateByUrl('/plist') } 路由传参:实际应用在在商品详情查看某一个 路由词典:pdetail/:lid,包含可变参数...()函数里边实现读取当前路由地址参数: ngOnInit(): void { //组件初始化完成,读取路由参数,进而根据此参数做操作 //Observable对象必须订阅使用...= date['lid']; }) } 路由嵌套: 一级路由: index: 首页 user/center:用户中心 二级路由: user/center/info:用户中心》信息...视频播放,只能在学校内播放(客户ip地址限制) VIP学员视频播放,只能在13:30-22:00间播放… Angular提供了“路由守卫(Guard)”来访问路由组件前检查功能:如果检查通过(return

2.2K20

AngularJS应用页面切换优化方案

AngularngView及其对应强大路由机制,是实现SPA应用核心模块。本文所说页面切换指就是这个路由机制,即根据不同URL展示不同视图。...如果未做任何处理,那么页面会先加载新页面的html模版,但此时模板数据model还并没有被请求,因此会有一段时间显示空数据,非常影响用户体验。...在这里用了express来代替原来http-server,并在客户端请求数据延迟5秒再做出响应: ?...使用resolve来提前请求数据 遇到这个问题最先想到就是添加一个loading提示:在网络请求前显示loading遮罩图片,网络请求结束后再将其隐藏。...将手机详细信息页面的路由配置代码修改如下: 151029333868656.png 在上面的代码只能使用$route.current.params来获取phoneId参数,因为此时页面还未跳转,

1.9K100

【Hybrid开发高级系列】AngularJS(三)——开发实践

适用本教程Yeoman, Bower和Grunt版本     安装Yeoman生成器         传统Web开发流程,你可能会花很多时间配置代码模板、下载依赖还有手动组件项目文件结构上。...(当你试用空格效果,确保所有的模块都被标记为绿色)         好,现在按下回车键。...实现返回前一 http://blog.csdn.net/qianqianyixiao1/article/details/51146519 AngularJs返回前一刷新一次前面页面 http:...原因分析:         AngularJS中注入依赖,本质上也是根据类名去寻找对应类代码逻辑地址,如果有多个对象注入,初始化方法,必须是按照注入顺序传递进来,因为JS是无类型,切记切记。...原因分析:         controller加载,碰到登录失效,虽然要跳转到登录,但是当前runloop周期内,还是应该继续执行剩余代码,因为事件绑定逻辑都要执行完,不然页面回退回来,就会发现事件无法响应

23420
领券