2017-02-20 901 views
0

** - 路由不適用於Angular JS。請幫忙。附帶HTML代碼和js文件。 - ** 下面是我的HTML代碼中的AddNew順序點擊鏈接時Angular JS路由在下面的代碼上不起作用。 URL

<!DOCTYPE html> 
<html> 
<head> 
    <title>AngularJS Routing Examples</title> 
    <meta charset="utf-8" /> 
    <link href="Content/bootstrap.css" rel="stylesheet" /> 
</head> 
<body ng-app="sampleApp"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-3"> 
       <ul class="nav"> 
        <li> 
         <a href="#AddNewOrder">Add New Order</a> 
        </li> 
        <li> 
         <a href="#ShowOrder">Show Orders</a> 
        </li> 
       </ul> 
      </div> 
      <div class="col-md-9"> 
       <div ng-view> 

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

    <script src="Scripts/angular.js"></script> 
    <script src="Scripts/angular-route.js"></script> 
    <script src="script/app.js"></script> 
</body> 
</html> 


/// <reference path="C:\Dev\WebApplication1\WebApplication1\Scripts/angular.js" /> 
var sampleApp = angular.module('sampleApp', ['ngRoute']); 
//Define Routing 
sampleApp.config(function ($routeProvider) { 
    $routeProvider.when('/AddNewOrder', { 
     templateUrl: 'templates/AddNewOrder.html', 
     controller: 'AddOrderController' 
    }).when('/ShowOrder', { 
     templateUrl: 'templates/ShowOrder.html', 
     controller: 'ShowOrderController' 
    }); 
}); 

sampleApp.controller('AddOrderController', function ($scope) { 
    $scope.message = "This is Add Order screen"; 
}); 

sampleApp.controller('ShowOrderController', function ($scope) { 
    $scope.message = "This is show Order screen"; 
}); 

錯誤的URL是越來越瀏覽器的地址欄填充。 http://localhost:63022/Sample1.html#!#AddNewOrder

請提出這裏有什麼問題..路由根本不起作用。

+0

請幫助這裏..我不能夠找到爲什麼這個路由不工作。 – Hemant

+0

不要在''href'屬性前加'#'。看到這裏的例子〜https://docs.angularjs.org/api/ngRoute/service/$route#example – Phil

+0

嘗試使用ui-sref代替href –

回答

1

您的鏈接地址錯誤。 試試這個:

  <li> 
       <a href="#/AddNewOrder">Add New Order</a> 
      </li> 
      <li> 
       <a href="#/ShowOrder">Show Orders</a> 
      </li> 

或者沒有#/所有

+0

所以它的工作?如果確實如此,請不要忘記標記答案。 – spilafis

+0

它沒有工作.still相同的問題 – Hemant