CODEWITHSUNDEEP
javascriptangularjs
jsnoob
jsnoob

Reputation: 73

Why doesn't this angularjs application start?

I'm trying to build an angularjs application. Everything seems fine, there is no error, but it's not working. To remove other factors, I removed everything (requirejs etc.) and dumbed it down to a small html file.

Here is the js code in html:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
        <script>


        angular.module('application', ['ngRoute']);
        angular.module('application').config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/', {template: 'test content', controller: 'controller1'});
            $routeProvider.otherwise({redirectTo: '/'});
        }]);
        angular.module('application').controller('controller1', ['$scope', function($scope) {
            console.log('in controller1');
        }]);
        angular.bootstrap(document, ['application']);


        </script>
    </head>
    <body>
    </body>
</html>

Result I'm expecting to see is "test content" on page, and 'in controller1' in my console. Can you tell me why it's not working?

Upvotes: 0

Views: 185

Answers (3)

KayakDave
KayakDave

Reputation: 24676

Try adding adding this document ready test around you bootstrap call. It'll wait to call bootstrap until the document (DOM) is completely ready.

If you don't wrap bootstrap in the ready() call the browser may still be in the middle of constructing the DOM when angular builds it's view of the DOM. This can lead to angular being unaware of parts of your page, or worse (and this can be tough to debug). 

 angular.element(document).ready(function() {
     angular.bootstrap(document, ['application']);
};

You can read more about that in this guide to angular initialization: http://docs-angularjs-org-dev.appspot.com/guide/bootstrap

Or you could use <html ng-app='application'> instead as others have mentioned if you want to go the more traditional route- but then you'd have to get rid of the angular.bootstrap call.

Upvotes: 1

mortalapeman
mortalapeman

Reputation: 1425

Your are missing the ng-view directive that works together with the routes to display the template provided in the route config.

Working plunker

Code:

  <body>
    <div ng-view></div>
    <script>
        angular.module('app', [])
        .config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/', {template: '<p>test content</p>', controller: 'controller1'});
            $routeProvider.otherwise({redirectTo: '/'});
        }])
        .controller('controller1', ['$scope', function($scope) {
            console.log('in controller1');
        }]);
        angular.bootstrap(document, ['app']);
    </script>
  </body>

Upvotes: 3

webcoder
webcoder

Reputation: 629

Angular JS bootstraps by using ng-app and ng-controller directive declared in html.

Refer this:

http://docs.deployd.com/docs/collections/examples/a-simple-todo-app-with-angular.md

Upvotes: 2

Related Questions