Having error "ReferenceError: angular is not defined" in Angular js

Question

HTML file

   <!DOCTYPE html>
    <html ng-app="tutorialApp">
    <head>
        <meta charset="UTF-8">
        <title>Tutorial App</title>
        <script src="lib/angular.min.js"></script>
        <script src="lib/angular-route.min.js"></script>
        <script src="JS/app.js"></script>
        <script src="JS/controller/tutorialCtrl.js"></script>

    </head>
    <body>
    <div ng-view></div>

    </body>
    </html>

js file

var app = angular.module("tutorialApp", ["ngRoute", "tutorialCtrlModule"]);

app.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "views/tutorial.html",
            controller: "TutorialCtrl"
    })
        .when("/tutorialSecond", {
            templateUrl: "views/tutorialSecond.html",
            controller: "TutorialCtrl2"
        })
        .otherwise({
            redirectTo: "/"
        });
});

When I run HTML file I see the first page. When I click to link that I created, it does not get me to the link. For the js file, there is an error "ReferenceError: angular is not defined" I do not know what to do.

check `devtool -> network` to see whether `angular.min.js` is successfully loaded. — Pengyy, May 25 '17 at 02:49
Possible duplicate of [AngularJs ReferenceError: angular is not defined](https://stackoverflow.com/questions/14260399/angularjs-referenceerror-angular-is-not-defined) — PRANSHU MIDHA, May 25 '17 at 04:01

score 1 · Answer 1 · answered May 25 '17 at 02:51

1

In your tutorialCtrl.js file U just define your controller name , i think it's maybe help u.

app.controller('TutorialCtrl', ['$scope',function ($scope) {

}]);
app.controller('TutorialCtrl2', ['$scope',function ($scope) {

}]);

answered May 25 '17 at 02:51

Md Alamin

1,084
11
19

angular.module("tutorialCtrlModule", []) .controller("TutorialCtrl", ["$scope", function($scope) {......}}]) .controller("TutorialCtrl2", ["$scope", function($scope) { $scope.secondTutorial = "This is the second tutorial!"; }]); I have it – Joseph Ateş May 25 '17 at 02:57

score 1 · Answer 2 · answered May 25 '17 at 02:54

1

Your local file is, presumably, being loaded from your file system (with a file:// URI) instead of a local website (with http://localhost/) and the resource is not available at file://lib/angular.min.js.

You would be better off using a local webserver for testing as there are plenty of things (especially around Ajax, which you are using) that work differently between file:// and http://.

answered May 25 '17 at 02:54

LXhelili

980
5
14

But I have all the directories and I also tried with a local webserver. – Joseph Ateş May 25 '17 at 03:04
Everythings looks good, the problem seems to be in directories. Replace your local files with the online files of angular and angular-route! – LXhelili May 25 '17 at 03:09

score 1 · Accepted Answer · answered May 25 '17 at 03:55

I figured out what the problem is. I have to put:

app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');

into app.js. So It will be like this:

var app = angular.module ("groceryListApp", ["ngRoute"]);

app.config(function ($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider
        .when("/", {
            templateUrl: "views/groceryList.html",
            controller: "GroceryListItemsController"
        })
        .when("/addItem", {
            templateUrl: "views/addItem.html",
            controller: "GroceryListItemsController"
        })
        .when("/addItem/:id/:cat", {
            templateUrl: "views/addItem.html",
            controller: "GroceryListItemsController"
        })
        .otherwise({
            redirect: "/"
        })
});
app.controller("HomeController", ["$scope", function ($scope) {
    $scope.appTitle = "Grocery List";
}]);

app.controller("GroceryListItemsController", ["$scope", "$routeParams", function ($scope, $routeParams) {

    $scope.groceryItems = [
        {completed: true, itemName: 'milk', date: '2017-05-01'},
        {completed: true, itemName: 'cookies', date: '2017-05-01'},
        {completed: true, itemName: 'ice cream', date: '2017-05-02'},
        {completed: true, itemName: 'potatoes', date: '2017-05-02'},
        {completed: true, itemName: 'cereal', date: '2017-05-03'},
        {completed: true, itemName: 'bread', date: '2017-05-03'},
        {completed: true, itemName: 'eggs', date: '2017-05-04'},
        {completed: true, itemName: 'tortillas', date: '2017-05-04'}
    ]

    $scope.rp = "Route Paramater Value: " + $routeParams.id + + $routeParams.cat;

}]);

Why I did is that due to Angular's update from 1.5 to 1.6, the '#!' is the new default hash prefix.

score 0 · Answer 4 · answered May 25 '17 at 02:59

0

Well, I have a feeling it might be simpler than you think: most people don't put ng-app in the html tag but instead in a div or body tag: because the html tag is rendered before the head and so I believe that's the problem.

answered May 25 '17 at 02:59

A W

137
1
4

I tried it in the div tag and body tag but did not work. – Joseph Ateş May 25 '17 at 03:15

Having error "ReferenceError: angular is not defined" in Angular js

4 Answers4