$ routeProvider with templateURL не работает

Я использую $ routeProvider в AngularJS с templateURl, и моя проблема в том, что ничего не произошло, ничего не отображается на вкладках консоли и сети в инструментах разработчика (Chrome или Firefox). Если я использую шаблон, он работает.

Bellow следует за файлами hmtl и js.

mainPainelAdmin.html (реж: просмотр/администратор /)

<!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 (Dir: 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/контроллеры/администратора /)

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

inicioAdmin.html (реж: вид/администратора /)

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

ли я что-то отсутствует? Благодарю.

источник

2015-07-12 Oswaldo

templateURL должны быть templateUrl в вашей конфигурации маршрута. {templateUrl: 'some/page.html'}

источник

2015-07-13 01:32:35 robwormald

Это сработало! Спасибо @robwormald. – Oswaldo

Я считаю, что вам нужен контроллер для каждого вида:

$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' 
    });

А потом конечно создать эти контроллеры

источник

2015-07-12 18:14:36 RVandersteen

Я только что сделал с одним контроллером, чтобы узнать, работает ли он. Но я попытался создать все контроллеры. – Oswaldo

И как я уже сказал, если я использую шаблон вместо templateURL, он работает. – Oswaldo

Как и ответ RVandersteen, то ваши пути также неправильно.

Вы сказали, что inicioAdmin.html был в каталоге view/admin/, так что ваш маршрут нуждается в этой информации:

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

Не забудьте ведущий /

источник

2015-07-12 18:27:36

Даже если html находятся в одном каталоге? Я изменил templateURL, как вы сказали, но все еще не работает. – Oswaldo

Думаю, что да. Вы не ссылаетесь на представление из mainPainelAdmin.html. Вы ссылаетесь на него с маршрута, который не знает о mainPainelAdmin.html. Вы можете попробовать и посмотреть. Что бы ни работало. –

Я пробовал, но все еще не работал. – Oswaldo

$ routeProvider with templateURL не работает

ответ

Смежные вопросы