Новая угловая папка компонентов силы под корневым каталогом

Question

Я пытаюсь использовать новый угловой маршрутизатор в своем проекте Angular 1.5 (+ Typescript).

Я следовал руководству по началу работы, но оно вынуждает меня иметь все мои папки компонентов HTML прямо в моей корневой папке:

Не удалось создать экземпляр контроллера HomeController

http://localhost:8083/components/home/home.html 404 (не найден)

Могу ли я изменить это?

Мой код маршрутизации:

this.$router.config([
      { path: '/', redirectTo: '/home' },
      { path: '/home', component: 'home' }}
]);

И мой компонент:

namespace app.dashboard {
    'use strict';

    class HomeController {
    }

    angular.module('app.dashboard')
        .component('home', {
            templateUrl: 'app/dashboard/components/home.html',
            controller: HomeController,
            controllerAs: 'HomeController',
            bindings: {}
        });
}

и моя вложенная папка - app/dashboard/components под корневым путем

Answer 1

Чтобы ваш html был где-то еще, вам нужно указать templateURL как:

this.$router.config([
      { path: '/', redirectTo: '/home' },
      { path: '/home', component: 'home' },
      { path: '/login', component: 'login', templateUrl: '/views/login' }
]);

templateUrl - {string=|function()=} - путь или функция, которая возвращает путь к HTML-шаблону, который должен использоваться ngView.

Если templateUrl является функцией, она будет вызываться со следующими параметрами:

{Array.} - параметры маршрута, извлеченные из текущего $location.path() путем применения текущего маршрута

Вы можете найти больше по этой ссылке о рутировании. под templateUrl вы можете указать путь к файлу без расширения.

ОБНОВЛЕНИЕ: Вы хотите использовать этот конкретный this.$ Router.config? Я спрашиваю это, потому что вы можете что-то вроде:

app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {

        // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
        // ------------------------------------------------------------------------------------------------------------
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: '/views/index',
                controller: 'HomeCtrl'

            });
}]);

И вам не нужно будет использовать компоненты, я думаю, это то же самое для рутинга, но вам нужно будет добавить ui.router в качестве зависимости к вашему приложению.