页面未在单页应用程序 Angular JS 中加载答案

【问题标题】：Pages not loading in Single Page Application Angular JS页面未在单页应用程序 Angular JS 中加载
【发布时间】：2018-05-10 14:19:00
【问题描述】：

我正在尝试在 AngularJs 中实现单页应用程序。但是，当我选择链接时（Tree.Html 中的 {{item.Name}}）。 ng-View中不显示对应的view。

任何帮助将不胜感激

Main.html

<body ng-app="InfoModule" ng-controller="MainController" style="max-width:1000px; margin:auto">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Information</a>

        </div>
        <span class="pull-right navbar-text">{{UserName}}</span>
    </div>
</nav>

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

        Info Page
        <div ui-tree data-drag-enabled="false">
            <ol ui-tree-nodes ng-model="itemList" class="font-weight-normal">
                <li ng-repeat="item in itemList track by $index" ui-tree-node ng-include="'Tree.html'">

                </li>
            </ol>

        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
        <div ng-include="Details"></div>
        <div data-ng-view>

        </div>

    </div>
</div>
<div class="panel-footer">
    (C) My Solutions
</div>

树.html

<div ui-tree-handle class="tree-node tree-node-content">
<a class="btn btn-success btn-xs" ng-if="item.nodes && item.nodes.length > 0" ng-click="toggle(this)">
    <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
</a>
<a href="#Details" >
    {{item.Name}}
</a>

Master.js

var app = angular.module('InfoModule', ['ui.tree', 'ngRoute', 'ngStorage']);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

$routeProvider
.when('/login', {
    templateURL: 'Login.html',
    controller: '/mYscriptS/LoginController.js'
})
.when('Details', {
    templateURL: 'pages/Details.html',
    controller: '../mYscriptS/DetailsController.js'
})

    .when('/Main', {
        templateURL: 'main.html',
        controller: '/mYscriptS/MainController.js'
    });
//.otherwise({
//    redirectTo: 'pages/Main.html'
//    //templateURL: '/Main.html',
//    //controller: '/mYscriptS/MainController.js'
//});

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

$locationProvider.html5Mode(true);

}]);

详细信息.html

<div ng-controller="DetailsController" >
<div class="row">
    <div class="col-md-6">
        User Id
        {{UserName}}
    </div>
    <div class="col-md-6">
        <input type="text" name="txtUserId" />
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        Password
    </div>
    <div class="col-md-6">
        <input type="text" name="txtPassword" />
    </div>
</div>

【问题讨论】：

用 'ui.router' 代替 'ngRoute' 怎么样？这个问题与我的第一个 Angular 项目类似。我不知道为什么会发生这种情况，但很多人建议使用“ui.router”，在我遵循之后，我的问题就消失了。
那行得通。你能把它作为答案而不是评论吗？
对你有好处！很遗憾，只有我所做的只是建议。我认为你可以解决问题的唯一方法就是你的努力。 :) 但是对于将看到这篇文章的其他人，我会为此写一个答案，无需过多解释。谢谢。

标签： html angularjs single-page-application ngroute route-provider

【解决方案1】：

一旦我遇到了和你一样的问题。

我试过了，很多人建议使用 'ui.router' 而不是 'ngRoute'。

也许他们之间具体有更多的区别。

但即使只是这个解释，也可以帮助你决定一方。

ngRoute 是一个 Angular 核心模块，适用于基本场景。我相信他们会在即将发布的版本中添加更强大的功能。

Ui-router 是一个贡献模块，它克服了 ngRoute 的问题。主要是嵌套/复杂视图。

网址：https://github.com/angular-ui/ui-router

【讨论】：