в angularjs пытаются зациклить заводские данные для создания конфигурации, а ng-view не показывает html?

Я пытаюсь поместить свои маршруты в фабрику, а затем использовать эти данные для циклического создания маршрутов конфигурации, но это не работает.

Дополнительная проблема заключается в том, что даже когда я просто добавляю некоторые маршруты, ng-view не отображает содержимое из файлов html?

Код приведен ниже, хотя я не включил View1.html и View2.html, но они могут содержать что угодно для тестирования.

Буду очень признателен за любой совет :)

Спасибо

Дом

основной html:

<!DOCTYPE html>
<html>
    <head>
    <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
    </head>
    <body ng-app="templateApp" layout="column"
    ng-controller="controller">  
    <md-toolbar layout="row">
        <md-button class="menu" ng-click="toggleList()">
            <i class="material-icons vertical-align-middle">menu</i>
        </md-button>
        <h3>test template</h3>
        <md-button ng-click="toggleRight()">
            Filters        
        </md-button>        
    </md-toolbar>  
    <div class="container" layout="row" flex>
        <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-4dp" md-component-id="left">
            <md-list>
                <md-list-item ng-repeat="p in pages">
                    <md-button ng-click="selectPage(p)">
                        <i class="material-icons vertical-align-middle">{{p.icon}}</i>
                        {{p.name}}
                    </md-button>
                </md-list-item>
            </md-list>
        </md-sidenav>

        <md-content id="content" flex>
            <div><a href ="#partial1">Partial 1</a> </div>
            <div ng-view></div>     
        </md-content>

   <md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
        <md-button ng-click="close()" class="button">
          Close Filters
        </md-button>
    </md-sidenav>

    </div>

    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    <script src = "pages.js"></script>

    </body>
</html>

страница.js:

var templateApp = angular.module('templateApp', ['ngMaterial', 'ngRoute']);

templateApp.factory('pageFactory', function () {

    var pages = [
                {icon: 'assessment', name: 'Overview', route: '/partial1', template: 'View1.html'},
                {icon: 'assignment', name: 'Dashboard', route: '/partial2', template: 'View2.html'}
        ];

    var factory = {};
    factory.getPages = function(){
        return pages;
    }

    return factory;
});

templateApp.controller('controller', function($scope, $mdSidenav, pageFactory, $location) {

        $scope.toggleList = function () {
            $mdSidenav('left').toggle();
        };

        $scope.toggleRight = function () {
            $mdSidenav('right').toggle();
        };

        $scope.close = function () {
            $mdSidenav('right').close();
        };


        $scope.selectPage = function (page) {
            $location.path(page.route);
        };

        $scope.pages = pageFactory.getPages();

    });

templateApp.config(function($routeProvider, pageFactory) {

angular.forEach(pageFactory.getPages(), function(r) {
    $routeProvider.when(r.route, {controller: 'controller', template: r.template});
});

});

//templateApp.config(function($routeProvider) {
//    $routeProvider
//    .when("/partial1", {
//        templateUrl : "View1.html"
//    })
//    .when("/partial2", {
//        templateUrl : "View2.html"
//    });
//});

приложение.css:

html, body {
    font-family= 'roboto', sans-serif;
    font-size:14px;
    height:100%;
    margin:0px;
    padding:0px;
}

.vertical-align-middle { 
    vertical-align: middle; 
}

md-toolbar h3 {
    margin: auto;
    font-weight:500;
}

md-list-item > button {
    width:100%;
    text-align:left !important;
}

#content {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 5px;
}

.button {
  position: absolute;
  left: 20px;
  margin: 0;
}

javascript angularjs ng-view
person DominicA    schedule 07.12.2018    source источник
comment
Можно внедрить только поставщика, а не фабрику или службу в блоке config.   -  person charlietfl    schedule 07.12.2018
comment
Привет, спасибо за ответ; Не могли бы вы посоветовать, как мне преобразовать фабрику в поставщика?   -  person DominicA    schedule 07.12.2018
comment
Службы не могут быть внедрены в блоки конфигурации. Дополнительные сведения см. в разделе Как вызвать службу в конфигурации angularJs?.   -  person georgeawg    schedule 07.12.2018
comment
Не задавайте сразу несколько разных вопросов. См. страницу Как спросить, чтобы уточнить этот вопрос.   -  person georgeawg    schedule 07.12.2018
comment
Привет, что случилось с приведенным вами примером кода?   -  person DominicA    schedule 07.12.2018
comment
Я удалил его, потому что он сломал getPages() в вашем контроллере, и цикл для конфигурации все еще не работал. См. Этикет для вопросов о русской кукле.   -  person georgeawg    schedule 07.12.2018