Angularjs routing issue, controller not loading

Question

I have 4 files:

index.html
logic.js
controller.js
homepage.html

index.html

<html ng-app="sample">
<head>
<script src="angular.js"></script>
</head>
<body>
<div>
    <div ng-view></div>
</div>    
    <script src="controller.js"></script>
    <script src="logic.js"></script>    
</body>
</html>

logic.js

var myapp = angular.module('sample',[]);
    myapp.config(function($routeProvider)
    {
        $routeProvider
            .when('/',
                {   
                    controller:homepageCtrl,
                    templateUrl:'homepage.html'             
            });
    });

controller.js

function homepageCtrl($scope){
        $scope.name = "ROHIT";}

homepage.html

{{name}}

homepage.html is loading and being displayed correctly by the route but the controller is not being called here when homepage.html is loaded into index.html.

Kindly help me out with this.

Thanks

Have you checked console to see if there was an error? If it didn't find your controller then that would explain why it shows up like that. — Jeremy Reed
– Jeremy Reed, Commented Oct 9, 2013 at 22:24
I have same issue the big problem is that no error at console — owais
– owais, Commented May 4, 2015 at 11:07

Maxim Shoustin · Accepted Answer · 2013-09-20 10:29:37Z

2

You didn't defined controller in HTML.

Add this line

<div ng-controller = "homepageCtrl">

Suppose it should be in homepage.html:

<div ng-controller = "homepageCtrl">
   {{name}}
</div>

In addition, wrap your controller name with ' logic.js

[EDIT]

Add $inject to routeProvider:

myapp.config(["$routeProvider",
function($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: 'homepage.html', 
            controller: 'homepageCtrl'
        });
}
]);

edited Sep 20, 2013 at 10:29

answered Sep 20, 2013 at 10:13

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rohit Over a year ago

Thanks.But this is not necessary right as the routing takes care of this in logic.js . I did try it with this as well , but to no avail.

Maxim Shoustin Over a year ago

@rohit see my edit, maybe you didn't $inject? I changed a bit your config

rohit Over a year ago

I've found the issue,thanks. The $inject is not required and we dont need to specify the controller name too <div ng-controller = "homepageCtrl"> I actually had a couple of extra things in {{ }} that i didn't put up ,angular had some issues parsing it.It worked when i removed it.

rohit Over a year ago

i happened to have some mustache code with #,/ in the {{ }} which angular couldn't parse and hence it didn't display {{name}} too even though {{name}} was not enclosed with any of the mustache code

Gaurav Aggarwal Over a year ago

this is wrong how can you say to define controller in html when rohit is defining controller in routeProvider...defining controller in both the places is not a solution

Elorfin · Accepted Answer · 2013-09-20 10:14:43Z

0

Controller name must be pass to $routeProvider as a string :

$routeProvider
            .when('/',
                {   
                    controller:'homepageCtrl',
                    templateUrl:'homepage.html'             
            });

answered Sep 20, 2013 at 10:14

Elorfin

2,4972 gold badges28 silver badges50 bronze badges

2 Comments

rohit Over a year ago

Thanks but i have already tried this with the quotes controller:'homepageCtrl' but its not working.

Elorfin Over a year ago

@rohit : OK, How do you add your controller to angular ?

Collectives™ on Stack Overflow

Angularjs routing issue, controller not loading

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related