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
– Pengyy, Commented May 25, 2017 at 2:49
Possible duplicate of AngularJs ReferenceError: angular is not defined — PRANSHU MIDHA
– PRANSHU MIDHA, Commented May 25, 2017 at 4:01

Md Alamin · Accepted Answer · 2017-05-25 02:51:34Z

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, 2017 at 2:51

Md Alamin

1,51213 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joseph Ateş Over a year ago

angular.module("tutorialCtrlModule", []) .controller("TutorialCtrl", ["$scope", function($scope) {......}}]) .controller("TutorialCtrl2", ["$scope", function($scope) { $scope.secondTutorial = "This is the second tutorial!"; }]); I have it

LXhelili · Accepted Answer · 2017-05-25 02:54:15Z

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, 2017 at 2:54

LXhelili

9806 silver badges14 bronze badges

2 Comments

Joseph Ateş Over a year ago

But I have all the directories and I also tried with a local webserver.

LXhelili Over a year ago

Everythings looks good, the problem seems to be in directories. Replace your local files with the online files of angular and angular-route!

Joseph Ateş · Accepted Answer · 2017-05-25 03:55:23Z

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.

A W · Accepted Answer · 2017-05-25 02:59:46Z

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, 2017 at 2:59

A W

1371 silver badge4 bronze badges

1 Comment

Joseph Ateş Over a year ago

I tried it in the div tag and body tag but did not work.

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Linked

Related