CODEWITHSUNDEEP
angularjs
wardpeet
wardpeet

Reputation: 211

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

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.');
            }
        });
});

Upvotes: 0

Views: 2111

Answers (1)

Stewie
Stewie

Reputation: 60396

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>

Upvotes: 2

Related Questions