Angularjs app not triggered

Question

For some reason my Angular site isn't working. I've included all the files. but for some reason angular isn't triggered to do something.

This is how my index.html looks like:

<!DOCTYPE html>
<html ng-app="ngTest">
<head>
    <title></title>
</head>
<body>
    <h2>Test</h2>

    <ng-view></ng-view>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="Scripts/angular-animate.js"></script>

    <script src="app/app.js"></script>
    <script src="app/controllers/home/HomeCtrl.js"></script>
</body>
</html>

All included scripts return 200 in the developer console, so I'm sure they are loaded fine.

Then my app.js looks like this:

window.app = angular.module('ngTest', ['ngRoute', 'ngResource', 'ngAnimate']);
app.config(['$routeProvider', '$locationProvider', '$httpProvider', '$provide', function ($routeProvider, $locationProvider, $httpProvider, $provide) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.useXDomain = true;
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/Home', { templateUrl: '/app/views/home/Home.html', controller: 'HomeCtrl' })
        .otherwise({ redirectTo: '/Login' });
}]);

The HomeCtrl.js simply looks lke this:

app.controller('HomeCtrl', ['$scope', function ($scope) {
    init();
    function init() {
        alert('aaa');
    }
}]);

And the Home.html only contains a piece of text.

Then when I navigate to: localhost/#Home then I expect it to load my Home.html in the ng-view tag. But that's not happening. It only loads my index.html but no angular code seems to be triggered.

Am I still missing something?

Sébastien Beaujard · Accepted Answer · 2014-04-23 16:27:38Z

1

Try:

angular.module('ngTest', ['ngRoute', 'ngResource', 'ngAnimate']).
config(['$routeProvider', '$locationProvider', '$httpProvider', '$provide', function ($routeProvider, $locationProvider, $httpProvider, $provide) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.useXDomain = true;
    $locationProvider.html5Mode(true);
    $routeProvider.when('/Home', {
        templateUrl: '/app/views/home/Home.html',
        controller: 'HomeCtrl'
    })
        .otherwise({
        redirectTo: '/Login'
    });
}]);

You could do that for controlers :

angular.module('ngTest.controllers', []);//Declare controllers


angular.module('ngTest.controllers').
controller('HomeCtrl',['$scope', function ($scope) {
    init();
    function init() {
        alert('aaa');
    }

}]);

By the way, with html5Mode(true) your path will be localhost/Home.

edited Apr 23, 2014 at 16:27

answered Apr 23, 2014 at 8:53

Sébastien Beaujard

1764 bronze badges

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

2 Comments

Vivendi Over a year ago

This does trigger my controller, but with the error that app is undefined. Which makes sense, because window.app isn't defined anymore like I had before. So how should I build my controller code then when using your method? -- What bothers me though is that even Angular does something like var myApp = angular.module('myApp',[]);. So that seems to be the correct/preferable way of creating the code?

Sébastien Beaujard Over a year ago

I edited my answer and added controler call. Actually, maybe your issue was related to use window.app instead 'var app'.

Collectives™ on Stack Overflow

Angularjs app not triggered

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related