2016-02-10 81 views
0

工作在一個網絡應用程序我正在實施路線,我已經添加了路線CDN,並且當我添加ngRoute作爲依賴到myApp它現在不工作。在添加ngRoute viewproducts之前工作正常,但現在我所看到的是: {{product.name}} {{product.company}}而不是實際值。爲什麼在AngularJS中添加依賴項會導致錯誤?

模塊代碼:

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

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

控制器代碼:

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代碼:

<!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> 
+1

你能有添加HTML呢?控制檯中是否存在某種錯誤? –

+0

您在瀏覽器控制檯中看到什麼錯誤? – Starscream1984

回答

1

它看起來像你米你正在重新編寫你的模塊。 你的項目中的其他地方是否有以下代碼?

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

如果這樣做,第二個模塊與括號調用將重新定義現有的模塊。嘗試將ngRoute依賴關係添加到第一個模塊定義中,並刪除co​​nfig中的一個括號。它應該看起來像下面。

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

腳本的順序很重要!您創建角模塊應用程序的文件:

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

此文件應在angular-route文件之後。

修正:

<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> 
+1

即使沒有這個工作@Stefan –

+1

我得到了現在工作正常的看法,但是當我點擊添加產品時,它被吊死 CODE {myApp.config(function($ routeProvider){routeProvider。 when('/ viewproduct 」,{ templateUrl: 'viewproducts.html', 控制器: 'getController' }) 時( '/ addProduct命令',{ templateUrl: 'addproduct.html', 控制器: 'myController的' }) });}和Console給出了這個錯誤(RangeError:超出最大調用堆棧大小) –

相關問題