Question

我一直试图让角度路由工作，每次我创建一个新项目，它都不起作用。我已经让它在一些项目中工作，但我永远不会明白为什么我新创建的项目不起作用。

它可能是显而易见的，感谢任何提前帮助。

  <!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();
    }]);

Answer 1

试试这个plunker：

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

我已使用the angularJS documentation的示例来创建您的用例。

您应该使用自己的模板路径更改模板文件路径。我还没有包括bootstrap。

如果你想使用按钮，那么你可以使用this example in plunkr based on this answer by Josh David Miller（如果你使用他的指令，就投票给他）。指令是一种自定义html的方法，这里我们使用一个作为html属性（你也可以将它们用作独立元素）来创建一个超链接按钮。

Answer 2

Here's fiddle for you that works as expected

不确定为什么你的代码不起作用，angular有很糟糕的调试工具。

<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']);

似乎无法在某些场合使Angular Routing工作？

2 个答案: