angularjs controller not loaded (not using ng-controller in view)

Question

I'm sure this is a really stupid problem but i'm new to angularjs and tried to find the solution but nothing seems to work. It might be that I'm interpreting the router wrong.

My controller is only loaded when I add ng-controller to the html file, if I don't it isn't but I thought the router would take care of that. I'm using requirejs and minified my script in this example.

index.html

<!doctype html>
<html ng-app>
<head>
    <!-- load our application -->
    <script src="assets/vendor/requirejs/require.js" data-main="assets/js/config"></script>
</head>

<body id="splash">
hehe my page
</body>
</html>

config.js

requirejs.config({
  baseUrl: 'assets/js',
  paths: {
    angular: '..\\vendor\\angularjs\\angular',
    bootstrap: '..\\vendor\\bootstrap',
    jquery: '..\\vendor\\jquery\\jquery'
  },
  shim: {
    bootstrap: [
        'jquery'
    ],
    angular: {
        deps: ['jquery'],
        exports: 'angular'
    }
  }
});

require(['app/app']);

app.js

define(['angular'], function (angular) {
    angular.module('fettnerd.controllers', []);
    angular.module('fettnerd', ['fettnerd.controllers']);

    require(['app/routing'], function() {
        angular.bootstrap(document, ['fettnerd']);
    });
});

router.js

define(['angular', 'app/controllers/IndexCtrl'], function(angular) {
angular.module('fettnerd')
    .config(function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);  // we want history api

        $routeProvider.when("/home", {
                controller: "IndexCtrl"
            });
        $routeProvider.otherwise({redirectTo: '/home'});
    });
});

IndexCtrl.js

define(['angular', 'jquery'], function(angular, $) {
    angular.module('fettnerd.controllers')
        .controller('IndexCtrl', function($scope) {
            console.log('test');
            $scope.login = function(e) {
                alert('Soon. How soon? Very soon.');
            }
        });
});

Stewie · Accepted Answer · 2013-06-18 20:54:53Z

2

You are missing ng-view in your index.html.

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

<body id="splash" ng-view>
</body>

answered Jun 18, 2013 at 20:54

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

1 Comment

wardpeet Over a year ago

Haha I knew it was something really stupid. thank you so much!

Collectives™ on Stack Overflow

angularjs controller not loaded (not using ng-controller in view)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related