Angularjs: how to work with file-separated controllers

Question

Angularjs: how to work with file-separated controllers

Asked 8 years, 1 month ago

Viewed 880 times

3

I use a service to make each route make 3 http.get requests: one for the content the server will generate on a part of the page, a js file that contains your controller, and a css file.

My problem occurs when I load this script that contains the controller, and nothing happens on my requested page.

Example of my code:

App.js

angular.module('main', [myModulesHere...])

.config(function($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/about', {
        template: '',
        controller: 'aboutLoad'
    })        
})

.controller('aboutLoad', function($scope, myCustomHttpService) {

    // Aqui o método getRoute vai tratar-se de fazer a
    // requisição http.get, e enviar o conteúdo do servidor
    // para o ng-view quando tudo for completado

    myCustomHttpService.getRoute('/about', {
        js: './public/view/main/js/AboutController.js',
        css: './public/view/main/css/about.css'
    });
})

Aboutcontroller.js

angular.module('main').controller('AboutController', function($scope) {
    $scope.myText = 'Página: Sobre Nós';
});

Aboutview.php

<div ng-controller="AboutController">
    <h2 ng-bind="myText"></h2>
</div>

When I upload the index page of the site, only App.js is loaded. These files are requested when I switch pages using Angular Routes.

PS: My goal is to create a site that the user does not need to load the header whenever he changes page, just get the requested content per page. Examples include Google’s Disqus, Play Store, Facebook, Youtube, and more.

So in index.html, you want to leave only the header with a menu and below the header, you want to load the dynamic contents is this?

– Marcos Souza

2016/10/23 at 23:39
If you are setting the controller on the route itself, you do not need to use ng-controller in the div. However, use the same controller name in the route statement. See if this solves.

– celsomtrindade

2016/10/24 at 00:00
That’s right, Marcos Souza. The problem that is happening is that the controller of each route is not running. That is, when my server file is loaded and passed to ng-view, all the directives that are in my code are not being interpreted by the controller (which is also dynamically loaded).

– Renan Coelho

2016/10/24 at 00:13
use oclazyload and be happy, because reinvent the wheel?

– user58909

2016/10/24 at 10:29
Diogo, they recommended Requirejs. Is it enough to load controllers that are in separate files, or would you still recommend ocLazyLoad? If so, what are its advantages?

– Renan Coelho

2016/10/24 at 17:59

1 answer

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.

by ralfting • **812** points · Answer 1 · 2016-10-25T01:55:04+00:00

Renan use the ocLazyLoad to upload your files on demand (Calling only when you need to use those files).

Use lazyload on solves so it will take care of loading all your route dependencies before rendering your view.

(function() {
  'use strict';

  var app = angular.module('myApp', ['ui.router', 'oc.lazyLoad']);
  app.config(routes);

  function routes($stateProvider) {
    var about = {
      name: 'about',
      url: '/about',
      controller: 'AboutController',
      controllerAs: 'aboutCtrl',
      templateUrl: 'about.html',
      resolve: {
        lazyLoad: function($ocLazyLoad) {
            return $ocLazyLoad.load({
              files: ['aboutController.js', 'about.css']
            });
        }
      }
    };

    $stateProvider.state(about);
  }

}());