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

Question

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

• 在此开发主页的最佳方法是什么？我应该使用<ui-view>（UI路由）来创建8个状态，还是应该对选项卡使用8个不同的自定义指令（tab1，tab2，tab3等...）
• 我的应用程序可以在配置文件中同时包含routeprovider和stateprovider。（Another post from Stackoverflow）

----------------------------------------------- ----------------------------＆GT;

我发展这个观点/想法----＆gt;

• 将使用ng-view加载页面（home，nav2，nav3等）

• 将使用ui-view加载主页内的标签/面板（tab1，tab2，tab3等）

Answer 1

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

以下是可以正常使用的代码。 Tutorial

＆＃13;

＆＃13;

    .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"
        });

    });

＆＃13;

＆＃13;

＆＃13;