2016-12-22 8 views
2

私はangularJsに問題があります。基本的にリンクを押すとページが変わらないので、助けてくれますか? AngularJS - angularJSルートの問題

// app.js 
 

 
var app = angular.module("geral", ["ngRoute"]); 
 
app.config(function ($routeProvider) 
 
{ 
 
    $routeProvider.when('/', 
 
    { 
 
     controller: "HomeController", 
 
     templateUrl: "App/Views/home.html" 
 
    }) 
 
    .when('/secondPage', 
 
    { 
 
     controller: "SecondController", 
 
     templateUrl: "App/Views/second.html" 
 
    }) 
 
    .otherwise({ redirectTo: '/' }) 
 
}); 
 

 

 
// HomeController.js 
 

 
app.controller("HomeController", ["$scope", function($scope) 
 
{ 
 
    $scope.persons = 
 
    [ 
 
     { 
 
      name: "...", 
 
      age: 18 
 
     }, 
 
     { 
 
      name: "...", 
 
      age: 82 
 
     } 
 
    ]; 
 
}]); 
 

 

 
// SecondController.js 
 

 
app.controller("SecondController", ["$scope", function($scope) 
 
{ 
 
    $scope.temp = setInterval(function() 
 
    { 
 
     if (parseInt($("#circle").css("top")) + parseInt($("#circle").css("height")) < window.innerHeight) 
 
      $("#circle").css("top", (parseInt($("#circle").css("top")) + 1).toString() + "px"); 
 
     else clearInterval($scope.temp); 
 
    }, 10); 
 
}]);
<!--Index.html--> 
 

 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
     <link href="Content/bootstrap.min.css" type="text/css" rel="stylesheet" /> 
 
     <link href="Content/bootstrap-theme.min.css" type="text/css" rel="stylesheet" /> 
 
     <link href="Content/font-awesome.min.css" type="type/css" rel="stylesheet" /> 
 
     <link href="Content/geral.css" type="text/css" rel="stylesheet" /> 
 
     <script src="Scripts/Shared/angular.min.js"></script> 
 
     <script src="Scripts/Shared/angular-route.min.js"></script> 
 
    </head> 
 
    <body ng-app="geral"> 
 
     <div ng-view></div> 
 
     <script src="Scripts/Shared/jquery-3.1.1.min.js"></script> 
 
     <script src="Scripts/Shared/bootstrap.min.js"></script> 
 
     <script src="Scripts/Shared/knockout.js"></script> 
 
     <script src="Scripts/Shared/geral.js"></script> 
 
     <script src="Scripts/app.js"></script> 
 
     <script src="Scripts/Controllers/HomeController.js"></script> 
 
     <script src="Scripts/Controllers/SecondController.js"></script> 
 
    </body> 
 
</html> 
 

 

 
<!--home.html--> 
 

 
<div> 
 
    <div class="container" ng-repeat="person in persons"> 
 
     <span class="info">{{ person.name }}</span><br /> 
 
     <span class="info">{{ person.age | number }}</span><hr /> 
 
    </div> 
 
    <a href="#/secondPage">Start cicle</a> 
 
</div> 
 

 
<!--second.html--> 
 

 
<div class="main"> 
 
    <div id="circle"></div> 
 
</div>

私はすでにコントローラーの役割を反転しており、「/」に関連する1つが正常に動作しますので、問題は、コントローラスクリプトであるとは考えていません。ところで、ポイントは1ページのアプリケーションを作ることです。

+0

男を見てください.co)または[fiddle](http://jsfiddle.net)を使って問題を実演してください – Minato

+0

他には私にここに入れてもらいたいですか? – Person

+0

問題についての詳細は知りたいですか? – Person

答えて

0

私の知る限り、アンカータグにはhrefがあります。 // plnkr:

これを変更してみてください、

<a href="#/secondPage">Start cicle</a> 

<a href="#secondPage">Start cicle</a> 

には、これが(HTTP最小[plunk]を作成を支援されていません。この例でplunk

+0

はい、問題はアンカーでした、私は '#/ secondPage'を持っていましたので、 '#!/ secondPage'に変更して、今はうまくいきます:) – Person

+0

URLがなぜ変わるのか分かりません。 /index.html#!/ 'の代わりに' .../index.html#/ '、なぜそれがURLに感嘆符を追加するか考えてみませんか? – Person

+0

私は実際にこれを覚えていませんが、私はURLに '! 'を追加するという角度を考えています。ヘルプのおかげで、 'href ="#secondPage "' 'href ="#!/ secondPage "' – Minato