Questions tagged «angular-routing»

ngRoute模块为AngularJS应用程序提供路由和深层链接服务和指令。

22
如何基于AngularJS部分视图动态更改标头？
我正在使用ng-view来包含AngularJS部分视图，并且我想根据所包含的视图来更新页面标题和h1标头标签。但是，这些超出了部分视图控制器的范围，因此我无法弄清楚如何将它们绑定到控制器中的数据集。 如果是ASP.NET MVC，则可以使用@ViewBag来执行此操作，但我不知道AngularJS中的等效方法。我已经搜索了有关共享服务，事件等的信息，但仍然无法正常运行。任何修改我的示例使其可行的方法将不胜感激。 我的HTML： <html data-ng-app="myModule"> <head> <!-- include js files --> <title><!-- should changed when ng-view changes --></title> </head> <body> <h1><!-- should changed when ng-view changes --></h1> <div data-ng-view></div> </body> </html> 我的JavaScript： var myModule = angular.module('myModule', []); myModule.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/test1', {templateUrl: 'test1.html', controller: Test1Ctrl}). when('/test2', {templateUrl: 'test2.html', …
24
使用AngularJS HTML5模式重新加载页面会给出错误的GET请求
我想为我的应用启用HTML5模式。我已经把下面的代码的配置，如图所示在这里： return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) { $locationProvider.html5Mode(true); $locationProvider.hashPrefix = '!'; $routeProvider.when('/', { templateUrl: '/views/index.html', controller: 'indexCtrl' }); $routeProvider.when('/about',{ templateUrl: '/views/about.html', controller: 'AboutCtrl' }); 如您所见，我使用，$locationProvider.html5mode并且更改了所有的链接ng-href以排除/#/。 问题 目前，我可以转到localhost:9000/并查看索引页面，然后导航到其他页面，例如localhost:9000/about。 但是，刷新localhost:9000/about页面时会出现问题。我得到以下输出：Cannot GET /about 如果我看网络通话： Request URL:localhost:9000/about Request Method:GET 如果我先进入localhost:9000/然后单击导航到的按钮，/about我会得到： Request URL:http://localhost:9000/views/about.html 完美呈现页面。 刷新时如何启用angular以获得正确的页面？
19
如何从Angular 5中的URL获取查询参数？
我使用的是angular 5.0.3，我想使用一堆查询参数来启动我的应用程序/app?param1=hallo&param2=123。如何从Angular 2中的url获取查询参数中给出的每个技巧？对我不起作用。 任何想法如何获取查询参数的工作？ private getQueryParameter(key: string): string { const parameters = new URLSearchParams(window.location.search); return parameters.get(key); } 这个私有函数可以帮助我获取参数，但是我认为这不是在新的Angular环境中正确的方法。 [更新：]我的主应用看起来像 @Component({...}) export class AppComponent implements OnInit { constructor(private route: ActivatedRoute) {} ngOnInit(): void { // would like to get query parameters here... // this.route... } }
4
$ location /在html5和hashbang模式之间切换/链接重写
我给人的印象是Angular会重写出现在临时模板中定位标记的href属性中的URL，以便无论在html5模式还是hashbang模式下它们都可以工作。定位服务的文档似乎说HTML链接重写可以解决hashbang的问题。因此，我希望当不在HTML5模式下时，将插入哈希，而在HTML5模式下，则不会。 但是，似乎没有进行任何重写。以下示例不允许我仅更改模式。应用程序中的所有链接都需要手工重写（或在运行时从变量派生。我是否需要根据模式手动重写所有URL？ 我没有看到在Angular 1.0.6、1.1.4或1.1.3中进行任何客户端url重写。似乎所有的href值都必须在＃/之前添加为hashbang模式，在//之前添加为html5模式。 是否需要一些配置才能引起重写？我在读文档吗？还在做傻事吗？ 这是一个小例子： <head> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script> </head> <body> <div ng-view></div> <script> angular.module('sample', []) .config( ['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { //commenting out this line (switching to hashbang mode) breaks the app //-- unless # is added to the templates $locationProvider.html5Mode(true); $routeProvider.when('/', { template: 'this is home. go …
5
angularjs 1.6.0（现在最新）路由不起作用
我期待在Stackoverflow上看到这个问题，但是没有。显然，我是唯一出现此问题的人，在我看来这很普遍。 我正在执行一个基本项目，但是即使到目前为止我所做的一切似乎都是正确的，但是路线似乎也没有用。 我的文件中有这段html index.html： <html> <head ng-app="myApp"> <title>New project</title> <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script> <script src="app.js"></script> </head> <body> <a href="#/add-quote">Add Quote</a> <div ng-view ></div> </body> </html> 这是我的app.js： var app = angular.module('myApp', ['ngRoute']); app.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/add-quote', { templateUrl: 'views/add_quote.html', controller: 'QuoteCtrl' }) .otherwise({ redirectTo: '/' }); }]); 现在，当我刚访问页面时，这是我从URL中获得的内容： http：// …
5
角度4单元测试错误`TypeError：ctor不是构造函数`
我正在尝试测试我的路由解析器，而在测试TypeError: ctor is not a constructor时却不知道为什么打字稿编译时不会出错。 TypeError: ctor is not a constructor TypeError: ctor is not a constructor at _createClass (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42355:26) at _createProviderInstance$1 (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42330:26) at resolveNgModuleDep (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42315:17) at _createClass (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42362:26) at _createProviderInstance$1 (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42330:26) at resolveNgModuleDep (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42315:17) at NgModuleRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgModuleRef_.get (http://localhost:9877/_karma_webpack_/vendor.bundle.js:43401:16) at TestBed.webpackJsonp../node_modules/@angular/core/@angular/core/testing.es5.js.TestBed.get (http://localhost:9877/_karma_webpack_/vendor.bundle.js:48412:47) at http://localhost:9877/_karma_webpack_/vendor.bundle.js:48418:61 at Array.map (native)
11
如何从子路线导航到父路线？
我的问题很经典。我在后面有一个应用程序的私有部分login form。登录成功后，它将转到管理应用程序的子路由。 我的问题是我无法使用，global navigation menu因为路由器会尝试以我的路由AdminComponent而不是我的路由AppCompoment。所以我的导航坏了。 另一个问题是，如果有人想直接访问URL，我想重定向到父级“登录”路由。但是我不能使它工作。在我看来，这两个问题是相似的。 知道如何做到吗？
3
如何在所有路线上应用canActivate Guard？
我有一个angular2主动防护，如果用户未登录，它将进行处理，将其重定向到登录页面： import { Injectable } from "@angular/core"; import { CanActivate , ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router"; import {Observable} from "rxjs"; import {TokenService} from "./token.service"; @Injectable() export class AuthenticationGuard implements CanActivate { constructor ( private router : Router, private token : TokenService ) { } /** * Check if the user …
4
在angular 4中为不同页面设置不同布局的最佳方法
我刚接触angular4。我想要实现的是为应用程序中的不同页面设置不同的布局页眉和页脚。我有三种不同的情况： 登录，注册页面（无页眉，无页脚） 路线：['登录'，'注册'] 营销站点页面（这是根路径，并且具有页眉和页脚，大多数这些部分在登录之前出现） 路线：[''，'关于'，'联系'] 应用程序登录页面（本节中所有应用程序页面的页眉和页脚都有不同，但是此页眉和页脚与营销网站的页眉和页脚不同） 路线：['dashboard'，'profile'] 我通过在路由器组件html中添加页眉和页脚来临时运行该应用程序。 请告诉我一个更好的方法。 这是我的代码： app \ app.routing.ts const appRoutes: Routes = [ { path: '', component: HomeComponent}, { path: 'about', component: AboutComponent}, { path: 'contact', component: ContactComponent}, { path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent }, { path: 'dashboard', component: DashboardComponent …
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.