CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-scope
AndreaNobili
AndreaNobili

Reputation: 43057

Why in this simple Angular example it seems that Angular is not defined?

I am absolutly new in AngularJS and I have the following problem.

Yesterday a runned this very simple first AngularJS application download from a tutorial amd it worked fine.

The application is composed by the following 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

and see the code of Angular and BootStrap.

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

Upvotes: 0

Views: 122

Answers (2)

Adam Jenkins
Adam Jenkins

Reputation: 55792

You have to open it via a URL - e.g. http://localhost/myapp/index.htm, not using the file:/// protocol

You have either double clicked the file and opened it, or opened it with your browser's file -> open option in which case it will be opened using file:/// and the URL to bootstrap - //netdna...... will not resolve as it will look for it in the local file system.

If you don't have a webserver, then simply change the following:

<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" />

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" />

Upvotes: 1

Xavier J
Xavier J

Reputation: 4728

You are using url

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

If you are on a development machine, usually it will be using the http moniker, NOT https. The browser won't load from the URL above because of that, as it's a security concern. Change it to 'http' or go back to the '//' prefix.

Upvotes: 0

Related Questions