Search code examples
javascriptangularjsng-viewroute-provider

AngularJS $routeProvider templates not showing up in ng-view

Here is my folder structure:

public
--js
----controllers
------aController.js
------bController.js
----app.js
----router.js
--styles
----a.css
----b.css
--html
----a.html
----b.html
--index.html

In my index.html file I have:

<body ng-app="myApp">
    <div ng-view></div>
</body>

In my router.js file I have:

myApp.config(['$routeProvider',function($routeProvider) {
    $routeProvider
    .when('/a', {
        controller: 'aController',
        templateURL: 'html/a.html',
        css: 'styles/a.css'
    })
    .when('/b', {
        controller: 'bController',
        templateUrl: 'html/b.html',
        css: 'styles/b.css'
    })
    .otherwise({
        redirectTo: '/a'
    });
}]);

In a.html and b.html I just have a div with the letter inside. ie.:

<p>a</p>

So when I load the page I expect to see an "a" but all I see is empty space. When I inspect the element, it shows <!-- ngview -->. I tested my routing and it seems to navigate to the right address, but why isn't my template showing up / why is my ng-view commented out? I tried both running from localhost and opening it in the web browser to the same effect.

EDIT: If it matters, I'm not getting any console errors and the path I'm seeing upon startup is:

.../appFolder/public/index.html#/a

Solution

  • So... my paths were fine. However, I capitalized the "R" in templateURl... There is also no css property on the routeprovider object. Silly typos... Thanks for everyone's help though!