使用 'sub module' 不显示模板

Question

所以我有我的主模块，

var panther = angular.module('panther', ['panther.sign_in']).config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false  
    })  
});

它有 panther.sign_in,

的依赖

angular.module('panther.sign_in', ['ngRoute']).config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/sign_in', {
        controller: 'controller_sign_in',
        templateUrl: 'assets/js/modules/core/sign_in/template.html'
    });
}]);

控制器看起来像这样，

angular.module('panther.sign_in').controller('controller_sign_in', ['$scope', '$http', function ($scope, $http) {
    alert('test');
}]);

模板看起来像这样，

<h1>Test</h1>

当我转到 /sign_in 时，它显示，

我的 index.html 文件如下所示，

<!DOCTYPE html>
<html ng-app="panther">
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
    integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
    crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/base.css">

<title>Panther</title>
</head>
<body>
    <script type="text/javascript" src="cordova.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>

    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>

    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.min.js"></script>

    <!-- CORE PANTHER FILES! -->
    <script type="text/javascript" src="assets/js/panther.js"></script>

    <!-- MODULE(S) INITIALISED HERE! -->
    <script type="text/javascript" src="assets/js/modules/core/sign_in/module.js"></script>

    <!-- MODULE(S) CONTROLLER(S) INITIALISED HERE! -->
    <script type="text/javascript" src="assets/js/modules/core/sign_in/controller.js"></script>
</body>
</html>

为什么我去 URL /sign_in 时不显示模板文件？

其次，这是使用 Angular（使用子模块）拆分大型应用程序的正确方法吗？

编辑#1

简单来说，我想要它以便用户可以键入 http://www.mysite.online/sign_in 并且 template/controller 应该显示该子模块。我已经更新了主 panther 模块，如下所示：

var panther = angular.module('panther', ['panther.sign_in']).config(function ($routeProvider, $locationProvider) {
    /** Remove anything that has been appended to URL (#!). **/
    $locationProvider.hashPrefix('');
});

我已经将我的代码改成了这个，但还是不行。

Answer 1

您必须进行服务器端 url 重写，请参阅 html5mode 上的文档：

https://docs.angularjs.org/guide/$location#server-side

Answer 2

固定...

对于那些像我一样刚接触 Angular 的人，我忘记添加 ng-view 因此无法加载模板。结果什么都行不通，我所做的就是得到以下 HTML 并且它起作用了。

<div ng-view></div>

阅读Material

Modular AngularJS App Design

使用 'sub module' 不显示模板

Template not displaying using 'sub module'

html

javascript

angularjs

angular-routing

固定...