Javascript 在某些情况下，角度布线似乎无法正常工作？_Javascript_Html_Angularjs

Javascript 在某些情况下，角度布线似乎无法正常工作？

javascript html angularjs

Javascript 在某些情况下，角度布线似乎无法正常工作？,javascript,html,angularjs,Javascript,Html,Angularjs,我一直试图让角度布线工作，每次我创建一个新项目，但它不工作。我曾在一些项目中使用过它，但我始终不明白为什么我新创建的项目不起作用这可能是显而易见的，谢谢你的帮助 <!DOCTYPE html> <html ng-app="app"> <head> <title></title> <link href="Content/bootstrap.min.css" rel="styles

我一直试图让角度布线工作，每次我创建一个新项目，但它不工作。我曾在一些项目中使用过它，但我始终不明白为什么我新创建的项目不起作用

这可能是显而易见的，谢谢你的帮助

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


app.js文件
var app=angular.module（'app'，['ngRoute']）；
app.config（函数（$routeProvider）{
$routeProvider
//默认页
。当（“/”{
templateUrl:“pages/homepage.html”，
控制器：“HomeCtrl”
})
//关于页面
.when（“/关于”{
templateUrl:“pages/about.html”，
控制器：“AboutCtrl”
})
//日期页
.when（“/date”{
templateUrl:“pages/date.html”，
控制器：“DateCtrl”
});
});
app.controller（'HomeCtrl'，['$scope'，函数（$scope）{
$scope.homepage=“主页”；
}]);
app.controller（'AboutCtrl'，['$scope'，函数（$scope）{
$scope.about=“Lorem ipsum…………”；
}]);
app.controller（'DateCtrl'，['$scope'，函数（$scope）{
$scope.dateNow=新日期（）；
}]);

试试这个小玩意儿：

我已经使用了上的示例来创建您的用例

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

如果您想使用按钮，那么您可以使用（如果您使用他的指令，请向上投票）。指令是自定义html的一种方式，在这里，我们将其用作html属性（您也可以将其用作独立元素）来创建超链接按钮。

不确定代码为什么不工作，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>

您正在使用的URL是什么？有什么错误？angular和angular route是同一个版本吗？它又开始工作了，这是我的目录布局，是否有一个特定的布局文件夹需要采取路由工作？？

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