Why doesn't this angularjs application start?

Question

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?

mortalapeman · Accepted Answer · 2013-10-19 16:39:17Z

3

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>

answered Oct 19, 2013 at 16:39

mortalapeman

1,42512 silver badges16 bronze badges

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

Comments

webcoder · Accepted Answer · 2013-10-19 14:56:36Z

2

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

answered Oct 19, 2013 at 14:56

webcoder

6296 silver badges12 bronze badges

2 Comments

jsnoob Over a year ago

It's correct for simple applications, but I thought bootstrapping to whole document takes care of having to write ng-app, and changing ng-controller in html.

KayakDave Over a year ago

ng-app/ng-controller as @BlazingCoder mentions is the preferred route unless you have a special case where you need the control manual bootstrapping gives.

KayakDave · Accepted Answer · 2013-10-19 21:48:07Z

1

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.

edited Oct 19, 2013 at 21:48

answered Oct 19, 2013 at 14:49

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

3 Comments

jsnoob Over a year ago

This doesn't change anything.

KayakDave Over a year ago

I'll look some more- but do keep the document ready test. It'll bite you later if you don't have it.

KayakDave Over a year ago

Is your goal to use bootstrap instead of ng-app? ng-app might make your life easier if you don't need to manually bootstrap

Collectives™ on Stack Overflow

Why doesn't this angularjs application start?

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related