$routeProvider with templateURL not working

Question

I am using $routeProvider in AngularJS with templateURl and my problem is that nothing happened, nothing shows on console and network tabs on dev tools (Chrome or Firefox). If i use template it works.

Bellow follows the hmtl and js files.

mainPainelAdmin.html (dir: 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 (dir: js/)

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

menuPainelAdmin.js (dir: 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 (dir: js/controllers/admin/)

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

inicioAdmin.html (dir: view/admin/)

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

Am I missing something? Thanks.

score 3 · Accepted Answer · answered Jul 13 '15 at 01:32

3

templateURL should be templateUrl in your route configurations. {templateUrl: 'some/page.html'}

answered Jul 13 '15 at 01:32

robwormald

853
7
6

score 1 · Answer 2 · answered Jul 12 '15 at 18:14

1

I believe you need a controller for each view:

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

And then ofcourse create those controllers

answered Jul 12 '15 at 18:14

RVandersteen

2,067
2
25
46

I've just made with one controller to see if it works. But I've tried with all controllers created. – Oswaldo Jul 12 '15 at 19:56
And as I said, if I use template instead of templateURL, it works. – Oswaldo Jul 12 '15 at 20:30

score 1 · Answer 3 · answered Jul 12 '15 at 18:27

1

As well as RVandersteen's answer, your paths are also wrong.

You said the inicioAdmin.html was in the directory view/admin/, so your route needs this information:

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

Don't forget the leading /

answered Jul 12 '15 at 18:27

Buh Buh

7,443
1
34
61

Even if the html are in the same directory? I've changed the templateURL as you said but still not working. – Oswaldo Jul 12 '15 at 18:39
I think so yes. You are not referencing the view from mainPainelAdmin.html. You referencing it from the route, which does not know about mainPainelAdmin.html. You can try it and see. Whatever works. – Buh Buh Jul 12 '15 at 18:43

score -1 · Answer 4 · edited Jul 04 '19 at 11:56

-1

some of the latest version of angularjs cdn is not being supported by chrome

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

use this version angularjs cdn and work on Mozilla Firefox browser

edited Jul 04 '19 at 11:56

Rajan Sharma

2,211
3
21
33

answered Jul 04 '19 at 10:47

user11739144

1

– user11739144 Jul 04 '19 at 10:48

$routeProvider with templateURL not working

4 Answers4