Jeeva Jsb Jeeva Jsb - 3 months ago 12
AngularJS Question

Loading two different pages Angular js

I am Totally new to angular js, Little bit difficult to understand the routing concept in the angular js.

I am developing admin site. I need to structure like following.

I've Login.html = this is separate page, instead of partial
Signup.html = This is also separate page, instead of partial
After success login, it'll go to dashboard where I'll load all my partials using ng-view.

How could I do that ? I googled it. I can only see all like only for partial views.

I did like following, but not working. I knew this is wrong, but don't know how to do

Project:

app.js

var nApp = angular.module('nApp', ['ngRoute']);

nApp .config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/Login', {
templateUrl: 'App/Login/Login.html',
controller: 'LoginController',
caseInsensitiveMatch:true
}).when('/Signup', {
templateUrl: 'App/Signup/Signup.html',
controller: 'SignupController',
caseInsensitiveMatch:true
}).when('/Dashboard', {
templateUrl: 'App/Index.html',
controller: 'DashboardController',
caseInsensitiveMatch:true
})

.otherwise({
redirectTo: '/Login'
});
}]);


Login.html

<html ng-app="nApp">
<head></head>
<body></body>
</html>


Signup.html

<html ng-app="nApp">
<head></head>
<body></body>
</html>


Index.html

<html ng-app="nApp">
<head></head>
<body>
<div ng-view></div>
</body>
</html>


Placed app.js under App directory
\
Is there any other way to do that please mention ...

Answer

The ui-router solved the issue. I have implemented long time back. Sorry for the late reply.

Had a two separate nested states to overcome this initial start up.

If we use ng-if to show authenticated non-authenticated user menus, then it will be not look good in the ui when user logged in and logged out. There will be shake in the ui.

Even If we use ng-include based on ng-if condition, there will be shaky in the ui page.

Here I have mentioned some sample ui router states.

     $stateProvider
          .state('beforeLogin', {
            templateUrl: 'beforeLoginLayout.html',
            controller: function($scope){

            }
          })
          .state('beforeLogin.login', {
            templateUrl: 'login.html',
controller: function($scope){

            }
          }).state('beforeLogin.signup', {
            templateUrl: 'signup.html',
controller: function($scope){

            }
          });

     $stateProvider
          .state('afterLoggedin', {
            templateUrl: 'afterLoggedInLayout.html',
            controller: function($scope){

            }
          })
          .state('afterLoggedin.dashboard', {
            templateUrl: 'dashboard.html',
controller: function($scope){

            }
          }).state('afterLoggedin.addUser', {
            templateUrl: 'addUser.html',
controller: function($scope){

            }
          });

Reference : https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views