CODEWITHSUNDEEP
javascriptangularjs
Joseph Ateş
Joseph Ateş

Reputation: 33

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

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.

Upvotes: 0

Views: 1900

Answers (4)

Joseph Ateş
Joseph Ateş

Reputation: 33

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.

Upvotes: 1

A W
A W

Reputation: 137

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.

Upvotes: 0

LXhelili
LXhelili

Reputation: 980

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://.

Upvotes: 1

Md Alamin
Md Alamin

Reputation: 1462

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) {

}]);

Upvotes: 1

Related Questions