What is causing my basic angularjs to not function properly?

Question

What is causing my basic angularjs to not function properly?

In my angularjs test instance, I am using a global variable but the alert tag is not functioning as expected. This code snippet is from my first example on codeschool.

Any thoughts on why the alert is not running?

<!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>

javascript angularjs

Answer 1

Answer №1

Don't forget to include the ng-app attribute:

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

@PSL mentioned in the comments that global controllers won't work from angular 1.3 onwards. You need to specify the controller for your application.

Name your application within ng-app, like this, on the html tag:

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

Then, define your module and controller in JavaScript:

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

myapp.controller('StoreController', ['$scope', 
    function ($scope) {
        alert("hello");
    }
]);

Answer 2

Don't forget to include the ng-app attribute:

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

@PSL mentioned in the comments that global controllers won't work from angular 1.3 onwards. You need to specify the controller for your application.

Name your application within ng-app, like this, on the html tag:

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

Then, define your module and controller in JavaScript:

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

myapp.controller('StoreController', ['$scope', 
    function ($scope) {
        alert("hello");
    }
]);

Answer 3

Answer №2

Don't forget to add the necessary ng-app line in order to properly bootstrap your application. Here is a sample code snippet that you can use:

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

        /* Keep in mind that global controllers may not work with Angular 1.3 
        function StoreController() {

            alert("hello");
        }*/
    </script>
</body>

Answer 4

Don't forget to add the necessary ng-app line in order to properly bootstrap your application. Here is a sample code snippet that you can use:

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

        /* Keep in mind that global controllers may not work with Angular 1.3 
        function StoreController() {

            alert("hello");
        }*/
    </script>
</body>

What is causing my basic angularjs to not function properly?

Answer №1

Answer №2

Similar questions

Add square brackets to an AngularJS variable's value during the binding process

Determine the total number of arrays present in the JSON data

In AngularJS, enhance pagination loading by appending a $resource queried array to the end of another

Extracting data from XPath results reveals information beyond just the elements themselves

Looping Feature in Ionic Framework's Slides Component

Connect individuals based on specific criteria within a nested array

In what way can an array be assigned to a new key within the same key along with additional objects?

Error: The jQuery Class is returning an undefined value

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

What could be the reason for the lack of read or write functionality in $cookies for angular version 1.6.6?

Top method for detecting errors in Models? (Node.js + Sequelize)

Implementing ng-if with asynchronous functions: A step-by-step guide

AngularJS directive to scroll an image to the top of the sidebar

Tips for passing props while clicking on a v-data-table:

The spinner persists even after the fetch api call

Creating a web form with HTML and integrating it with jQuery AJAX

Utilizing jQuery to send an Ajax GET request for a JSON file

Webpage video stalling due to buffering

The JavaScript React Slider fails to hide the next arrow button when there are no images displayed on the screen

Automatically insert content into a div following the execution of an AJAX delete function using jQuery