Loading two different pages Angular js

Question

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

Edited the question, can you look at this. I don't know how to do. So I can't do JsFiddle too. — Jeeva J
– Jeeva J, Commented Jan 9, 2015 at 0:54
No that's not a matter.. I just gave some overlay... not exact one. I want to know the structure how to do.. — Jeeva J
– Jeeva J, Commented Jan 9, 2015 at 1:36
If you look at this one, these are three different pages. Not partial one — Jeeva J
– Jeeva J, Commented Jan 9, 2015 at 1:37

Jeeva J · Accepted Answer · 2016-08-17 09:16:44Z

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

Kyle Emmanuel · Accepted Answer · 2015-01-09 01:42:27Z

0

Taken from the docs: ngViewis a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file.

Therefore, you must have an element with an attribute of ng-view to display the content.

Why don't you use redirectTo instead of displaying a template.

answered Jan 9, 2015 at 1:42

Kyle Emmanuel

2,2211 gold badge17 silver badges23 bronze badges

Comments

bbennett · Accepted Answer · 2015-01-12 00:30:44Z

Updated

My comment was really is just advocating a "group by feature" structure where your features can be as granular or generic as you choose. Login is a "feature" as well, but should be treated a little differently.

Here's a decent article about grouping by feature, but your project could look something like this:

app/
  home/
    home.html
    home.js
  login/
    login.html
    login.js
  signup/
    signup.html
    signup.js
  app.js
  index.html

Regarding your navbar, you would want to include it within your index.html file so it is present on all the views. You can hide it from login using an ng-if (I'd probably put this in a directive):

<html>
    <body ng-app="mainApp">
        <nav ng-include="'{path/to/navbar-partial}'" ng-if="location.path() !== '/login'"></nav>
        <div ng-view></div>
    </body>
</html>

I'm not going to rehash the specifics of login/authentication handling because there are plenty of implementations out there. Here's one example:

var app = angular.module("mainApp", []).
  config(function($routeProvider, $locationProvider) {
    $routeProvider.
      when("/home",
        { templateUrl: "home/home.html", controller: 'homeController' }).
      when("/login",
        { templateUrl: "login/login.html", controller: "loginController" }).
      // event more routes here ...
      otherwise( { redirectTo: "/home" });
  }).
  run(function($rootScope, $location) {
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
      // no logged user, redirect to /login
      if ($rootScope.loggedInUser == null) {
        if (next.templateUrl !== "login/login.html") {
          $location.path("/login");
        } 
      }
    });
  });

Thanks for your support. The following is my real doubt. Here is my logic gets spoiled, actually no idea to get the answer. In Dash board, we'll have menus like view home page, reset password. These pages should be loaded without reloading the menu in the dashboard. How could I achieve this ? For this only, I've posted the question. Sorry I conveyed mistakenly.
Maybe I misunderstood then. Sounds like you're building an app which could have several main modules (login, home, admin, etc) which have subsections. In the application I work on, the main modules are separate angular modules which have their own set of routes configured. The content within each module is always created as partials. Each main module has its own index.html (like above) with a different ng-app name. The site menus are all bundled into a directive that gets included in each index.html. Since every application is different, this may or may not work for you.
Thanks a lot... I think I came nearer to you. Can you please update the answer with the last comment and sample code struecture? So that It'll help me to understand.
Updated my answer. I don't have a working example, but I included several pieces of the puzzle I think you'll need.

Collectives™ on Stack Overflow

Loading two different pages Angular js

3 Answers 3

Comments

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Related