Question

我是Angular JS的初学者。我正在完成这里列出的教程：＆＃34; https://tests4geeks.com/tutorials/single-page-application-using-angularjs-tutorial/＆＃34;。我无法路由来自单独模板文件的页面。该教程的作者指出＆＃34;浏览器不支持使用ajax从磁盘加载资源＆＃34;。因此，我将文件上传到我的VPS。但我仍然无法进行路由。我已经使用配置良好的VPS成功托管了许多网页。

angular_test.html

<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
  </head>

  <body>
    <a href="#/">Home</a>
    <a href="#/blog">Blog</a>
    <a href="#/about">About</a>

    <h1>{{message}}</h1>
     <div ng-view></div>

    <script src="app.js"></script>
  </body>
</html>

app.js

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

app.controller('HomeController', function($scope) {
  $scope.message = 'This is home controller';
});
app.controller('BlogController', function($scope) {
  $scope.message = 'Hello from BlogController';
});

app.controller('AboutController', function($scope) {
  $scope.message = 'Hello from AboutController';
});
app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'home.html',
    controller  : 'HomeController'
  })

  .when('/blog', {
    templateUrl : 'blog.html',
    controller  : 'BlogController'
  })

  .when('/about', {
    templateUrl : 'about.html',
    controller  : 'AboutController'
  })

  .otherwise({redirectTo: '/'});
});

home.html的

<h1>Home</h1>

<h3>{{message}}</h3>

blog.html

<h1>Blog</h1>

<h3>{{message}}</h3>

about.html

<h1>About</h1>

<h3>{{message}}</h3>

Answer 1

我明白了。这是因为我的Chrome浏览器无法下载我的资源文件。我只是做了以下步骤。（Failed to load resource under Chrome） 1.右键单击chrome 2.去'检查元素' 3.在顶部的某处查找“网络”选项卡。点击它。 4.选中“禁用缓存”复选框。它解决了我的问题，但我不知道为什么。

Answer 2

看起来您的示例适合我（运行http-server https://www.npmjs.com/package/http-server）

您确定目录结构是否正确

- index.html (angular_test.html)
- app.js
- pages/
  |-- home.html
  |-- blog.html
  |-- about.html

Answer 3

试试这个

<!DOCTYPE html>

<html>
<head>
    <script src="~/angular-1.5.3/angular-1.5.3/angular.min.js"></script>
    <script src="~/angular-1.5.3/angular-1.5.3/angular-route.min.js"></script>
    <meta name="viewport" content="width=device-width" />
    <title>test</title>
</head>
<body ng-app="myApp">
    <a href="#/contact">contact</a>
    <a href="#/about">about</a>
    <div ng-view></div>
</body>
</html>
<script>
    angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
        $routeProvider.when('/home', {
            controller: 'homeCtrl',
            templateUrl: '/Html/home.html'
        });
        $routeProvider.when('/contact', {
            controller: 'contactCtrl',
            templateUrl: '/Html/contact.html'
        });
        $routeProvider.when('/about', {
            controller: 'aboutCtrl',
            templateUrl: '/Html/about.html'
        });

        $routeProvider.otherwise({ redirectTo: "/home" });
    }).controller('homeCtrl', function ($scope) {
        $scope.PageName = "Home Page "
    }).controller('contactCtrl', function ($scope) {
        $scope.PageName = "Contact Page "
    }).controller('aboutCtrl', function ($scope) {
        $scope.PageName = "About Page "
    })
</script>

Angular.JS路由问题

3 个答案: