Why adding dependency causes error in AngularJS?

Question

Working on a web app i am implementing routes , i have added route CDN and when i added ngRoute as a dependency to myApp it is not working now.Before adding ngRoute viewproducts was working fine but now what i am seeing is : {{product.name}} {{product.company}} and not the actual values.

Module CODE :

var myApp = angular.module('myApp', ['ngRoute']);

    myApp.config(function($routeProvider){
        $routeProvider.
            when('/addproduct', {
                  templateUrl:'addproduct.html',
                  controller:'myController'
             })
});

Controller CODE :

myApp.controller("myController",function($scope,$http){
    $scope.insertData = function(){
        $http.post("addProduct.php",{'pname': $scope.productname,'company': $scope.company,'price': $scope.price,'quantity':$scope.quantity})
        .success(function(data,status,headers,config){

           $scope.successMessage = "Inserted Successfuly!"; 
        });
    }

});

HTML CODE:

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Dashboard</title>
        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700, 600,500,400,300' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <link rel="stylesheet" href="main.css">
        <script type="text/javascript" src="js/angular/angular.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/data.js"></script>
        <script src="main.js"></script>
        <script src="angularkhan.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


    </head>
    <body ng-controller="myController">
        <div class="header">
            <div class="logo">
                <i class="fa fa-tachometer"></i>
                <span>Dashboard</span>
            </div>
            <a href="#" class="nav-trigger"><span></span></a>
        </div>
        <div class="side-nav">
            <div class="logo">
                <i class="fa fa-tachometer"></i>
                <span>Dashboard</span>
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="#">
                            <span><i class="fa fa-user"></i></span>
                            <span>Users</span>
                        </a>
                    </li>
                    <li>
                        <a href="addproduct.html">
                            <span><i class="fa fa-user"></i></span>
                            <span>Add Product</span>
                        </a>
                    </li>
                    <li>
                        <a href="viewproducts.html">

                            <span><i class="fa fa-envelope"></i></span>
                            <span>View Products</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="#">
                            <span><i class="fa fa-bar-chart"></i></span>
                            <span>Analytics</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span><i class="fa fa-credit-card-alt"></i></span>
                            <span>Payments</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="main-content">
            <div class="title">
                Add Product
            </div>

            <div class="main" ng-view> 

                <form style="padding:10px">
                      <div class="form-group">
                        <label for="ProductName">Product Name</label>
                        <input type="text" class="form-control" placeholder="Product Name" ng-model="productname">
                      </div>
                      <div class="form-group">
                        <label for="company">Company </label>
                        <input type="text" class="form-control" placeholder="company" ng-model="company">
                      </div>
                      <div class="form-group">
                        <label for="company">Price </label>
                        <input type="text" class="form-control" placeholder="price" ng-model="price">
                      </div>
                      <div class="form-group">
                        <label for="company">Quantity </label>
                        <input type="text" class="form-control" placeholder="quantity" ng-model="quantity">
                      </div>
                      <button type="submit" class="btn btn-default" ng-click="insertData()">Submit</button>
                      <h1>{{successMessage}}</h1>

                </form>
            </div>
        </div>

    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</html>

Can you have add the html as well? And is there some kind of error in the console? — Stefan Dimov
– Stefan Dimov, Commented Feb 10, 2016 at 14:09

Chris Mc Cormick · Accepted Answer · 2016-02-10 14:22:17Z

1

It looks like you may be redifining your module. Do you have the following code elsewhere in your project?

var myApp = angular.module('myApp', [...]);

If you do, the second module call with brackets would redefine the existing module. Try adding the ngRoute dependency to the first module definition and remove the brackets of the one in config. It should then look like below.

var myApp = angular.module('myApp');

answered Feb 10, 2016 at 14:22

Chris Mc Cormick

913 bronze badges

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

Comments

Stefan Dimov · Accepted Answer · 2016-02-10 14:23:36Z

1

The order of your scripts matters! The file where you create your angular module app:

var myApp = angular.module('myApp', ['ngRoute']);

This file should be after the angular-route file.

Fixed:

<script src="js/angular/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<script src="main.js"></script>
<script src="angularkhan.js"></script>

answered Feb 10, 2016 at 14:23

Stefan Dimov

6115 silver badges11 bronze badges

1 Comment

Iftikhar uddin Over a year ago

i got the view which is working fine now but WHEN i click ADD PRODUCT it get's hanged CODE {myApp.config(function($routeProvider){ $routeProvider. when('/viewproduct',{ templateUrl: 'viewproducts.html', controller: 'getController' }). when('/addproduct',{ templateUrl: 'addproduct.html', controller: 'myController' }) });} and Console gives this error (RangeError: Maximum call stack size exceeded)

Collectives™ on Stack Overflow

Why adding dependency causes error in AngularJS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related