Weise einen Weg zur Steuerung Datei mit ui-Router

Question

zu schaffen ist es eine Möglichkeit, einen Pfad zu einer Controller-Datei zu schaffen, durch UI-ROUTER

mit diesem mein Code

var kraveln = angular.module('kraveln', ['ui.router' , 'ngMessages' , 'ngDialog' ]); 

kraveln.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
// for home_page 
     .state('home', { 
      url: '/home',// if home page means 
      views: { 
       '': 
       { 
        templateUrl: 'app/views/home_search_page.html', 
        controller: 'app/views/sample_controller.js' // sample controller for loading file. 
       }, 
       'header_part': 
       { 
        templateUrl: 'app/views/header_one.html' //load first header 
       }, 
       'footer_part': 
       { 
        templateUrl: 'app/views/footer.html' //load second footer 
       } 
      } 
     }) 

als wie die Vorlagen-URL kann ich Controller-URL laden Ich habe versucht, aber kann nicht dazu

Answer 1

Ja können Sie einen bestimmten Controller zu jeder Ansicht in einem Zustand geben. mit relativem Adreßmechanismus

.state('home',{ 
      url: '/home', 
      views: { 
      '': { 
       templateUrl: 'app/main/main.html', 
       controller: 'MainController', 
       controllerAs: 'main' 
      }, 
      'header': { 
       templateUrl: 'app/main/header.html', 
       controller: 'HeaderController', 
       controllerAs: 'header' 
      }, 
      'footer': { 
       templateUrl: 'app/main/footer.html' 
      } 
      } 
    }) 

reference link

Answer 2

Zunächst einmal AngularJS das HTML-Templates aus dem Verzeichnis auswählen.

Bei Controllern müssen Sie alle JS-Dateien in Ihrer index.html registrieren/einschließen.

<script src="app/views/sample_controller.js" /> 
//....Same for others... 

Und es in Router oder Staaten wie folgt.

controller: 'SampleController', 

Hoffe, Ihre Abfrage gelöst.

Answer 3

Sie können mit oclazyload Modul lazy laden.

prüfen Proben bei, https://oclazyload.readme.io/docs/with-your-router

$stateProvider.state('index', { 
    url: "/", // root route 
    views: { 
    "lazyLoadView": { 
     controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve 
     templateUrl: 'partials/main.html' 
    } 
    }, 
    resolve: { // Any property in resolve should return a promise and is executed before the view is loaded 
    loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) { 
     // you can lazy load files for an existing module 
      return $ocLazyLoad.load('js/AppCtrl.js'); 
    }] 
    } 
});