对于高级角度用户来说,这可能是一个简单的问题,但我没有在某个地方找到这个问题.

所以我正在重构我的代码,当我意识到,我在视图中有两个控制器,这不是问题,当控制器'ACtrl'被$ stateProvider绑定并且控制器'BCtrl'在视图中通过ng-controller绑定.但是当我尝试在$ stateProvider中分配它们时,如下所示:

$stateProvider.state('a.view', {
    url: "/anurl",
    views: {
        'menuContent': {
            templateUrl: "anUrlToMyTemplates",
            controller: 'ACtrl', 'BCtrl'
        }
    }
}); 

或者那个:

$stateProvider.state('a.view', {
    url: "/anurl",
    views: {
        'menuContent': {
            templateUrl: "anUrlToMyTemplates",
            controller: 'ACtrl',
            controller: 'BCtrl'
        }
    }
});

它不会起作用.

我知道这将是一个解决方案,使控制器的内容达到一个,但控制器'ACtrl'也在其他地方使用,所以我不得不在其他地方重复自己.我该怎么解决这个问题......

在Angular设置中,我选择了Angular UI-router来在视图之间切换.

我的配置如下:

.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/app/home');

  $stateProvider

    // Nav
    .state('app', {
      url: '/app',
      templateUrl: 'templates/navbar.html',
      abstract: true,
      controller:'AppCtrl as app',
    })

    // Home
    .state('app.home', {
      url: '/home',
      templateUrl: 'templates/home.html',
      controller:'HomeCtrl as home',
    })

    .state('app.browse', {
      url: '/browse',
      templateUrl: 'templates/browse.html',
      controller:'BrowseCtrl as browse',
    })

    .state('app.browse-detail', {
      url: '/browse/:productId',
      templateUrl: 'templates/browse-detail.html',
      controller:'BrowseDetailCtrl as detail',
    })

})

这将导致产品的网址显示如下:

www.website.com/app/#/browse/productId

相反,我希望看到类似的东西:

www.website.com/browse/productId/most-awesome-product

其中most-awesome-product是一个地址段塞.

我的问题是:

• 一般来说使用路由使Angular Websites SEO友好的原则是什么？
• 如何通过添加url slug来更改我的角度路由器的URL(见上文)？
• 将更改网址使我的网站SEO友好？

谢谢!

我想得到这个来自的网址:

this.router.navigate(./somepath, { relativeTo: this.route })

this.route属于那种类型ActivatedRoute.

我试过url: string = route.snapshot.url.join('');但这给了一个空字符串.

我发现只要次要路线开放,它router.isActive就会返回false.

是router.isActive适用于检查"是我的路线(X)？" (例如:付款页面) - 无论是hashstates,查询参数和辅助路由.

应该router.isActive是正确的服务/电话来推断这个？或者它是为了更简单的事情.还有其他选择吗？应该写我自己的服务？

例如:

• 打开时/second,router.isActive('second', true)=== true
  • (好)
• 打开时second(modal:my-modal),router.isActive('second', true)=== false
  • 问题:此功能现在不再有用,以确定我是否在第二页
• 打开时/second,router.isActive('', false)=== true.(非完全匹配返回真正的父/子状态

我已经创建了一个plnkr概念证明,以便于测试:

从角文档上canActivate,看来你只能用canActivate后卫,让程序的途径,如果该canActivate函数返回最后true.

有没有办法说,"只有在canActivate课程评估为false" 时才进入这条路线？"

例如,为了不允许登录用户访问登录页面,我尝试了这个但是它不起作用:

export const routes: Route[] = [
    { path: 'log-in', component: LoginComponent, canActivate: [ !UserLoggedInGuard ] },

我在控制台中遇到此错误:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[false]: 
  StaticInjectorError[false]: 
    NullInjectorError: No provider for false!
Error: StaticInjectorError[false]: 
  StaticInjectorError[false]: 
    NullInjectorError: No provider for false!

我想使用适当的依赖注入MyCtrl1来注入MyCtrl1.resolve对象的字段.我尝试了许多不同的尝试注射@MyCtrl1.resolve等组合,没有运气.

@MyCtrl1 = ($scope, $http, batman, title) ->
  $scope.batman = batman.data
  $scope.title = title.data

@MyCtrl1.resolve = {
 batman: ($http) ->
   $http.get('batman.json')
 title: ($http) ->
   $http.get('title.json')
}
#@MyCtrl1.$inject = ['$scope', '$http'] -- commented out because not sure how to inject resolve fields

 angular
.module( 'app', [])
.config( ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider)->
  $locationProvider.html5Mode(true)

  $routeProvider.when('/', {templateUrl: 'index.html', controller: MyCtrl1, resolve: MyCtrl1.resolve})
  $routeProvider.otherwise({redirectTo: '/'})
])

angular.bootstrap(document,['app'])

我正在使用Cordova和AngularJS制作移动应用程序.目前我已经安装了ui-router用于路由,但我对任何其他路由选择开放.

我的愿望:我想缓存某些与参数绑定的视图.换句话说,我想缓存路径(或页面).

示例情况:假设我们看到一些仪表板页面,点击一些重定向到路径的书籍封面book/2.此路径首次加载到应用程序中.路由器重定向HomeController到BooksController(无论名称).现在BooksController加载给定的数据$stateParams(book id = 2)并创建充满所选书籍信息的视图.

在这种情况下我想要的是什么:

1. 我回到仪表板页面 - 它已经加载(缓存？)
2. 我再次选择书#2
3. 控制器或路由器注意到已加载有关此书的数据
4. 视图没有被重新创建,而是从缓存中获取

实际上,最好根据路径缓存我访问的所有内容.预加载也很酷.

原因:表现.当我打开一些书籍列表时,我希望它能够快速显示.每次创建视图时,页面更改的动画看起来很糟糕(它不是很平滑).

任何帮助,将不胜感激.

编辑:

首先,由于我认为这是许多移动HTML应用程序编程人员的常见问题,我想精确一些信息:

1. 如果可能的话,我不是在寻找黑客,而是寻找明确的解决方案.
2. 视图中的数据使用AngularJS,所以YES,有类似的东西ng-bind,ng-repeat等等.
3. 数据和DOM元素都 需要缓存.据我所知,浏览器的布局操作并不像重新创建整个DOM树那样昂贵.重画不是我们可以省略的.
4. 拥有独立的控制器是很自然的事情.因为没有它我可以离开,我无法想象它是如何工作的.

我有一些半解决方案,但我会对我的愿望严格要求.

解决方案1.

将所有视图放入一个文件(我可以使用gulp builder)并使用ng-show.这是最简单的解决方案,我不相信任何知道AngularJS的人都不会想到它.

一个很好的技巧(来自@DmitriZaitsev)是创建一个辅助函数来显示/隐藏基于当前位置路径的元素.

好处:

1. 这很简单.
2. 预加载功能.

缺点:

1. 所有视图都必须在一个文件中.不要问为什么不方便.
2. 由于这一切都与移动设备有关,有时我想"清除"内存.我能想到的唯一方法是从DOM中删除这些孩子.肮脏但还可以.
3. 我不能同时缓存/ book/2和/ book/3.我必须在每个使用参数绑定的视图的一些模板之上动态创建DOM子节点.

解决方案2.

使用来自ui-router-extras的 Sticky States和Future States 非常棒.

好处:

1. 分开的看法.
2. 非常简单的用法,非常简单,因为它只是一个插件ui-router.
3. 可以创建动态子状态.所以可以缓存book1, …

我的ng-view中有一个10(或n)复选框.现在我想问一下,检查复选框是否复选以及选中复选框的值是最有效或最简单的方法.

<ul>
  <li ng-repeat="album in albums">
   <input type="checkbox" ng-model="folder.Selected" value={{album.name}} />
   </li>
  </ul>

我有ng-controller(getAlbumsCtrl),因为我有一个数组,我想将所有的checkedbox专辑名称推送到albumNameArray

我有一个哈希路由器,从我的主页面路由就好了.当新页面打开时,所有模板语法都被破坏,就会出现问题.这就是所有数据绑定,ngFors,甚至[routerLink].因此页面打开时没有角度逻辑,但是如果我在这些散列页面上刷新浏览器它们工作得很好.

app bootstrap file

import { enableProdMode } from '@angular/core';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { HTTP_PROVIDERS } from '@angular/http';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { APP_ROUTER_PROVIDERS }  from './path-to-the-router-file';
import { ServerGetService } from './path-to-a-service';
import { AppComponent } from './app/app.component';

// depending on the env mode, enable prod mode or add debugging modules
if (process.env.ENV === 'build') {
  enableProdMode();
}

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  APP_ROUTER_PROVIDERS,
  {
    provide: …

我在尝试浏览不同的路线时遇到了问题.

我有两个不同的路线模块.

app.routes.ts:

仅包含LoginPage:

export const routes: Routes = [
  {
    path: 'login',
    component: LoginPageComponent,
    canActivate: [PreventLoggedInAccess]
  },
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'login'
  }
];

export const Routing: ModuleWithProviders = 
    RouterModule.forRoot(routes, { useHash : true });

使用PreventLoggedInAccess.canActivate,如果用户已经登录,则将其重定向到具有/app前缀和子路由的登录部分home.它被定义为:

canActivate(): boolean {
  if (!this._authService.isAuthenticated()) {
      return true;
  }
  this._router.navigate(['/app/home']);
  return false;
}

pages.routes.ts:

包含/app仅在用户登录时才可访问的所有子路由.这可以通过以下方式实现AuthGuardService.canActivateChild:

export const pageRoutes: Routes = [ …