CODEWITHSUNDEEP
angularjsangular-ui-router
Krish
Krish

Reputation: 4232

angularJs navigation's from ng-route to ui-router

I am new to AngularJS, and I am a little confused of how I can use angularjs ui-router in the following scenario:

It consists of two sections. The first section is the Homepage with its login and sign up views, and the second section is the Dashboard (after a successful login).

My current router is below. How can I do this functionality? (Please help with some HTML code and related controllers)

app.js:

'use strict';
    //Define Routing for app
    angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
      function($routeProvider,$locationProvider) {
        $routeProvider
        .when('/login', {
            templateUrl: 'login.html',
            controller: 'LoginController'
        })
        .when('/register', {
            templateUrl: 'register.html',
            controller: 'RegisterController'
          })
        .when('/forgotPassword', {
            templateUrl: 'forgotpassword.html',
            controller: 'forgotController'
          })
       .when('/home', {
           templateUrl: 'views/dashBoard.html',
           controller: 'dashBordController'
        })
        .otherwise({
           redirectTo: '/login'
        });

    }]);
});

Upvotes: 1

Views: 124

Answers (1)

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

Firstly, nobody will design a website with your requirements / functionalities for you. stackoverflow is for specific problems, your questions is too broad, more about it - How to Ask. But to help you with a conversion from ngRoute to ui.router I can describe what the syntax should look like so you can adopt it for your website.

Converting to ui.router

Your config doesn't change that much. you need to replace .when with .state, use the right providers, and have the right syntax. Here is an example with just few states:

app.config(config);
/* your preferred way of injecting */
config.$inject = ['$stateProvider', '$urlRouterProvider'];

function config($stateProvider, $urlRouterProvider) {
  $stateProvider.
  state("HomepageState", {
    url: "/home",
    templateUrl: 'views/dashBoard.html',
    controller: 'dashBordController'
  }).
  state("RegisterState", {
    url: "/register",
    templateUrl: 'register.html',
    controller: 'RegisterController'
  })
  /*
    more can be added here...
  */
  $urlRouterProvider.otherwise('/login');
}

Navigation

You should be using states for navigation at all times. So replace href="url" with ui-sref="state". Here are some examples of anchor links:

<a ui-sref="HomepageState">Home page</a>
<a ui-sref="RegisterState">Register</a>

Don't forget to replace your ng-view with ui-view. (For older browser support it's better to have <div ui-view></div> instead of <ui-view></ui-view>)

Redirection

After filling in a login form, the user will press something like: 

<button ng-click="login()">Sign in</button>

which will call a function login() that will validate / verify if the user can be logged in. (You can also have <form ng-submit="login()"> with <button type="submit">...) Then, if everything is fine and the user got his session / cookie, you can have a redirection to another page with:

$state.go("HomepageState");

(Don't forget to inject $state into your controller)

Advanced navigations

In the future if you have user profiles that are listed by their index. Your routing can be improved with $stateParams. Their job is to check any additional parameters in the URL. For example: a URL: /profile/721 can have a state with url:"/profile/:id". Then you can extract that id with $stateParams.id and use it in your controllers. And your redirection would look like: 

$state.go("ProfileState", { "id": 721});

Upvotes: 1

Related Questions