我在我的角度应用程序中使用angular-route-segment并尝试从json feed配置段.
我已经有这个问题,因为我无法弄清楚如何注入$http到app.config功能.这失败了Unknown provider: $http
myApp.config(["$http", "$routeSegmentProvider", function ($http, $routeSegmentProvider) {
/* setup navigation here calling $routeSegmentProvider.when a number of times */
}
Run Code Online (Sandbox Code Playgroud)
因此,而不是注入$ HTTP到config,我也尝试注入$routeSegmentProvider到myApp.run
myApp.run(["$http", "$routeSegment", function($http, $routeSegment) {
/* can use $http here to get data, but $routeSegment is not the same here */
/* $routeSegment does not have the when setup method */
}]);
Run Code Online (Sandbox Code Playgroud)
我也试过了
myApp.run(["$http", "$routeSegmentProvider", function($http, $routeSegmentProvider)
Run Code Online (Sandbox Code Playgroud)
但我明白了 Unknown provider: $routeSegmentProviderProvider <- $routeSegmentProvider
AppRouting.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '../buyer/home/home.component';
const routes: Routes = [
{path: '', redirectTo:'buyer', pathMatch:"full"}
]
@NgModule({
declarations:[],
imports:[
BrowserModule,
RouterModule.forRoot(routes)
],
exports:[RouterModule]
})
export class AppRoutingModule {}
Run Code Online (Sandbox Code Playgroud)
BuyerRouting.ts
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations:[],
imports:[
CommonModule,
RouterModule.forChild([ …Run Code Online (Sandbox Code Playgroud) angular-routing angular-route-segment angular2-routing angular
我在我的应用程序中有一条路线,形式为localhost/opportunity/:id/volunteers。我想构建一个routerLink导航到同一级别(即localhost/opportunity/:id/waitlist)的不同页面。按照API 文档中Routerlink概述的选项,我得到的印象是routerLink表单中的 arouterLink="./volunteers" 应该链接到我当前所在的页面。因此,routerLinkActiveforrouterLink="./volunteers"应该表示链接是活动的。但它不会那样做...
相关路线如下所示:
const routes: Routes = [
{
path: 'opportunity',
children: [
{
path: ':id',
children: [
{
path: 'volunteers',
component: VolunteersComponent
},
{
path: 'waitlist',
component: WaitlistComponent
},
{
etc . . .
}
]
}
]
}
];
Run Code Online (Sandbox Code Playgroud)
将routerLink="./volunteers"出现导航到localhost/volunteers,这不存在。我也试着在表单链接routerLink="../../volunteers",routerLink="../volunteers",routerLink="././volunteers",等(他们没有任何工作,而不是我认为他们会)。
关于我做错了什么的任何建议?显然,我可以:id手动从链接中提取并插入它(类似于routerLink="['opportunity', extractedId, 'volunteers']"),但这感觉是错误的方式,我不想:id在我的应用程序中手动提取's。我似乎只是做错了什么。我已经搜索了一段时间,但还没有找到这个问题的答案。 …
我有3条路线包含3种形式我试图在当前选项卡上根据当前路径设置自举活动类.我使用了角度路由模块.我怎样才能做到这一点.我附上js代码,请检查并帮助
angular.module('bankAppOnline', ['ngSanitize','ngRoute','ngAnimate','ngQuantum'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/firststep', {
templateUrl: 'templates/firstformtemplate.html',
controller: 'firstformCtrl',
containerClass: 'active'
}).
when('/secondstep', {
templateUrl: 'templates/secondformtemplate.html',
controller: 'secondformCtrl',
containerClass: 'active'
}).
when('/thirdstep', {
templateUrl: 'templates/thirdformtemplate.html',
controller: 'thirdformCtrl',
containerClass: 'active'
}).
otherwise({
redirectTo: '/firststep'
});
}])
.run(function($rootScope){
$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
console.log(event);
console.log(toState);
console.log(fromState);
console.log(toParams);
$rootScope.containerClass = toState.containerClass;
});
})
.controller('Main-Ctrl',function($scope)
{
$scope.containerClass = "active";
})
.controller('firstformCtrl', function ($scope, Customer) {
$scope.cities = ['Hyderabad','Vizag','Vijayawada','Bangalore','Delhi','Mumbai','Chennai','Noida','Pune','Tirupathi'];
$scope.professions = ['Doctor','Teacher','Engineer','Lawyer'];
$scope.customer = Customer.get();
$scope.reset = function() {
$scope.firstform.$setPristine();
var …Run Code Online (Sandbox Code Playgroud) 我正在使用 angular-route-segment 设置一个简单的路由配置,而 Angular 在应用加载时抛出此错误:
TypeError: Cannot read property 'untilResolved' of undefined
Angular 和 angular-route-segment 都没有提供任何更有用的错误消息方式。
应用程序.js:
(function () {
'use strict';
var app = angular.module('emailHandlerApp', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: topnav.js)
// 3rd Party Modules
'ui.bootstrap', // ui-bootstrap (ex: carousel, pagination, dialog)
'route-segment', // angular-route-segment
'view-segment', // angular-route-segment
]);
console.log("app loaded"); // just for debug!
})();
Run Code Online (Sandbox Code Playgroud)
config.route.js:
(function () {
'use strict';
var app = angular.module('emailHandlerApp');
// Configure …Run Code Online (Sandbox Code Playgroud) 例如,如何路由到相同的组件,但使用不同的URL和不同的数据
/exports/open - ExportsListComponent data: {exportstatus: 'open'}
/exports/submitted - ExportsListComponent data: {exportstatus: 'submitted'}
/exports/completed - ExportsListComponent data: {exportstatus: 'completed'}
Run Code Online (Sandbox Code Playgroud)
这是我尝试做的事情,也有其他使用ExportComponent的路由,但具有类似export /:exportId的路由。
{ path: 'exports/jobs/:exportJobId', component: ExportComponent, canActivate: [RouteGuard], resolve: { exportJob: ExportJobResolver }, data: { allowed: ['inv', 'cr'] } },
{ path: 'exports/:exportId', component: ExportComponent, canActivate: [RouteGuard], resolve: { export: ExportResolver }, data: { allowed: ['inv', 'cr'] } },
{ path: 'exports', component: ExportsListComponent,
children: [
{ path: 'open', component: ExportsListComponent , data: {exportstatus: 'open'}},
{ path: 'submitted', component: ExportsListComponent, …Run Code Online (Sandbox Code Playgroud) bower not-cached git://github.com/angular/bower-angular-route.git#1.4.6
bower resolve git://github.com/angular/bower-angular-route.git#1.4.6
bower ENOTDIR ENOTDIR: not a directory, mkdir '/var/folders/zq/2wb7gvvx2vz73y2g_b3kfm8w0000gn/T/daniellopez/bower'
Stack trace:
Error: ENOTDIR: not a directory, mkdir '/var/folders/zq/2wb7gvvx2vz73y2g_b3kfm8w0000gn/T/daniellopez/bower'
at Error (native)
Console trace:
Error
at StandardRenderer.error (/usr/local/lib/node_modules/bower/lib/renderers/StandardRenderer.js:82:37)
at Logger.<anonymous> (/usr/local/lib/node_modules/bower/bin/bower:110:22)
at emitOne (events.js:77:13)
at Logger.emit (events.js:169:7)
at Logger.emit (/usr/local/lib/node_modules/bower/node_modules/bower-logger/lib/Logger.js:29:39)
at /usr/local/lib/node_modules/bower/lib/commands/index.js:48:20
at _rejected (/usr/local/lib/node_modules/bower/node_modules/q/q.js:844:24)
at /usr/local/lib/node_modules/bower/node_modules/q/q.js:870:30
at Promise.when (/usr/local/lib/node_modules/bower/node_modules/q/q.js:1122:31)
at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/bower/node_modules/q/q.js:788:41)
System info:
Bower version: 1.6.5
Node version: 4.2.1
OS: Darwin 14.4.0 x64
Run Code Online (Sandbox Code Playgroud) import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path:'forget-password', component: ForgetPasswordComponent},
{path:'**', component: NotFoundComponent},
{path: '' , redirectTo : '/login', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Run Code Online (Sandbox Code Playgroud)
编译有问题:
错误
src/app/app-routing.module.ts:5:28 - 错误 TS2304:找不到名称“LoginComponent”。
5 {路径:'登录',组件:LoginComponent},~~~~~~~~~~~~~~~
错误
src/app/app-routing.module.ts:6:37 - 错误 TS2304:找不到名称“ForgetPasswordComponent”。
6 {路径:'忘记密码',组件:ForgetPasswordComponent},~~~~~~~~~~~~~~~~~~~~~~~~
错误
src/app/app-routing.module.ts:7:24 - 错误 TS2304:找不到名称“NotFoundComponent”。
7 {路径:'**',组件:NotFoundComponent},~~~~~~~~~~~~~~~~~~
**
<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)
**
这是我第一次尝试角度路由,并且能够为我创建的组件创建路由。
frameworks multidimensional-array angular-routing angular-route-segment angular