首页 文章

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

提问于
浏览 次
0

我正在尝试使用Angular 1.4开发一个应用程序 . （参见下图） . 我需要下面的建议

  • 在这里开发主页的最佳方法是什么？我应该使用 <ui-view> （UI路由）来创建8个状态，还是应该使用8个不同的自定义指令到选项卡（tab1，tab2，tab3等...）

  • 我的应用程序可以在配置文件中同时包含routeprovider和stateprovider . （Another post from Stackoverflow）

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

我发展这个观点/想法---->

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

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

image for Angular 1.4 application

angularjs angularjs-directive angular-ui-router

1 回答

  • 0

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

    });
    回复于

相关问题