Why does it appear that Angular is undefined in this straightforward Angular demonstration?

I'm completely new to AngularJS and I've encountered an issue.

Yesterday, I ran a very simple AngularJS application that I downloaded from a tutorial and it worked perfectly.

The application consists of 2 files:

1) index.htm:

<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
    <head>
        <title>Introduction to AngularJS</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">

        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <style>
            html, body
            {
                font-size: 1.1em;
            }
        </style>

        <!-- load angular via CDN -->
        <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">

            <div ng-controller="mainController">

                <h1>Hello world!</h1>

            </div>

        </div>

    </body>
</html>

2) And the included app.js file:

// MODULE
var angularApp = angular.module('angularApp', []);

// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {

}]);

As you can see in the index.htm file include the local app.js file, AngularJS framework by:

<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>

and BootStrap CSS framework by:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

Yesterday it worked fine but today when I try to open the index.htm file into my browser I obtain that BootStrap is not used (there are not CSS settings) and into the FireBug console I obtain this error message:

ReferenceError: angular is not defined
var angularApp = angular.module('angularApp', []);

It seems that can't see Angular framework and BootStrap also if there are correctly included and I can open in the browser the following links:

//code.angularjs.org/1.3.0-rc.1/angular.min.js

//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

So why? What could be the problem? Yesteday it works fine

Answer №1

In order to access it, you should open it using a URL such as http://localhost/myapp/index.htm, instead of using the file:/// protocol.

If you have opened the file by double clicking it or through your browser's file -> open option, it will be accessed using the file:/// and the bootstrap URL like //netdna...... will not work properly because it is trying to reference local files.

If you do not have a webserver, make the following changes:

<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

Change them to this:

<script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

Answer №2

Are you utilizing a URL?

https://code.angularjs.org/1.3.0-rc.1/angular.min.js

If you are working on a development machine, it is likely to use the http protocol instead of https. Due to security reasons, the browser may not load from the provided URL above. To resolve this issue, consider changing it to 'http' or reverting back to the '//' prefix.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pushing state history causes browser back and forward button failure

I'm currently utilizing jQuery to dynamically load content within a div container. On the server side, the code is set up to detect if the request is being made through AJAX or GET. In order to ensure that the browser's back and forward buttons ...

Animating toggles with JQuery

I am attempting to create a toggle effect for my div using this jQuery script: $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}; }, function() { $("div").animate({left:'0px'}; }, }); ...

What is the best way to include variable child directives within a parent directive in AngularJS?

Exploring a New Angular Challenge In the current project I am engaged in, I am faced with a unique problem that requires an 'angular way' solution. Despite my best efforts, I seem to be hitting a roadblock every time I attempt to solve it. The ...

AngularJS provides users with the ability to access additional information by matching specific identification

Is there a simple way in Angular to display the label of an item from an array without looping through it? I have an array of color options: $scope.colors=[ {id:"0",label:"blue"}, {id:"1",label:"red"}, {id:"2",label:"green"} ] And my data object store ...

JavaScript Glitches

Embarking on the journey of web design and programming, I am venturing into the world of creating a simple gallery using JavaScript. Despite the convenience offered by jQuery, unfortunately, it is off-limits for this particular assignment. The challenge l ...

Guide to altering JSON using Javascript

https://github.com/smelukov/loftschool-example i am currently working on my project in this environment. I have created a friends.json file in the main folder. friends.json { "name": "John", "lastName": & ...

Modifying JavaScript using JavaScript

I'm looking for a solution to change the URL of a button in sync with the iframe displayed on the screen using JavaScript. The challenge I'm facing is figuring out how to dynamically update the button's URL based on the iframe content. Here ...

What is the best way to execute a function in JavaScript and have it return the output as an image

I have created a special function that selects the image source based on a given criterion: function facilityImg(arr, x) { switch (arr[x]) { case 'Yes': return "Images/checked.png"; case 'No': ...

Protractor - I am looking to optimize my IF ELSE statement for better dryness, if it is feasible

How can I optimize this code to follow the D.R.Y principle? If the id invite-user tag is visible in the user's profile, the user can request to play a game by clicking on it. Otherwise, a new random user will be selected until the id invite-user is di ...

Guide to using jQuery to load an image

I am using this code to load an image and display it within a dialog box. <div id="image_preview" title="Client Photo Preview"> <p><img src="" alt="client image" id="client_image_preview" /></p> </div> $("#client_image_p ...

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

I am facing an issue with a tabbed menu on my webpage. While the menu is functioning correctly, I am struggling to remove the bottom border from the active tab. You can view all of my test code here. While I have come across solutions using <ul> an ...

Attempting to extract the class name of a tr tag but receiving a result of 'undefined'

I'm struggling to retrieve the class name from a specific <tr> tag. <table cellpadding=5 cellspacing=5> <tr id='cat_abc123' class='class_a'> <td>foo</td> <td><input type=& ...

Transferring an array from JavaScript to PHP, encountering an issue with determining the length

I'm having an issue passing an array from my .js file to a PHP file. In JavaScript, the array is structured as follows: theBlock[0 - 79] with color, x, and y values. For example, theBlock[10].color or theBlock[79].x The data is sent using the follow ...

How can I create a box-shaped outline using Three.js?

As someone new to threejs, I have been trying to figure out how to render a transparent box around a symbol in my canvas. The box should only display a border and the width of this border should be customizable. Currently, I am using wireframe to create a ...

"How to change the hover background of a select element in Chrome from its default setting to something else

Is there a way to remove the background color on hover and replace it with a different color? .drp-policydetails { border: 1px solid #dddddd; background-color: #ffffff; } <div className="form-group"> <select className="form-control drp-po ...

Which Browser (or version) is the Only One That Cannot Manipulate Flash Objects?

In my attempts to modify Flash Objects / Embeds using Javascript, I've found that it works in all browsers except for IE. This has led me to consider abandoning IE altogether for this application, unless there are other older or less used browsers tha ...

Tips for implementing validation in AngularJS

Could someone help me with AngularJS validation? I'm new to it and trying to make sure everything is correct. var app=angular.module('myApp',[]) app.controller('myController',function($scope){ $scope.clickMe = function(){ if($(& ...

Floating layout featuring a static width and a single element that expands

I am looking to create a layout with the following structure: Prefix - Input(Type: Text, Number,..) - Suffix - Button ul { list-style: none; width: 300px; margin: 0; padding: 0; } li { margin: 0; padding: 0; } table { margi ...

Retrieve information from api and showcase it in html

Recently, I came across an interesting API file that caught my attention: My goal is to extract information from this API and present it on a HTML page in a visually appealing format. Despite scouring various forums, I have yet to find a solution that fi ...

An exploration of the functionality of the String.fromCharCode method when used with a mobile keyboard in an HTML input

I'm looking to retrieve the keyboard key code and translate it into characters. I've been utilizing the String.fromCharCode javascript method, but it seems to only be effective with a computer keyboard and not functioning properly with a mobile k ...