标签: angular-routing

我不想懒加载我的路线模板.相反,我想在执行任何路由之前将所有路由模板加载到$ templateCache中.

这就是我在做的事情:

angular.module('myApp', ['ngRoute']).config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(false);

    $routeProvider.when("/main", {templateUrl: "main", controller: "MainCtrl"})
                  .when("/login",{templateUrl: "login", controller: "LoginCtrl"});
}])
.run(['$location','$templateCache', function ($location, $templateCache)
{
   //...Save templates in $templateCache
   $location.path("/login");
}]);

如果您浏览到/,则此工作正常,因为它与任何路径都不匹配.但是如果你浏览或刷新/#/login它似乎路由服务试图在我的运行块运行之前加载模板并向服务器发出请求.

无论如何要确保填充$ templateCache的代码将在路由服务寻找模板之前执行？

我正在尝试干净地实现一种方法,如果他们没有登录,将用户重定向到登录路由.我的解决方案是基于另一个SO答案,这里没有开箱即用.这是我的解决方案.

angular.module('myApp', ['ngResource', 'ngRoute'])
  .config(['$routeProvider', function ($routeProvider) {
    var requireAuthentication = function () {
        return {
            load: function ($q) {
                console.log('Can user access route?');
                if (g_isloggedIn === true) { // fire $routeChangeSuccess
                    var deferred = $q.defer();
                    deferred.resolve();
                    console.log('Yes they can!');
                    return deferred.promise;
                } else { // fire $routeChangeError
                    console.log('No they cant!');
                    return $q.reject("'/login'");
                }
            }
        };
    };

    $routeProvider
        .when('/some_page_that_requires_authentication', {
            templateUrl: '/views/secret.html',
            controller: 'secretCtrl',
            resolve: requireAuthentication()
        })
        .when('/anybody_can_see_me', {
            templateUrl: '/views/public.html',
            controller: 'publicCtrl',
        });
}]);

我的问题是,我在哪里可以听取$routeChangeError事件,以便我可以重定向路线？我尝试在指令中执行它,但永远不会触发事件.我无法将其放入控制器,因为如果承诺被拒绝,它将无法加载.有什么想法吗？

无法访问homeController(模块控制器).点击"home"链接获取控制台上的错误"homeController不是一个函数;未定义.

那么,我需要注册这个控制器谢谢,Rahul

twoPageApp.js

 * Created by rahul on 9/24/2016.
 */
(function(){
        angular.module("twoPageApp",["ngRoute"])
            .config(function($routeProvider){
               $routeProvider
                   .when('/home',{
                      templateUrl:'/JS/twoPageAppJS/partials/home.html',
                      controller: 'homeController',
                      resolve:{
                           homeContent:['$http',function($http){
                               return $http.get('/homeContent.json');
                           }]
                       }
                   })
                   .when('/page_one',{
                        templateUrl:'/Js/twoPageAppJS/partials/pageOne.html',
                        controller:'pageOneController',
                        resolve:{
                            homeContent:['$http',function($http){
                                return $http.get('/pageOneContent.json');
                            }]
                        }
                   })
                   .when('/page_two',{
                       templateUrl:'/JS/twoPageAppJS/partials/pageTwo.html',
                       controller:'pageTwoController.js',
                       resolve:{
                           homeContent:['$http',function($http){
                               return $http.get('/pageTwoContent.json');
                           }]
                       }
                   })
            });
    })();

twoPageApp.Controller.js

       (function(){
    angular.module("twoPageApp").controller("tpaController",
        ['$scope',function($scope){
            $scope.name="this is twoPageApp js controller";
        }])
})();

module COntroller(homeController.js)

    /**
 * Created by rahul on 9/24/2016.
 */
(function(){
    angular.module("twoPageApp",[]) //here is the change...
        .controller("homeController",['$scope','$rootScope','homeContent',function($scope,$rootScope,homeContent){

            $rootScope.stub={
                homeContent:homeContent.data
            };
            $scope.hello="rahul";
            console.log("raja"); …

我想back在浏览器中单击按钮时路由到特定路径。

我正在尝试以下代码片段。但是，它会立即将URL更改为所需的URL，然后路由到先前的实际URL。

constructor(location: PlatformLocation, private router: Router) {
    location.onPopState(() => {
        router.navigate(['/home']);
    });
}

作为一个新手,我在Angular 2中设置路线时遇到了问题.虽然我很确定,但这是我非常缺乏的基础.

我想要的只是我App Component加载并向我显示标题.在它下面,一个链接将加载contact-list component路由器出口部分.

import { Component,OnInit } from '@angular/core';
import { Contact } from './contact';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
    <a routerLink="/contact-list">Contact List</a>
    <router-outlet></router-outlet>
    `
})
export class AppComponent{
  title = 'Welcome to my Dream App!';
}

这里是 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } …

我只是在学习Angular 5，并且坚持使用Master / Detail的最佳实践。在Angular官方教程中的Master / Detail部分（此处：https : //angular.io/tutorial/toh-pt3）具有以下模式：

• 主组件（包含英雄列表）
  • 母版中使用的详细信息组件（这是选定英雄的详细信息）

该示例在没有Route配置的情况下运行，因此在Hero选择过程中URL不变。整个逻辑在主组件内操作。

下一步，有一个“路由器”部分（此处：https : //angular.io/tutorial/toh-pt5）

路由示例在同一级别的路由中同时使用列表组件和详细信息组件，并且两者都以其自己的逻辑分别操作。

我的问题1：

是否可以将这两个示例结合在一起使用任何Angular约定？我的目的是创建包含两个组件的HeroesContainer-Heroes List和Hero Detail。

• 英雄容器组件
  • 英雄榜（其中包含列表英雄）
  • 英雄详细信息组件（是所选英雄的详细信息）

然后将路由器设置为：

{
  path: 'heroes',
  component: HeroesContainerComponent,
}, {
  path: 'heroes/:id',
  component: HeroesContainerComponent,
}

然后，如果没有路由ID，则会隐藏HeroDetailComponent。

如果路由任何ID，则HeroesListComponent将被隐藏。

我的问题2：

导航到相同组件时，Angular是否会保留组件的状态？用例：用户对列表进行排序和过滤，打开一些Hero（导航至详细信息），然后单击“ Back button”。我在AngularJS中使用了上述模式来实现这一目标。

感谢您的任何建议！

基本上如标题所述，我需要返回多个可观察值或一个结果。基本上，目标是加载并说出图书馆列表，然后根据该图书馆ID加载书籍。我不想在组件中调用服务，而是希望在页面加载之前先加载所有数据。

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { UserService } from './../_services/index';

    @Injectable()
    export class LibraryResolver implements Resolve<any> {

        constructor(private _userService: UserService) {}

        resolve(route: ActivatedRouteSnapshot) {
            return this._userService.getLibraryList();
        }
    }

如何先加载图书馆列表，然后再加载每个图书馆的图书信息并返回到我的组件？

PS：我的服务通过ID加载了此方法

this.userService.getLibraryBooks(this.library["id"]).subscribe((response) => {
...

我正在尝试使用SVG制作类似网格的图案。我看到了真正的怪异行为<router-outlet>，当我通过路由使用此代码（例如localhost / test）时，它无法在Safari中加载模式，但使用组件的选择器则可以正常工作。

<defs>
     <pattern id="pattern" width="10" height="10">
         <path d="M10,0 L10,10 L0,10" fill="none" stroke="#E9E9E9" stroke-width="1"/>
     </pattern>
</defs>

<rect id="test" x="10" y="10" width="250" height="250" style="fill: url('#pattern');"/>

这在Chrome浏览器中效果很好，但在野生动物园中却显示黑色矩形。另外，如果我用颜色填充它，那么它也可以在两种浏览器中使用，但是pattern在Safari中不起作用。关于为什么会出现这种问题的任何建议？

我正在构建简单的角度应用程序。有学生和教师两个模块。这是我的项目的组织方式。

首先，当用户输入应用程序时，我让他选择他是老师还是学生。

根据用户的身份，将其重定向到相应的模块。

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { StudentModule } from './student/student.module';
import { TeacherModule } from './teacher/teacher.module';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'student',
        loadChildren: () => StudentModule
    },
    {
        path: 'teacher',
        loadChildren: () => TeacherModule
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule {


  } 

这是我的app.routing.ts档案。

我的问题是当我重定向到模块时，我想在那些模块中的组件之间进行路由。我应该<router-outlet>在每个模块中添加另一个，还是只能<router-outlet> …

我有一个包含3个部分的国家，地区，家庭的Angular项目。加载主页时，我有到的路由设置HomeComponent，该路由具有超链接。一切正常，并且表现得像单页（SPA）。现在，我想添加一个静态HTML页面并路由到它。我查看了Angular Route文档，找不到解决方法。这是我的问题

1. 我可以在哪里放置静态HTML页面
2. 如何在其中路由这些文件 app-routing.module.ts

Github仓库：SpringTestingUI