Angular app not running because of injection error

0
votes

I'm new to angular and I'm learning angular from a sample, but when I use the exact copy of the example code, it would not work, why is that?

<html ng-app="tw">
  <head>
    <meta charset="utf-8" />
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="ProteusThemes" />
  </head>

  <body> 
  <script type="text/javascript" src="angular.min.js"></script>
  <script>
  var twApp = angular.module("tw",[]);
  twApp.config(function($routeProvider){
    $routeProvider.when('/',{
    templateUrl: "templates/home.html",
    controller: "HomeController"
    })
    .otherwise({redirectTo:'/'});
  });
  twApp.controller("HomeController",['$scope',function($scope){
        alert("salam");
    }]);
  </script>
  This it simple home page
  <a href="">Home</a>
<div ng-view></div>
  </body>
</html>

And when it runs, I get the following error:

Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=tw&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0AM%2F%3C%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A6%3A417%0Aab%2Fp.%24injector%3C%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A38%3A7%0Ad%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A36%3A13%0Ae%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A36%3A283%0Ad%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A34%3A490%0Ag%2F%3C%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A35%3A117%0As%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A7%3A300%0Ag%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A34%3A399%0Aab%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A38%3A135%0Atc%2Fd%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A17%3A381%0Atc%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A18%3A179%0AJd%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A17%3A1%0A%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A249%3A428%0Aa%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A163%3A399%0Alf%2Fc%40http%3A%2F%2Flocalhost%2Fangular.min.js%3A32%3A384%0A http://localhost/angular.min.js Line 6

2
javascriptangularjs
the answers provided seem to cover this pretty solidly. However, I would like to suggest that you use the full angular.js instead of angular.min.js when troubleshooting errors, and posting a readable error message in the future. - Claies

2 Answers

0
votes

You forgot to add routing js and dependency:- 'ngRoute'

var twApp = angular.module("tw",['ngRoute']);

Add in index:-

 <script src="angular-route.js"></script> //after downloading

UPDATE Added plunker

Plunker

0
votes

  1. Include angular-router as a script, where X.Y.Z is the angular version you are using:

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>

  2. Add ngRoute as a dependecy to your app, when using $routeProvider:

    var twApp = angular.module("tw", ['ngRoute']);