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

What are the steps to retrieve marker data from a MySQL database and showcase them dynamically on a Google Map using AJAX? Addressing time constraints

Get the azure blob storage file in angular by downloading it

Skipping an iteration in ng-repeat in Angular 1.0.8: A simple guide

How can I generate a hyperlink for a specific directory on Github Pages?

React Native, state values are stagnant

Utilizing Vuetify 2 skeleton-loader to customize loading states through Vuex store manipulation

Is it possible for the ionic directive "ion-nav-view" (ui-router) to be compatible with ngRoute?

Obtain user input and extract the name using jQuery's serialization function

Guide to effectively utilizing jQuery Deferred within a loop

Tips for disabling automatic scrolling when a browser is reloaded using JavaScript

When the JSON object is transferred to the node server, it undergoes modifications

Ways to deactivate the three-way data binding feature in Firebase

The onprogress event for the XMLHttpRequest object threw an error due to an Uncaught SyntaxError, indicating

Navigate to a different page in Vue3 after completing the file download process

Loading custom places in ArcGIS from a file or database

Unable to designate decimal value as the default in DropdownListFor in ASP.NET Core when utilizing JavaScript

Enhancing user experience: Implementing specific actions when reconnecting with Socket.io after a disconnection

Attempting to locate an element within the DOM using TypeScript

Do the dependencies in the devDependencies section impact the overall size of the

Implementing ngAnimate within AngularJS 1.3 allows for the utilization of animate.css animations, thereby offering a diverse range