angularjs $stateprovider doesn't load

Question

I just started changing some code from another person and tried to add a simply html with a controller. My problem is, that my html wont load and if I navigate to it .. the system simply displays: Loading...

here is the html:

<div ng-controller="MxjobdetailCtrl">

<p>this is going to be the detail view</p>

<form name="detailForm" class="css-form" novalidate>
    Name:

    Referenz:

    Zusatzinfo:

    IH - Objekt:
</form>

and here is the rather emtpy controller:

angular.module('sipApp')
.controller('MxjobdetailCtrl', function ($scope) {

});

the app.js looks like this:

$stateProvider
        .state('home', {
            url: "/home",
            templateUrl: "views/home.html",
            controller: 'HomeCtrl'
        })
        .state('main', {
            url: "/main",
            templateUrl: "views/main.html",
            controller: "MainCtrl"
        })
        .state('test',{
            url: '/mxjobdetail',
            templateURl: "/views/components/mxjobdetail.html",
            controller: "MxjobdetailCtrl"
        })
        .state('bpLogbook', {
            url: '/bpLogbook',
            templateUrl: 'views/business-processes/bpLogbook.html',
            controller: "BpLogbookCtrl"
        })
        .state('bpLogbook.mxobjectList', {
            url: "/mxobjectList",
            templateUrl: "views/business-processes/bpLogbook.mxobject.html",
            controller: "BpLogbookMxObjectCtrl"
        })
        .state('bpLogbook.logbook', {
            url: "/:mxobjectId",
            templateUrl: "../views/components/logbook.html",
            controller: "LogbookCtrl"
        })

    ;
})

and the index html looks like:

<div class="sidebar sidebar-fixed" id="sidebar">
    <ul class="nav nav-list">
        <li ui-sref-active="active"><a ui-sref="home">View Home</a></li>
        <li ui-sref-active="active"><a ui-sref="main">View Main</a></li>
        <li ui-sref-active="active"><a ui-sref="bpLogbook">Logbuch</a></li>
        <li ui-sref-active="active"><a ui-sref="test">DetailView Test</a> </li>
    </ul>
</div>

still, if I click on the DetailView Test link, nothing except a "Loading..." is displayed.

Does Anyone have any idea why a simple html with an emtpy controller won't load?

Thanks in advance,

Answer 1

It might be just a typo: note the capital R in your templateURl -- it should be templateUrl.

Also, you don't need the leading slash in your view url, and you don't need the ng-controller in your template, since you already specified the controller in the state definition.

Answer 2

You don't need to define ng-controller inside your html template:

<div>

 <p>this is going to be the detail view</p>

 <form name="detailForm" class="css-form" novalidate>
    Name:

    Referenz:

    Zusatzinfo:

    IH - Objekt:
 </form>
 ....
</div>