2

I have a simple test instance of angularjs. It's using a global but the alert tag is not running. This is the first example from codeschool.

Why does it not run? 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
</head>
<body ng-controller="StoreController">


    <script type="text/javascript">
        function StoreController() {

            alert("hello");
        }

    </script>
</body>
</html>
Alex
  • 11,115
  • 12
  • 51
  • 64
runners3431
  • 1,425
  • 1
  • 13
  • 30

2 Answers2

9

You are missing ng-app attribute:

<html ng-app xmlns="http://www.w3.org/1999/xhtml">

Also, as @PSL noted in comments, global controllers would not work starting from angular 1.3. You should define the controller tied to your application.

Name your application in ng-app, for example, on the html tag:

<html ng-app="myapp" xmlns="http://www.w3.org/1999/xhtml">

Then, in javascript, define your module and controller:

var myapp = angular.module("myapp", []);

myapp.controller('StoreController', ['$scope', 
    function ($scope) {
        alert("hello");
    }
]);
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • @PSL correct, sorry, first time answering in the angularjs tag. Need to take some time researching good answers in the tag. Thank you. – alecxe Sep 08 '14 at 15:24
  • @alecxe no sorry, i meant `` is all that is needed. http://jsbin.com/duvatabovige/1/ and with 1.3 rc global controllers are not implicitly discovered, need to register all the entities.. http://jsbin.com/duvatabovige/1/ – PSL Sep 08 '14 at 15:24
  • 1
    cool. [Here is a detailed explanation for 1.3 global controllers](http://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally) – PSL Sep 08 '14 at 15:40
1

You forgot to include an ng-app line to bootstrap your app. Give this a try:

<body ng-app="app">
    <div ng-controller="StoreController">Hello World</div>
    <script type="text/javascript">
        /* You forgot this line */
        angular.module("app", []);
        angular.module("app").controller("StoreController", [
            function() {
                alert("Hello");
            }
        ]);    

        /* Global controllers will not work with Angular 1.3 
        function StoreController() {

            alert("hello");
        }*/
    </script>
</body>
TrazeK
  • 838
  • 1
  • 8
  • 18
  • With modules, am I only allowed to have one module per html page? – runners3431 Sep 08 '14 at 15:26
  • No, you can have multiple modules in your app. Typical people will name the root module "app". You can make as many modules as you see fit and just reference them in the main module. – TrazeK Sep 08 '14 at 15:29
  • So I can multiple divs with different ng-apps? How do I know when I need another module? – runners3431 Sep 08 '14 at 15:31
  • No, you can only have one "ng-app" declaration, but can have multiple modules to build up your app. If you have multiple modules in your app, you will reference them in the main app like so: `angular.module("main-app", ["name-of-module1", name-of-module1"])` Separating your app into different modules makes it easier to test and maintain, rather than having one very large main module. – TrazeK Sep 08 '14 at 15:37
  • Oh okay, that makes sense when I think of it as a "spa." – runners3431 Sep 08 '14 at 15:39
  • Check this article out. It's not a bad explanation on the subject: https://blog.safaribooksonline.com/2014/03/27/13-step-guide-angularjs-modularization/ – TrazeK Sep 08 '14 at 15:44