我使用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', controller: Test2Ctrl}).
otherwise({redirectTo: '/test1'});
}]);
function Test1Ctrl($scope, $http) { $scope.header = "Test 1";
/* ^ how can I put this in title and h1 */ }
function Test2Ctrl($scope, $http) { …javascript templates partial-views angularjs angular-routing
我想为我的应用启用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会重写在tempaltes中的锚标记的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 to <a href="/about"/>about</a>'
});
$routeProvider.when('/about', {
template: 'this is about. go to <a href="/"/>home</a'
});
}
])
.run();
</script>
</body>
附录:在重新阅读我的问题时,我发现我使用了"重写"一词,但没有明确说明我何时以及何时进行重写.问题是如何让Angular在呈现路径时重写URL,以及如何在两种模式下统一解释JS代码中的路径.它不是关于如何使Web服务器执行HTML5兼容的请求重写.
我正在使用angular 5.0.3,我想用一堆查询参数启动我的应用程序.比如"/ app？param1 = hallo¶m2 = 123".在如何从angular2中的url获取查询参数中给出的每个提示？不适合我.
任何想法如何获取查询参数的工作？
private getQueryParameter(key: string): string {
const parameters = new URLSearchParams(window.location.search);
return parameters.get(key);
}
这个私有函数可以帮助我获取参数,但我不认为它是新Angular环境中的正确方法.
[更新:]我的主应用程序看起来像@Component({...})导出类AppComponent实现OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
// would like to get query parameters here...
// this.route...
}
}
我期待在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: '/' });
}]);
现在,当我访问该页面时,这是我在网址中得到的内容:
当我点击Add quote按钮时,我得到了这个:
这可能是什么问题？感谢帮助
angularjs angular-routing ngroute angularjs-ng-route angularjs-1.6
我的问题非常经典.我有一个应用程序的私有部分,后面是一个login form.登录成功后,它将转到管理应用程序的子路由.
我的问题是我无法使用,global navigation menu因为路由器试图在我AdminComponent而不是我的路由AppCompoment.所以我的导航打破了.
另一个问题是,如果有人想直接访问URL,我想重定向到父"登录"路由.但我不能让它发挥作用.在我看来,这两个问题是相似的.
知道如何做到这一点？
我正在尝试测试我的路由解析器,同时测试我得到了TypeError: ctor is not a constructor,不知道为什么它会发生,而typescript编译时没有错误.
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)
我是角色4的新手.我想要实现的是为我的应用程序中的不同页面设置不同的布局页眉和页脚.我有三种不同的情况:
路线:['登录','注册']
路线:['','关于','联系']
路线:['仪表板','个人资料']
我通过在路由器组件html中添加页眉和页脚来临时运行应用程序.
请告诉我一个更好的方法.
这是我的代码:
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 },
{ path: 'profile', component: ProfileComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
<router-outlet></router-outlet>
<site-header></site-header>
<div class="container"> …我有一个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 is logged in before calling http
*
* @param route
* @param state
* @returns {boolean}
*/
canActivate (
route : ActivatedRouteSnapshot,
state : RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | …ActivatedRouteSnapshot和ActivatedRouteAngular 4有什么区别？这是我的理解,ActivatedRouteSnapshot是一个孩子ActivatedRoute,意味着ActivatedRoute包含ActivatedRouteSnapshot.
顺便提一下,我尝试在谷歌搜索中搜索这个问题的答案,但我没有发现任何搜索结果是可以理解的.
谢谢!
angular-routing ×10
angular ×6
angularjs ×4
typescript ×2
html5 ×1
javascript ×1
karma-runner ×1
ngroute ×1
templates ×1