不能讓Angular Routing在某些場合工作？

我一直在試圖讓角路由工作，每次我創建一個新的項目，它不起作用。我曾在一些項目中工作，但我永遠不知道爲什麼我新創建的項目不起作用。不能讓Angular Routing在某些場合工作？

它可能是很明顯的，謝謝任何幫助提前。

<!DOCTYPE html> 
    <html ng-app="app"> 
    <head> 
     <title></title> 
     <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
     <link href="Content/Styles.css" rel="stylesheet" /> 
     <script src="Scripts/angular.min.js"></script> 
     <script src="Scripts/angular-route.min.js"></script> 
    </head> 

    <body> 

     <a href="#/"> 
     <button class="btn btn-danger">Homepage</button></a> 
    <a href="#/about"> 
     <button class="btn btn-success">About</button></a> 
    <a href="#/date"> 
     <button class="btn btn-warning">Date</button></a> 


     <div class="row"> 
      <div ng-view> 
      </div> 
     </div> 
     <script src="SinglePageApp/app.js"></script> 
     <script src="Scripts/bootstrap.min.js"></script> 

    </body> 
    </html> 

    app.js file 


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

    app.config(function ($routeProvider) { 
     $routeProvider 
     //default page 
     .when('/', { 
      templateUrl: "pages/homepage.html", 
      controller: 'HomeCtrl' 
     }) 
    //about page 
    .when('/about', { 
     templateUrl: "pages/about.html", 
     controller: 'AboutCtrl' 
    }) 
    //date page 
    .when('/date', { 
     templateUrl: "pages/date.html", 
     controller: 'DateCtrl' 
    }); 
    }); 

    app.controller('HomeCtrl', ['$scope', function ($scope) { 
     $scope.homepage = "Homepage"; 
    }]); 

    app.controller('AboutCtrl', ['$scope', function ($scope) { 
     $scope.about = "Lorem ipsum............"; 
    }]); 

    app.controller('DateCtrl', ['$scope', function ($scope) { 
     $scope.dateNow = new Date(); 
    }]);

來源

2016-01-26 Jason

什麼是您所使用的網址是什麼？什麼是錯誤？ – Beartums

是角度和角度路線相同的版本？ – Derlin

它已經開始工作了，這是我的目錄佈局，是否有一個特定的佈局文件夾需要採取路由工作？ – Jason

試試這個plunker：

http://embed.plnkr.co/L6E4GCe3O0Jh1vqKyGFD/

我用在the angularJS documentation的例子創建你的用例。

您應該使用自己的模板更改模板文件路徑。我也沒有包括bootstrap。

如果你想使用按鈕，那麼你可以使用this example in plunkr based on this answer by Josh David Miller（upvote他，如果你使用他的指令）。指令是一種自定義html的方法，在這裏我們使用一個作爲html屬性（您也可以將它們用作獨立元素）來創建一個超鏈接按鈕。

來源

2016-01-26 10:39:56

Here's fiddle for you that works as expected

不知道爲什麼你的代碼不能正常工作，有角非常糟糕的調試工具。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script> 
<div> 
    <a href="#/"> 
    <button class="btn btn-danger">Homepage</button> 
    </a> 
    <a href="#/about"> 
    <button class="btn btn-success">About</button> 
    </a> 
    <a href="#/date"> 
    <button class="btn btn-warning">Date</button> 
    </a> 
    <div class="row"> 
    <div ng-view></div> 
    </div> 
</div> 
<script type="text/ng-template" id="pages/homepage.html"> 
    {{homepage}} 
</script> 
<script type="text/ng-template" id="pages/about.html"> 
    {{about}} 
</script> 
<script type="text/ng-template" id="pages/date.html"> 
    {{dateNow}} 
</script>

腳本文件看起來像這樣

var app = angular.module('app', ['ngRoute']); 
    app.config(function ($routeProvider) { 
    $routeProvider 
    //default page 
    .when('/', { 
     templateUrl: "pages/homepage.html", 
     controller: 'HomeCtrl' 
    }) 
    //about page 
    .when('/about', { 
     templateUrl: "pages/about.html", 
     controller: 'AboutCtrl' 
    }) 
    //date page 
    .when('/date', { 
     templateUrl: "pages/date.html", 
     controller: 'DateCtrl' 
    }) 
    .otherwise({redirectTo:'/'}); 
}); 
app.controller('HomeCtrl', ['$scope', function ($scope) { 
    $scope.homepage = "Homepage"; 
}]); 

app.controller('AboutCtrl', ['$scope', function ($scope) { 
    $scope.about = "Lorem ipsum............"; 
}]); 

app.controller('DateCtrl', ['$scope', function ($scope) { 
    $scope.dateNow = new Date(); 
}]); 
angular.bootstrap(document.body, ['app']);

來源

2016-01-26 10:40:18

不能讓Angular Routing在某些場合工作？

回答

相關問題