Uncaught Referenceerror Angular Is Not Defined

Asked

Viewed 855 times

1

My code

<!DOCTYPE html>
<html ng-app="myapp">

<head>
    <title>Testee</title>
    <!-- Bootstrap CSS -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container">
  <p><i>teste</i></p>

  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" href="#">teste</a>
      <ul class="nav">
        <li><a ui-sref="route1">lugar 1</a></li>
        <li><a ui-sref="route2">lugar 2</a></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="span12">
      <div class="well" ui-view></div>        
    </div>
  </div>         

  <!-- Angular -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
  <!-- UI-Router -->
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>

  <!-- App Script -->
  <script>
    var myapp = angular.module('myapp', ["ui.router"])
    myapp.config(function($stateProvider, $urlRouterProvider){

      // For any unmatched url, send to /route1
      $urlRouterProvider.otherwise("/route1")

      $stateProvider
        .state('route1', {
            url: "/route1",
            templateUrl: "route1.html"
        })
          .state('route1.list', {
              url: "/list",
              templateUrl: "route1.list.html",
              controller: function($scope){
                $scope.items = ["A", "List", "Of", "Items"];
              }
          })

        .state('route2', {
            url: "/route2",
            templateUrl: "route2.html"
        })
          .state('route2.list', {
              url: "/list",
              templateUrl: "route2.list.html",
              controller: function($scope){
                $scope.things = ["A", "Set", "Of", "Things"];
              }
          })
    })
  </script>

</body>

</html>
javascript html
  • 1

    Welcome to Stack Overflow! The way your question looks doesn’t make it clear what your question/problem is. Read the guide [Ask] and then edit your question: [Edit]

1 answer

1

I think your problem is of asynchrony.

You need to load the Angular library within the <head> because only then is it loaded before the page loads and the rest of javascript is run.

What is happening now is the code detecting a remote file and loading it asynchronously, that is to continue executing the script on the page until you receive the request/script back. However, as the script on the page needs the library this gives:

Uncaught Referenceerror Angular Is Not Defined

Use like this:

<head>
    <title>Testee</title>

    <!-- Bootstrap CSS -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Angular -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js">    </script>

    <!-- UI-Router -->
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
</head>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.