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

AngularJS在路由到新页面后使用.run会导致问题

AngularJS是一种流行的前端开发框架,它提供了一种简单而强大的方式来构建动态Web应用程序。在AngularJS中,路由是一种用于管理不同页面之间导航的机制。当我们使用路由导航到一个新页面时,可以使用.run方法来执行一些初始化操作。

然而,使用.run方法在路由到新页面后可能会导致一些问题。这是因为.run方法只会在应用程序启动时执行一次,而不会在每次路由导航后重新执行。因此,如果我们在.run方法中执行一些需要在每个页面加载时执行的操作,这些操作将不会被触发。

为了解决这个问题,我们可以使用AngularJS提供的其他机制来执行在每个页面加载时需要执行的操作。一种常见的方法是使用AngularJS的控制器(Controller)。控制器可以与特定的视图关联,并在每次视图加载时执行。通过将需要在每个页面加载时执行的操作放在控制器中,我们可以确保这些操作在每次路由导航后都会被触发。

另外,如果我们需要在路由导航后执行一些全局操作,可以考虑使用AngularJS的事件机制。AngularJS提供了一些事件,如$routeChangeStart、$routeChangeSuccess等,可以在路由导航过程中触发。我们可以通过监听这些事件,并在事件触发时执行相应的操作。

总结起来,当使用AngularJS进行路由导航时,应避免在.run方法中执行需要在每个页面加载时执行的操作。相反,可以考虑使用控制器或事件机制来实现这些操作。

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

相关·内容

AngularJS应用页面切换优化方案

有一种非常常见的场景:切换至新页面,需要通过AJAX调用从服务器请求一些数据,然后根据这些数据来展示页面。...使用resolve来提前请求数据 遇到这个问题时,我最先想到的就是添加一个loading提示:在网络请求前显示loading遮罩图片,网络请求结束再将其隐藏。...Resolve参数可以注入一组service路由绑定的controller之中。如果其中的一个或多个service是异步对象($q.defer)时,那么只有当这些异步操作都完成,页面才会跳转。...利用这一点,我们就可以页面跳转前先将手机详细信息数据请求本地。跳转,目标页面就会立即正常显示数据。...应用中,为了获得良好的用户体验,就要在界面上使用一些技巧让用户不会感觉突兀。

1.9K100

第220天:Angular---路由

2005左右,兴起了一种叫做ajax的技术,有了ajax之后,我们向服务端提交数据的时候就不再需要使用from表单去提交了,因为from表单之间的提交会导致页面之间的切换,也就是说无法实现单页应用。 ..., angularJS不再像以前一样,把所有的文件都合在angular.js这个文件里面,  而是切分成一个个独立的js文件了, 所以这就导致了当我们需要使用路由的时候,一定要在页面上手动导入angular-route.js...1 如果你忘了加,浏览器可能提示routeProvider不是对象或者没找到,如果你发生这个问题...前端路由基本原理 哈希#  可以实现,浏览器不刷新页面,实现url地址的变化,大部分浏览器均可支持 HTML5中history API  我们可以通过js代码去修改URL地址栏里面的地址,这样的话,浏览器留下历史记录...,但是页面不会跳转 路由的核心是给应用定义“状态” 使用路由机制影响应用的整体编码方式(需要预先定义好状态) 考虑兼容性问题与“优雅降级”  检查浏览器,如果浏览器比较旧会使用哈希的方式,如果是新的浏览器会使用

1.9K40
  • 深入了解 AngularJS 路由的原理和使用技巧

    通过使用ngRoute模块,我们可以轻松地配置和定义路由,以及处理各种导航事件。1.3 路由的好处使用路由机制的好处有很多。首先,它能够实现无刷新页面加载,提供良好的用户体验。... AngularJS 中,可以使用 config 函数来配置路由,并使用 $routeProvider 服务来定义具体的路由规则。...通过设置链接的 href 属性或者与 ngRoute 模块一起使用,我们可以实现在不刷新页面的情况下切换路由。3.2 控制器和模板每个路由可以关联一个控制器和一个模板。...例如,$routeChangeStart 事件路由切换开始前触发,$routeChangeSuccess 事件路由切换成功触发。我们可以通过监听这些事件,执行一些前置或后置操作。...第四部分:进阶技巧4.1 路由参数有时候,我们需要将一些参数传递给路由 AngularJS 中,可以通过URL中使用占位符,并在路由规则中使用 :paramName 来定义路由参数。

    19310

    从大的角度看AngularJS,原来如此强大

    通过依赖注入机制,我们可以轻松地组件中使用这些服务,并实现代码的解耦和复用。2.5 路由路由是用于实现单页面应用程序中页面跳转和导航的机制。... AngularJS 中,我们可以使用 $routeProvider 来配置路由规则,指定不同 URL 对应的视图和控制器。通过路由,用户可以应用程序中浏览不同的页面,而不需要进行整个页面的刷新。...SPA 是指在加载初始页面,所有的后续页面切换都是通过异步加载数据和局部更新页面来实现的,用户无需重新加载整个页面。...AngularJS 提供了路由和模板机制,使得开发者可以很方便地构建复杂的单页面应用程序。3.2 测试AngularJS 提供了强大的测试支持,可以进行单元测试、端端测试和集成测试等。...通过使用 AngularJS 提供的测试工具和框架,开发者可以编写可靠的测试代码,确保应用程序的质量和稳定性。3.3 性能优化大型应用程序中,性能优化是一个重要的问题

    16120

    什么是前端路由

    前端路由很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。...当用户使用 http://10.0.0.1/about 来访问该页面时,Web 服务接收到这个请求,然后会解析 URL 中的路径 /about, Web 服务的程序中,该路径对应着相应的处理逻辑,程序会把请求交给路径所对应的处理逻辑...以前路由都是后台做的,通过用户请求的url导航具体的html页面,前端路由就是通过配置js文件,把这个工作拿到前端来做。...而前端路由访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。...2.某些场合中,用ajax请求,可以让页面无刷新,页面变了但Url没有变化,用户就不能复制想要的地址,用前端路由做单页面网页就很好的解决了这个问题 缺点: 使用浏览器的前进,后退键的时候重新发送请求

    1.7K110

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

    适用本教程的Yeoman, Bower和Grunt版本     安装Yeoman生成器         传统的Web开发流程中,你可能花很多时间配置代码模板、下载依赖还有手动组件项目文件结构上。...generator-angular询问你需不需要使用Sass和/或者Bootstrap,使用’n'和’y'进行选择。         然后你需要选择你需要使用的Angular模块。...scope.on(' scope.watch(' 1.3.6 依赖注入的顺序与方法参数的引用属性必须保持一致         如上图就是错误写法,这样导致构造方法入参类型是错的!!!     ...回退到页面,页面事件响应失效问题     问题:         从购买页面做重定向登录页,再从登录页登录成功回到购买页面,购买页面的事件响应失效。     ...1.html 简介AngularJS中$http服务的用法 http://www.jb51.net/article/79243.htm AngularJS使用路由和$location切换视图 http

    24720

    【Hybrid开发高级系列】AngularJS(一)——基础专题

    内聚是指模块或者对象内部的完整性,一组紧密联系的逻辑应该被封装在同一模块、对象等代码单元中,而不是分散各处;耦合则指模块、对象等代码单元之间的依赖程度,如果一个模块的修改,影响另一个模块,则说明这两模块之间是相互依赖紧耦合的...作为一个命名习惯,AngularJS内建服务,作用域方法,以及一些其他的AngularJS API都在名字前面使用一个‘’前缀。不要使用‘’前缀来命名你自己的服务和模型,否则可能产生名字冲突。...另一种方法也可以用来指定依赖列表并且避免压缩问题——使用Javascript数组方式构造控制器:把要注入的服务放 一个字符串数组(代表依赖的名字)里,数组最后一个元素是控制器的方法函数: var PhoneListCtrl...注意第二条路由声明中:phoneId参数的使用。route服务使用路由声明/phones/:phoneId作为一个匹配当前URL的模板。...2.7.2 UI-Router 2.7.2.1 前端路由的基本原理     • 哈希#     • HTML5中新的history API     • 路由的核心是给应用定义"状态"     • 使用路由机制影响应用的整体编码方式

    53980

    第217天:深入理解Angular双向数据绑定的原理

    很多时候我们不可能每次更新数据便刷新页面(get请求),而是通过向后端请求相关数据,并通过无刷新加载的方式进行更新页面(post请求)。...那么数据进行更新,页面上相应的位置也能自动做出对应的修改,便是数据绑定。 以前的开发模式中,这一步一般通过jq操作DOM结构,从而进行更新页面。但这样带来的是大量的代码和大量的操作。...{{}}:与ng-bind功能相同,区别在于页面未完全渲染完之前模板语言直接显示页面中,可通过html标签中加上ng-cloak解决这一问题。...; 视图上的数据发生变化过后自动同步模型上; 三、开始编写一个简单的AngularJS demo 写代码之前我们先来认识以下这几条指令: 1.ng-app = “modulename ” 申明:ng-app...控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。

    3.6K20

    2016 年 7 个顶级 JavaScript 框架

    ValueCoders进行了彻底的研究,我们入围了其中七个顶级框架,它们是: 1.AngularJS 2.0&1.x 最受期待的AngularJS 2.0正式发布之后,框架的普及已经达到了一个新的水平...然而,与AngularJS相比,ReactJS测试简单性和组件结构方面略显不足。此外,这并不使得ReactJS逊于AngularJS。...它提供了使用“one language everywhere”的灵活性。 此外,Meteor特别适合于那些想要构建实时web app的开发人员。所有从数据库模板的app层都会自动更新。...因此,用户不需要刷新页面以查看更新。就像你Linkedin帖子下面评论了之后就能看到那样。...其中有一个原因是Ember.js的路由允许你停止阻塞web。使用Ember,你可以获得URL和具备由你创建的每个路径的默认后退按钮,并且API易于使用

    4.3K10

    AngularJS 多视图应用中的登录认证

    AngularJS 多视图应用中的登录认证 AngularJS 的多视图应用中, 一般都有实现登录认证的需求, 最简单的解决方法是结合服务端认证, 做一个单独的登录页面, 登录完成之后再跳转回来,... AngularJS 应用中, 都有一个唯一的变量 rootScope 当切换视图时, rootScope 广播事件 angular // 声明应用程序模块 .module('app', ['ngRoute..., 并且没有认证, 则重定向 login 页面 if (!...$on('$routeChangeStart', onRouteChangeStart); }); 这样, AngularJS 开始切换视图时 ($routeChangeStart) 会调用 (onRouteChangeStart...) 函数进行检查, 如果要切换的路由不允许匿名访问, 则会重定向路由中定义的 /login 对应的视图。

    2.7K20

    再谈location与history之跳转转态监控—router的两种实现模式

    浏览器的历史记录中就会生成一条新记录,用户通过单击"后退"按钮都会导航前一个页面。...要禁用这种行为,可以使用location.replace(URL)方法结果虽然导致浏览器位置改变,但不会在历史记录中生成新记录。...如果有 POST 数据提交,则会重新提交数据;如果想要刷新当前的页面,又避免 POST 数据提交,可以使用:window.location.replace( location.href );不刷新当前页面更新内容前端改变浏览器地址而不刷新页面...HTTP头部使用,改变state创建的XMLHttpRequset对象的referrer都会被改变。...参考文章:从了解Hash和Html5 History 简单实现路由 https://segmentfault.com/a/1190000019991267HTML5 history详解 https:/

    2.4K10

    Angular企业级开发(5)-项目框架搭建

    所以大多数团队基于Angular-Seed项目来开发,本文首先分析angular-seed项目的目录结构。以及AngularJS团队为我们做了什么事情,提供了我们真实开发最需要的框架结构。...这个项目仅仅是一个典型的AngularJS网络应用程序的应用程序骨架。 您可以使用它来快速引导您的Angular webapp项目和搭建开发环境。...AngularSeed Github地址 1.1 angular-seed优点 提供一个基本的SPA应用的基本框架 使用了npm来安装npm模块,集成bower安装第三方类库和插件 集成单元测试和端端测试环境...End to End测试 npm start npm run update-webdriver npm run protractor 项目不是很复杂的情况,Angular Seed提供框架能满足实际项目开发...3.小结 目前使用AngularJS进行项目开发的团队和个人,基本上项目框架搭建的时候参考以上2种框架,实际在后期开发过程中,会发现这2个框架会有一些共同问题,比如文件按需加载,框架没有一开始就很好的支持路由

    1.4K60

    面试:第四章:项目介绍

    秒杀和团购业务实现思路 将商品数量查询出存入redis中,所有用户下单,减掉redis中的数量 如果并发量很大时,还要考虑高并发问题,所以可以加入mq消息中间件处理抢单问题,再结合redis实现库存减少操作...Tomcat+nginx 项目中遇到什么问题? ES高亮不能显示的问题 前台使用angularJS加载搜索结果,但是发现高亮不能展示。...问题原因:angularJS底层使用ajax,异步加载高亮信息返回给页面,页面没有刷新,就直接显示返回的数据。此时会把所有的数据作为普通的文本数据进行加载。因此就没有高亮的效果。...最终发现是spring的jmsTemplate与activemq的prefetch机制配合导致问题。...那么数据进行更新,页面上相应的位置也能自动做出对应的修改,便是数据绑定。 以前的开发模式中,这一步一般通过jq操作DOM结构,从而进行更新页面。但这样带来的是大量的代码和大量的操作。

    58961

    如何在 ASP.NET MVC 中集成 AngularJS(1)

    最终,大量的研究和反复试验和失败,我想出了少量代码却行之有效的解决方案。 本文的接下来部分将会展示, ASP.NET MVC 中集成 AngularJS 的过程。... HTML5 模式下,AngularJS 的$位置服务使用 HTML5 History API 的浏览器 URL 地址进行交互。...本质上,索引 Razor 视图应用程序的引导过程中被简单的使用,并且应用程序启动不会被引用。...如果你还想直接运行这个页面,则需要解决这一问题,给 MVC 路由表增加另外的路由以便告诉 MVC 将所有的请求路由 MVC 主控制器,并渲染Razor 视图、通过路由引导这个应用。...由于我有三个视图文件夹,主文件夹、客户文件夹和产品文件夹,我增加了一下的 MVC 路由配置类以便将所有的请求路由主/索引路由中。当应用程序运行时点击 F5,同样也进入 MVC 路由表。

    7.6K60

    必备!十款 Chrome 编程扩展工具,你少了哪个?

    React Developer Tools React Developer Tools,可以 Chrome 和 Firefox 开发者工具审查 React 组件的浏览器扩展。 3....AngularJS Batarang AngularJS Batarang 是适用于 Chrome 的 AngularJS WebInspector 扩展。...AngularJS Batarang 是开发者工具扩展,用来调试和分析 AngularJS 应用。...4. ng-inspector for AngularJS ng-inspector for AngularJS 是一个「检查元素」面板中显示当前页面实时 AngularJS 范围层次结构、以及它的控制器或指令与范围相关的浏览器扩展...LiveReload LiveReload 监控你指定的目录中文件,如果有文件被更改,它就自动触发浏览器刷新页面,这样我们不用每次修改文件,都要去按下 F5 刷新页面

    83280

    从Web演化史看前后端分离

    但是随着业务的复杂复杂度的不断增加,难以避免遇到一些典型的问题: 1. 处理业务逻辑的服务越来越多,调用关系变得复杂,前端开发人员有时只想简单的修改下样式,可能需要起很多项目,效率低下。...虽然这一定程度上可以让后端不用关注前端代码,但是此方案带来的沟通成本必然增加,也有可能因为后端缺乏一定的前端知识导致模板使用错误,前后端职责仍然不是很清晰。 2....由于MVC中,Controller担任了控制器,路由的角色,这就导致前端添加路由信息依赖后端,而事实上,路由往往是前端需要关注的事情。...AngularJS是一个比较完善的前端MVC框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能; 4....React使用很新颖的方式,结合Virtual Dom解决手动操作DOM的问题,开发者只需要声明地定义各个时间点的用户界面,而无需关心在数据变化时,需要更新哪一部分DOM。

    2.9K60

    AngularJS应用中实现认证授权

    AngularJS应用中实现认证授权 每一个严肃的应用中,认证和授权都是非常重要的一个部分。单页应用也不例外。应用并不会将所有的数据和功能都 暴露给所有的用户。...安全路由 我们需要在应用中设置一些安全路由。如果一个用户没有登录同时想要进入某一个安全路由中,他应该被重定向登录页。我们可以使用路由选项中的resolve来实现这个功能。...通过或者拒绝路由的原因有很多种。在这里的情形中,你可以解析/拒绝一个promise的时候传递一个对象。我们服务中还没有实现getLoggedInUser()方法。...我们将监听$routeChangeError事件并将用户重定向 登录页上。由于事件是$rootScope层级上,最好在run函数中绑定事件处理器。...if (eventObj.authenticated === false) { $location.path("/login"); } }); }]); 处理页面刷新 当用户刷新页面

    2.1K70

    干货 | 关于前端构建大型知识应用,你知道多少?

    2.1路由管理 路由管理其实主要是当我们的项目变大方便管理,同时为了项目体验问题而引入的解决方案。毕竟我们产品设计都比较成熟,对用户来说刷新页面会丢掉页面状态,这样的体验是是太糟糕了。...我们规划项目路由的时候,推动我们对项目业务、功能区块化有更加深入的认识和理解。...同时对我们的项目结构规划也有很大的帮助,我们可以根据路由来放置我们的代码文件,有了这样的约定,我们维护他人代码的时候,便能迅速地定位对应的位置。...我们可以把首屏相关的东西打包 bundle,其他模块分块打包 chunk,来需要的时候再进行加载。 路由异步加载 通常情况下,我们结合路由进行分块打包,路由管理工具大部分都支持异步加载。...我们可以根据自己需要,来打包成多个文件,路由进入的时候才获取和加载。Vue 的话可参考《Vue2使用笔记17–路由懒加载》,打包效果像这样: ?

    1.1K10
    领券