$routeProvider 与 templateURL 不工作

Question

我在 AngularJS 中将 $routeProvider 与 templateURl 一起使用，我的问题是没有任何反应，在开发工具（Chrome 或 Firefox）的控制台和网络选项卡上没有任何显示。如果我使用模板就可以了。

下面是 hmtl 和 js 文件。

mainPainelAdmin.html（目录：view/admin/）

<!DOCTYPE html>
<html ng-app="adminCondominio">
    <head>
        <meta http-equiv="content-type" content="charset=UTF-8">
        <title>Condomínio Ilha de Bari - Painel Administrador</title>

        <!-- Font Awesome CSS available via CDN; version 4.3.0 used here -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

        <!-- Angular Material CSS now available via Google CDN; version 0.10 used here -->
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">

        <!-- Angular Material Dependencies -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

        <!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>


        <script type="text/javascript" src="../../js/app.js"></script>
        <script type="text/javascript" src="../../js/controllers/admin/mainPainelAdmin.js"></script>
        <script type="text/javascript" src="../../js/controllers/admin/menuPainelAdmin.js"></script>
        <script type="text/javascript" src="../../js/controllers/admin/mainAdmin.js"></script>

        <link rel="stylesheet" href="../../css/admin/mainPainelAdmin.css">
        <link rel="stylesheet" href="../../css/admin/menuPainelAdmin.css">

    </head>
    <body>
        <div ng-controller="MainPainelAdminCtrl">
            <md-content>
                <md-toolbar class="md-toolbar-tools">
                    <md-button class="md-icon-button" aria-label="Settings">
                        <md-icon class="fa fa-bars fa-lg"></md-icon>
                    </md-button>
                    <h2>
                        <span>Condomínio Ilha de Bari - Administrador</span>
                    </h2>
                    <span flex></span>
                    <md-button class="md-raised md-warn" aria-label="Sair" style="padding-right: 5%" ng-click="logOff()">
                        <md-icon class="fa fa-sign-out fa-lg" style="color: white; padding-left: 50%"> Sair </md-icon>
                    </md-button>
                </md-toolbar>
                <section layout="row" flex ng-controller="MenuPainelAdmin">
                    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="true">
                        <md-list>
                            <md-list-item class="mouseOver" ng-repeat="item in menuItens">
                                <p class="menuItemBotao {{item.icon}}" ng-click="go(item.ref)"> {{ item.name }} </p>
                            </md-list-item>
                        </md-list>
                    </md-sidenav>
                    <md-content flex layout-padding>
                        <div layout="column" layout-fill layout-align="top center">
                            <div ng-view></div>
                        </div>
                        <div flex></div>
                    </md-content>
                </section>
            </md-content>
        </div>
    </body>
</html>

app.js（目录：js/）

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

menuPainelAdmin.js（目录：js/controllers/admin/）

app.controller('MenuPainelAdmin', function($scope, $location){
   $scope.menuItens = [
       {name: 'Início', icon:'fa fa-home fa-lg', ref:'home'},
       {name: 'Administração', icon:'fa fa-briefcase fa-lg', ref:'admin'},
       {name: 'Configurações', icon:'fa fa-cogs fa-lg', ref:'configs'}
   ];

   $scope.go = function ( path ) {
       $location.path( path );
   };
});

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/home', {
            templateURL: 'inicioAdmin.html',
            controller: 'MainAdmin'
        })
        .when('/admin', {
            templateURL: 'administracaoAdmin.html'
        })
        .when('/configs', {
            templateURL: 'configuracaoAdmin.html'
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);

mainAdmin.js（目录：js/controllers/admin/）

app.controller('MainAdmin', function($scope){
    $scope.message="testeeeeee"
});

inicioAdmin.html（目录：view/admin/）

<h1>{{ message }}</h1>

我错过了什么吗？谢谢。

Answer 1

我相信每个视图都需要一个控制器：

$routeProvider
    .when('/home', {
        templateURL: 'inicioAdmin.html',
        controller: 'MainAdmin'
    })
    .when('/admin', {
        templateURL: 'administracaoAdmin.html',
        controller: 'AdminController'
    })
    .when('/configs', {
        templateURL: 'configuracaoAdmin.html'
        controller: 'ConfigController'
    })
    .otherwise({
        redirectTo: '/home'
    });

然后当然要创建那些控制器

Answer 2

除了 RVandersteen 的回答，你的路径也是错误的。

您说 inicioAdmin.html 在目录 view/admin/ 中，因此您的路由需要此信息：

.when('/home', {
    templateURL: '/view/admin/inicioAdmin.html',
    controller: 'MainAdmin'
})

别忘了前导/

Answer 3

templateURL 在您的路由配置中应该是 templateUrl。 {templateUrl: 'some/page.html'}

Answer 4

某些最新版本的 angularjs cdn 不受 chrome

支持

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>

使用此版本 angularjs cdn 并在 Mozilla Firefox 浏览器上工作

$routeProvider 与 templateURL 不工作

$routeProvider with templateURL not working

javascript

angularjs

ng-view

route-provider