Routeprovider and stateprovider together in my Angular 1 app

Question

I am trying to develop an app using Angular 1.4.(Refer below image). I need suggestions on below

• What is the best way to develop home Page in this. Should I use <ui-view>(UI routing) to creates the 8 states or should I use 8 different custom directives to tabs(tab1, tab2, tab3, etc...)
• Can my application has both routeprovider and stateprovider together in config file.(Another post from Stackoverflow)

--------------------------------------------------------------------------->

My view/idea for developing this---->

• will be using ng-view to load the pages(home, nav2, nav3, etc)

• will be using ui-view to load the tabs/panel inside home page(tab1, tab2, tab3, etc)

Answer 1

Using Both ng-view and ui-view does not show any results in the file. i.e, App crashes.. So I have moved to ui-view to display all the states.

Below is the code which works fine. Tutorial

    .config(function($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise('/home');
      $stateProvider
        .state("home", {
          url:"/home",
          views:{
            "":{
              templateUrl: "views/home.html"
            },
            "profile@home":{
              templateUrl: "views/home/profile.html"
            },
            "companyAnnouncement@home":{
              templateUrl: "views/home/company-announcement.html"
            },
            "leaveBalance@home":{
              templateUrl: "views/home/leave-balance.html"
            },
            "leaveDetails@home":{
              templateUrl: "views/home/leave-details.html"
            },
            "attendenceDetails@home":{
              templateUrl: "views/home/attendence-details.html"
            },
            "holidayList@home":{
              templateUrl: "views/home/holiday-list.html"
            },
            "queryStatus@home":{
              templateUrl: "views/home/query-status.html"
            },
            "payrolQueryStatus@home":{
              templateUrl: "views/home/payrol-query-status.html"
            }
          }//views ends here
        })
        .state("login", {
          url: "/login",
          templateUrl: "views/login.html"
        })
        .state("selfService", {
          url:"/self-service",
          views:{
            "":{
              templateUrl: "views/self-service.html"
            }
          }
        })
        .state("edirectory", {
          url: "/edirectory",
          templateUrl: "views/edirectory.html",
          controller: 'edirectoryController',
          controllerAs: 'edirectoryCtrl',
          resolve: {
            employeeList: function (edirectoryService) {
              return edirectoryService.getAllEmployees();
            }
          }
        })
        .state("myLeave", {
          url: "/my-leave",
          templateUrl: "views/my-leave.html"
        })
        .state("attendence", {
          url: "/attendence",
          templateUrl: "views/attendence.html"
        })
        .state("compOffRequest", {
          url: "/comp-off-request",
          templateUrl: "views/comp-off-request.html"
        })
        .state("raiseQuery", {
          url: "/raise-query",
          templateUrl: "views/raise-query.html"
        })
        .state("eacademy", {
          url: "/eacademy",
          templateUrl: "views/eacademy.html"
        })
        .state("downloads", {
          url: "/downloads",
          templateUrl: "views/downloads.html"
        });

    });