Angular.JS路由问题

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

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>

来源

2016-05-23 Min Htet Oo

它看起来像你的榜样为我工作（运行http-serverhttps://www.npmjs.com/package/http-server）

你是否确信你的目录结构是正确的

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

来源

2016-05-23 14:42:54

我有我的目录错误，我编辑了我的代码。但它仍然无法正常工作。您可以在这里查看“http://128.199.161.212/gym/Angular/angular_test.html”。 –

试试这个

<!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>

来源

2016-05-23 14:48:17

我明白了。这是因为我的浏览器可以' （Failed to load resource under Chrome） 1.右击chrome 2.转到'检查元素' 3.查找顶部某处的“网络”选项卡。点击它。 4.检查'禁用缓存'复选框。它解决了我的问题，但我不知道为什么。

来源

2016-05-23 15:52:26

Angular.JS路由问题

回答

相关问题