'angular' is not defined - why not?

Question

I am starting to teach myself AngularJS and seem to be falling at the first hurdle as my test code returns an error "'angular' is not defined".

I would assume this is because the "angular" library is not loaded when I begin to reference it but I can't see why this would be the case.

My HTML file is as follows

<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title>FHIR Test Project</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->

    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
    <!-- build:js scripts/vendor/modernizr.js -->
    <script src="../bower_components/modernizr/modernizr.js"></script>
    <!-- endbuild -->

</head>
<body>
    <!--[if lt IE 10]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->


    <div class="container-fluid" ng-app="app">

        <header ng-include="'templates/nav.html'"></header>

        <div ui-view></div>

        <div class="jumbotron">
            <h1>'Allo, 'Allo!</h1>
            <p class="lead">Always a pleasure scaffolding your apps.</p>
            <p><a class="btn btn-lg btn-success" href="#">Splendid! <span class="glyphicon glyphicon-ok"></span></a></p>
        </div>

        <div class="row marketing">
            <div class="col-lg-6">
                <h4>HTML5 Boilerplate</h4>
                <p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>

                <h4>Sass</h4>
                <p>Sass is a mature, stable, and powerful professional grade CSS extension language.</p>


                <h4>Bootstrap</h4>
                <p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>

                <h4>Modernizr</h4>
                <p>Modernizr is an open-souqqce JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.</p>

            </div>
        </div>

        <footer ng-include="'templates/footer.html'"></footer>


    </div>


    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->

    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/angular-ui-router/release/angular-ui-router.js">   </script>

    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. 
    <script>
        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X');ga('send','pageview');
    </script>
    -->

    <!-- build:js scripts/plugins.js -->

    <!-- endbuild -->

    <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="scripts/main.js"></script>
    <!-- endbuild -->
</body>
</html>

My JS is in "main.js" as referenced at the last line of the HTML.

The content of "main.js" are

'use strict';

angular.module('app',['ui.router'])
.config(['$urlRouteProvider','$stateProvider',function($urlRouteProvider,$stateProvider)
{
    $urlRouteProvider.otherwise('/');

    $stateProvider
        .state('home', {
            url: '/',
            templete: 'testing 123'
        });

}]);

you can check to see if your browser had issue finding angular by hitting f12 and looking at the developer tools. In Chrome/FF there is a network tab that you can see the items attempting to load and their status. In IE you can look at the script tag and see all the loaded scripts. My guess is that you didn't reference the path to angular properly. — scrappedcola, Jun 19 '14 at 20:53
scrappedcola - I'm on chrome and have already checked via dev tools, both angular js files are loading — BENBUN Coder, Jun 19 '14 at 21:01

score 2 · Accepted Answer · answered Jun 19 '14 at 21:06

2

I've tested your code, the only problem is that $urlRouteProvider is wrong

Solution

main.js

angular.module('app',['ui.router'])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider) {
  $stateProvider
    .state('home', {
        url: '/',
        templete: '<div>testing 123</div>'
    });

  $urlRouterProvider.otherwise('/');
}]);

bower.json ( bower install)

{
  "name": "whatever",
  "version": "0.0.0",
  "dependencies": {
    "angular-ui-router": "~0.2.10",
    "angular": "~1.2.18",
    "jquery": "~2.1.1",
    "modernizr": "~2.8.2"
  }
}

answered Jun 19 '14 at 21:06

Ilan Frumer

32,059
8
70
84

Thanks Ilan - that's fixed some of the issues the app now runs as expected. I still get the "'angular' is not defined" error in the Grunt build and insterestingly the Angular files don't make it to the "dist" version, so my setup is wrong somewhere. I'll focus on the Angular for now and worry about Grunt later. – BENBUN Coder Jun 19 '14 at 21:42
Followed the advice here http://stackoverflow.com/questions/20837139/jshint-r10-angular-is-not-defined not sure it was correct thing to do, but it made the error go away. – BENBUN Coder Jun 19 '14 at 22:23

'angular' is not defined - why not?

1 Answers1

Solution