CODEWITHSUNDEEP
javascriptangularjshtml
geekgugi
geekgugi

Reputation: 389

Modularity vs Performace with respect to ng-include in an angular app

Recently, I have been refactoring someone else's code. The requirement ( I'm not decision maker) is to break down large junk of html (around 1500 lines). I am porting the existing code to angular app.

I have little confusion with modularity v/s performance.

Exact problem with code:

There is main.html file which is 1500 lines. I have broke that file into main_bar.html, main_content.html, main_map.html and main_locations.html.

Now main.html contains,

<div ng-include src="'views/main_bar.html'"/>
<div ng-include src="'views/main_content.html'"/>
<div ng-include src="'views/main_map.html'"/>
<div ng-include src="'views/main_locations.html'"/>

In app.js,

angular.module('ngBApp', ['ngRoute'])
    .config(function ($routeProvider, $locationProvider) {

        $locationProvider.html5Mode(true);
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .when('/about', {
                templateUrl: 'views/about.html',
                controller: 'AboutCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

In MainCtrl,

'use strict';
angular.module('ngBApp')
  .controller('MainCtrl', function ($scope) {
   // some logic to fetch data and show
   // in different html chunks included via ng-include
  });

Although, this approach follows the modularity principle, doesn't it add overhead of downloading small junks of html with different http requests (with more header i.e, 4x header and other data) ?

Is there any other way to design app in angular way preserving performance and yet a modular code ?

Upvotes: 0

Views: 86

Answers (1)

Vladislav Rastrusny
Vladislav Rastrusny

Reputation: 30013

Is there any other way to design app in angular way preserving performance and yet a modular code ?

Well, why not to use Gulp or Grunt to concatenate the resulting HTML file from pieces? Or you can even build resulting HTML from template using includes.

I am strongly against using ng-include's to break long html apart.

Upvotes: 1

Related Questions