CODEWITHSUNDEEP
angularjs
Vivendi
Vivendi

Reputation: 21037

Angularjs app not triggered

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?

Upvotes: 0

Views: 63

Answers (1)

S&#233;bastien Beaujard
S&#233;bastien Beaujard

Reputation: 176

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.

Upvotes: 1

Related Questions