Pages not loading in Single Page Application Angular JS

Question

I am trying to implement Single Page Application in AngularJs. However, when I select the link ({{item.Name}} in Tree.Html). Corresponding view is not displayed in ng-View.

Any help will be appreciated

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>

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', 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);

}]);

Details.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>

How about using 'ui.router' instead of 'ngRoute'? This problem is similar with my first Angluar project. I have not known why this had happened but many people has recommended using 'ui.router' and after I followed that, my problem has gone. — Canet Robern
– Canet Robern, Commented Nov 29, 2017 at 4:15
That worked. Can you make this as answer, instead of comment? — Amit Kumar
– Amit Kumar, Commented Dec 4, 2017 at 8:46
It's good for you! And it's a shame that only I've done was just suggestion. I think the only thing that you could have solved your problem was just your effort. :) But for other people who will see this post, I'll write an answer for this without long explain. Thanks. — Canet Robern
– Canet Robern, Commented Dec 4, 2017 at 9:01

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Once I had gotten a problem that was same as yours.

I've tried to figure it out, and many people recommended using 'ui.router' instead of 'ngRoute'.

Maybe there are more differences between them specifically.

But even just this explain, could help you deciding side.

ngRoute is a angular core module which is good for basic scenarios. I believe that they will add more powerful features in upcoming releases.

Ui-router is a contributed module which is overcome the problems of ngRoute. Mainly Nested/Complex views.

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 4, 2017 at 9:03

Canet Robern

1,0692 gold badges11 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pages not loading in Single Page Application Angular JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related