CODEWITHSUNDEEP
javascriptangularjs
BENBUN Coder
BENBUN Coder

Reputation: 4881

'angular' is not defined - why not?

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'
        });

}]);

Upvotes: 0

Views: 1825

Answers (1)

Ilan Frumer
Ilan Frumer

Reputation: 32397

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

Upvotes: 2

Related Questions