2016-05-31 16 views
0

Angular JSでページルーティングを実装しようとしていますが、ここでは機能しません。ここでANGULAR JSでページルーティングが機能しない

は、コードは次のとおりです。ここで

var app = angular.module('myApp', ['ngRoute']); 
app.config(function ($routeProvider) { 
    debugger; 
    $routeProvider 
     .when('/home', { 
      templateUrl: 'EmployeeHome.aspx', 
      controller: 'EmpCtrl' 
     }) 
     .when('/about', { 
      templateUrl: 'ContactUs.html', 
      controller: 'EmpCtrl' 
     }) 
     .when('/contact', { 
      templateUrl: 'About.html', 
      controller: 'EmpCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/home' 
     }); 
}); 

    app.controller('EmpCtrl', function ($scope, $http) 
    { 
    $scope.message = "Welcome friends."; 
    } 

は私のUIページには、私はあなたがすべてのあなたのhrefに '/' を忘れてしまったと思います EmployeeHome.aspx-

<head runat="server"> 
    <title></title> 
    <script src="Scripts/angular.js"></script> 
    <script src="Scripts/jquery-1.8.3.min.js"></script> 
    <script src="Scripts/angular-route.min.js"></script> 
    <script src="script.js"></script> 
</head> 
<header> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#"><i class="fa fa-home"></i>Home</a></li> 
      <li><a href="#about"><i class="fa fa-shield"></i>About Us</a></li> 
      <li><a href="#contact"><i class="fa fa-comment"></i>Contact Us</a></li> 
     </ul> 
    </header> 
+0

あなたのhtmlタグにng-app = "myApp"を追加しました –

+0

はい、当然でした –

+0

JavaScriptのコンソールにエラーメッセージが表示されますか? –

答えて

0

です。したがって、このような作業をする必要があります:

<li><a href="#"><i class="fa fa-home"></i>Home</a></li> 
<li><a href="#/about"><i class="fa fa-shield"></i>About Us</a></li> 
<li><a href="#/contact"><i class="fa fa-comment"></i>Contact Us</a></li> 
+0

私はすでに '/'で試しましたが、結果は同じです –

+0

誰にも解決策が見つかりませんでしたか? –

+0

@RiteshGuptaタグが表示されません。 'ng-app = "myApp"はこの通常ですか? – Walfrat

0

実行可能な例なしで伝えるのは難しい、それが今必要なのかどうかは覚えていないが、私は「$ routeProvider」を渡すと、このように機能:

angular.module('staffApp').config(['$routeProvider', 
    function($routeProvider) { 
     $routeProvider. 
     when('/home', { 
       templateUrl: 'EmployeeHome.aspx', 
       controller: 'EmpCtrl' 
     }). 
    ... 
関連する問題