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>

当我转到网址/sign_in时，为什么不显示模板文件？

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

编辑＃1

简单来说，我想要它，以便用户可以键入http://www.mysite.online/sign_in，模板/控制器应该显示该子模块。我已经更新了主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>

阅读材料

Modular AngularJS App Design

模板未使用＆＃39;子模块显示＆＃39;

2 个答案:

固定...