视图模板未使用 $routeProvider 呈现

Question

我正在尝试切换不同路线的视图。我从这个非常基本的设置开始。但是我的视图模板根本没有被渲染。虽然没有错误。这是我的文件 定义路由的js文件。

var var mainapp = angular.module("routing", ['ngRoute']);
mainapp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider.when('/students', { templateUrl: 'students.html', controller: 'students' })
              .otherwise({redirectTo:'home.html'});
}]);
mainapp.controller('students', ['$scope',function ($scope) {
$scope.message = "Hello,This is students controller";
}]);

模板只是为了理解目的而简单

Students.js

<div class="container">
{{message}}
</div>

我一直在尝试将 html 模板文件保存在不同的文件夹中并尝试但无法显示结果。因此，现在我将所有内容都保存在 Scripts 文件夹中。项目结构非常基础和简单。我用的是Visual Studio 2012（在VS 2017上试过，使用的是angularjs 1.6.2版

Answer 1

您需要指定templateUrl 的路径。看起来你的其他方式也有点不对劲。您说您的 html 文件位于 Scripts 文件夹中，因此我的代码基于此。如果没有其他事情发生，这应该对你有用。

$routeProvider.when('/', { templateUrl: 'Scripts/home.html' })
              .when('/students', { templateUrl: 'Scripts/students.html', controller: 'students' })
              .otherwise({redirectTo:'/'});