Routeprovider 和 stateprovider 在我的 Angular 1 应用程序中一起使用

Question

我正在尝试使用 Angular 1.4 开发应用程序。（请参阅下图）。我需要以下建议

• 在此开发主页的最佳方式是什么。我应该使用<ui-view>(UI routing) 创建 8 个状态还是应该使用 8 个不同的自定义指令到选项卡（tab1、tab2、tab3 等...）
• 我的应用程序能否在配置文件中同时包含 routeprovider 和 stateprovider。(Another post from Stackoverflow)

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

我对此的看法/想法---->

• 将使用ng-view 加载页面（主页、导航2、导航3 等）

• 将使用ui-view 加载主页内的选项卡/面板（tab1、tab2、tab3 等）

Answer 1

同时使用ng-view 和ui-view 不会在文件中显示任何结果。即，应用程序崩溃.. 所以我已经转移到ui-view 以显示所有状态。

下面是运行良好的代码。 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"
        });

    });