Блог

Мое приложение использует Angularjs-ui-router для переключения между различными модулями.у меня есть 2 дочерних состояния из родительского состояния. мне нужно загрузить состояние ‘home.search’ по умолчанию и ‘home.fileupload’ при нажатии кнопки, но в настоящее время ‘home.загружается состояние fileupload tabs.html слишком.

есть ли способ при вводе страницы загрузить состояние по умолчанию как состояние «home.search» и при нажатии кнопки загрузить «home».состояние fileupload’ из родительского абстрактного состояния (home.html )???

routes.js

   .state('home', {
          abstract: true, 
          templateUrl: 'scripts/home.html'
   })

  .state('home.search', {
       url: '/summary',
       views: {               
          'search': 
          {
                    templateUrl: "scripts/home/search.html"
          },
          'summary': 
          {
                    templateUrl: "scripts/home/summary.html"
          }
      }
   })
  .state('home.fileupload', {
      url: '/fileupload',
      views: {               
       'upload': 
          {
                    templateUrl: "scripts/home/upload.html"
          }
       }
  })
  

home.html

  <button type="button" ng-click="goToState('home.search')">Search</button>
 <button type="button" ng-click="goToState('home.fileupload')">fileUpload</button>
 <div ng-include="'scripts/home/tabs.html'"></div>  
  

tabs.html

  <div ng-controller="MainCtrl">    
  <div ui-view="summary"></div>   
  <div ui-view="search"></div>
 </div>   
  

Существует ссылка на рабочий пример. Я внес несколько изменений, чтобы сделать его более ui-router похожим.

Во-первых, мы должны переместить определение контроллера из <div ng-controller="MainCtrl"> в определение состояния:

 $stateProvider
  .state('home', {
    abstract: true,
    templateUrl: 'scripts/home.html',
    controller: 'MainCtrl', // here we put together template and controller
  })

.state('home.search', {
  url: '/summary',
  views: {
    'search': {
      templateUrl: "scripts/home/search.html",
      controller: 'SearchCtrl', // here as well
    },
    'summary': {
      templateUrl: "scripts/home/summary.html",
      controller: 'SummaryCtrl', // here also
    }
  }
})
...
  

кроме того, часть шаблона для абстрактного состояния home должна быть <div ui-view="upload"></div> , как заполнитель для состояния загрузки файла.

И это только начало:

 .config(['$urlRouterProvider',
    function($urlRouterProvider) {

      $urlRouterProvider.otherwise('/summary');
    }
 ]);
  

Проверьте все это в плунжере

Вы можете использовать метод module.run() для установки маршрута по умолчанию. Вот как вы это делаете:

 testModule = angular.module('ModuleName', []);
testModule.run(['$rootScope', '$state', function($rootScope, $state) {
$state.go('statename');
}]);
  

Блок запуска выполняется при загрузке приложения. Прочитайте о блоках запуска, если у вас есть какая-либо путаница: https://docs.angularjs.org/guide/module