way to provide a path to controller file using ui-router

Question

is there any way to provide a path to a controller file by using UI-ROUTER

this is my 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
                }
            }
        })

as like the template url can we load controller URL i tried but can't able to do so

Manish Singh · Accepted Answer · 2016-10-20 08:32:10Z

1

First of all, Angularjs pick the HTML templates from the directory using relative address mechanism.

For controllers, you need to register/include all the JS file in your index.html.

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

And include it in router or states like this.

controller: 'SampleController',

Hope, Your query resolved.

answered Oct 20, 2016 at 8:32

Manish Singh

5383 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sravan · Accepted Answer · 2016-10-20 08:08:53Z

0

Yes you can give a specific controller to every view in a state.

.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

answered Oct 20, 2016 at 8:08

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

5 Comments

User_3535 Over a year ago

yes .. and the error is [ng:areq] errors.angularjs.org/1.5.8/ng/…

User_3535 Over a year ago

is there any way to implement URL to the controller as like the template URL .. i mean as like ` templateUrl: 'app/main/main.html',` can we give to controller too ? now i"m giving in main js file where modules and all available

Sravan Over a year ago

no need to give the controller path, if you load the controller in the mail htm file, the controller name is sucfficient.

User_3535 Over a year ago

for example if i want to use a controller in my file means i have to define those things as <script src="app/views/sample_controller.js" /> in my index file right ?

User_3535 Over a year ago

Let us continue this discussion in chat.

user7046562 · Accepted Answer · 2016-10-20 08:56:51Z

0

You can do lazy load with oclazyload module.

Check samples at, 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');
    }]
  }
});

answered Oct 20, 2016 at 8:56

user7046562

Collectives™ on Stack Overflow

way to provide a path to controller file using ui-router

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related