[SOLVED] Pages not loading in Single Page Application Angular JS

Pages not loading in Single Page Application Angular JS

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>

Solution

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