Angular JS路由不工作

雖然我想點擊顯示它沒有顯示任何東西，我浪費了很多時間在這個，但沒有運氣可以幫助一些人。Angular JS路由不工作

文件....

app.js
controller.js
的index.html
show.html

的index.html

<html ng-app='Java4sApp'> 
<head> 
    <title>Angular Js Tutorials _ Java4s</title> 
    <script type="text/javascript" src="angular.min.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
    <script type="text/javascript" src="controllers.js"></script> 
    </head> 
<body> 

<div ng-controller='Java4sController'> 



      Settings : 
      <a href="#add">Add Details</a> | <a href="#show">Show Details</a> 

      <div ng-view></div> 

</div> 

</body> 
</html>

個

show.html

<html ng-app='Java4sApp'> 
<head> 
    <title>Angular Js Tutorials _ Java4s</title> 
    <script type="text/javascript" src="angular.min.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
    <script type="text/javascript" src="controllers.js"></script> 
</head> 
<body> 

<div ng-controller='Java4sController'> 


      <input type="text" ng-model="myModel" /> 

      <ul> 
       <li ng-repeat='person in people | filter:myModel'>{{person.name}}</li> 
      </ul> 


</div> 

</body> 
</html>

controller.js

app.config(['$routeProvider', function($routeProvider) { 

    $routeProvider. 
     when('/add', { 
     controller: 'Java4sController', 
     templateUrl: '/add.html' 
    }). 
     when('/show', { 
     controller: 'Java4sController', 
     templateUrl: '/show.html' 
    }). 
     otherwise({ 
     redirectTo: '/index.html' 
     }); 
}]); 

app.controller("Java4sController",function($scope){ 

     $scope.people = [ 
      {name: 'Siva', city: 'Cary'}, 
      {name: 'Teja', city: 'Raleigh'}, 
      {name: 'Reddy', city: 'Durham'}, 
      {name: 'Venky', city: 'Denver'}, 
      {name: 'Arun', city: 'Texas'} 
    ]; 

});

app.js

var app = angular.module("Java4sApp",[]);

謝謝。

來源

2014-03-27 Bharath

您是否在控制檯中出現錯誤？ – Tharaka

沒有錯誤塔拉...！ – Bharath

http://angulartutorial.blogspot.in/2014/02/how-to-start-with-angular.html – Prashobh

您需要在創建模塊時注入'ngRoute'依賴項。

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

還要確保您獲得角路由JS和添加引用它，在你的index.html

<script src="scripts/angular-route.js"></script>

一個很好的例子可以發現here

請讓我知道如果這不能解決您的問題

UPDATE

這是一個簡單的plunker顯示AngularJS路由

來源

2014-03-27 04:39:11 Tharaka

嗨塔拉，補充說，但沒有運氣，如果可能的話，你可以連接我的系統。 – Bharath

在一些例子中，他們沒有加入ngRoute，它讓Thara感到困惑。 – Bharath

我在代碼中看到了很多問題。 1.我看不到您已經使用了ngView 2.您正在嘗試共享多個控制器（這很糟糕）讓我搭起一個重擊器n請參閱 – Tharaka

Angular JS路由不工作

回答

相關問題