Web App with different template (AngularJS)

Question

I need to create a web app that can handle different template (same class but with addition field/functions). I use AngularJS.

For all the css side, I use SASS. For the HTML part, I use ng-include of AngularJS. But I don't know what to use for the JS part. I could have the same js file for each template with all the changes but if there a change I would need to change all the files. What I look for is a framework/tool that allow me to have a base js file and load inside extra content from other file (like ng-include in AngularJS).

Thanks in advance

Renan Ferreira · Accepted Answer · 2016-03-31 18:40:46Z

1

I think that you a looking for ngRoute or ui-router. They are components that let you create routes in you application. It means that you can define one route that contains a HTML file and a Controller associated.

Take a look at the documentation of the two.

This is an example using ngRoute: https://jsfiddle.net/relferreira/t36xa01c/

HTML:

<div data-ng-app="app">

   <ul class="nav navbar-nav" id="subject">
     <li><a href="#/">Main</a></li>
     <li><a href="#/detail">Detail</a></li>
  </ul>
  <div ng-view></div>

</div>

JS:

angular.module('app', ['ngRoute']);

angular.module('app')
    .config(config)
    .controller('MainController', mainController)
  .controller('DetailController', detailController);


config.$inject = ['$routeProvider'];
function config($routeProvider){

    $routeProvider.when('/',{
        template:'<h1>{{mainVm.title}}</h1>',
        controller:  'MainController as mainVm'
    })
    .when('/detail',{
         template:'<h1>{{detailVm.title}}</h1>',
        controller:  'DetailController as detailVm'
    })
    .otherwise({
        redirectTo:"/"
    });
 }

mainController.$inject = ['$scope'];

function mainController($scope){

    var vm = this;

    vm.title = 'Main'

}

detailController.$inject = ['$scope'];

function detailController($scope){

    var vm = this;

    vm.title = 'Detail'

}

edited Mar 31, 2016 at 18:40

answered Mar 31, 2016 at 15:05

Renan Ferreira

2,1603 gold badges21 silver badges31 bronze badges

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

3 Comments

Megaman Over a year ago

Thank you Renan, but it is not what I am looking for. I need a tool to build the app. For example, I have default/js/main.js with classes and I have template1/js/main_add.js So what I want is to merge the data of the main_add.js with main.js. I look to requireJS side but I don't think it could fit with problem.

Renan Ferreira Over a year ago

You want to put all your JS in one file?

Megaman Over a year ago

Finally I used your answer Renan to provide a system with overriding basics functions. Thank you for the lead !

Collectives™ on Stack Overflow

Web App with different template (AngularJS)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest