Страницы не загружаются в одностраничном приложении Angular JS

Я пытаюсь реализовать одностраничное приложение в AngularJs. Однако, когда я выбираю ссылку ({{item.Name}} в Tree.Html). Соответствующее представление не отображается в ng-View.

Любая помощь будет оценена

Основной.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>

Tree.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', функция ($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>


html angularjs single-page-application ngroute route-provider
person Amit Kumar    schedule 27.11.2017    source источник
comment
Как насчет использования «ui.router» вместо «ngRoute»? Эта проблема похожа на мой первый проект Angluar. Я не знаю, почему это произошло, но многие люди рекомендовали использовать «ui.router», и после того, как я последовал этому, моя проблема исчезла.   -  person Canet Robern    schedule 29.11.2017
comment
Это сработало. Можете ли вы сделать это как ответ, а не комментарий?   -  person Amit Kumar    schedule 04.12.2017
comment
Это хорошо для тебя! И это позор, что только я сделал было просто предложение. Я думаю, что единственное, что вы могли бы решить свою проблему, это только ваши усилия. :) Но для других людей, которые увидят этот пост, я напишу ответ без долгих объяснений. Спасибо.   -  person Canet Robern    schedule 04.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Однажды у меня возникла проблема, похожая на вашу.

Я пытался разобраться, и многие люди рекомендовали использовать ui.router вместо ngRoute.

Может быть, между ними больше различий конкретно.

Но даже это объяснение может помочь вам принять решение.

ngRoute — это базовый модуль angular, который подходит для базовых сценариев. Я считаю, что они добавят более мощные функции в следующих выпусках.

Ui-router — это дополнительный модуль, который решает проблемы ngRoute. В основном вложенные/сложные представления.

URL: https://github.com/angular-ui/ui-router

person Canet Robern    schedule 04.12.2017