CODEWITHSUNDEEP
angularjs
Aneta Jabłońska
Aneta Jabłońska

Reputation: 125

The concept of creating and correctly deploying modules, components, and subcomponents AngularJS

I have trouble understanding the structure of the files for modules, components, directives, html templates.

If someone could explain me.

for example we have : 

angular.module("app", [

// Module that contains shared modules 
"app.common",

// Feature-specific modules
"app.topMenu",
"app.sidebar",
"app.board"
]);

I created here separetely modules for topMenu, sidebar, board because they will have rich functionality.

I just start using components, so to the end I do not understand, how does it look like an example of such a module?

so, question is here Do I think right?

I will create file for example sidebar-module.js

inside it will seems like (this is example in my app will be more functions):

    (function(){


  angular
  .module('app.sidebar', [])
  .component('sidebar', {
    template: 
    `
    <div style="border: 1px solid red;">
      sidebar
      <add-person></add-person>
      <list-menu></list-menu>
      <colour-menu></colour-menu>
    </div>
    `
  })
  .component('addPerson', {
    template: `<div> 
      add Person  
      </div>`
  })
  .directive('listMenu', function(){
    return {
      restrict: 'E',
      template: `<div>directiv with display list</div>`
    }
  })
  .directive('colourMenu', function(){
    return {
      restrict: 'E',
      template: `<div>directiv with display menu colour</div>`
    }
  })
  .controller('SidebarCtrl', function(){});
})();

1. should the module look like this with subcomponents?

2. and second question is if I have app.common for modules which is shared, so inside I should duplicate ??

    angular
  .module('app.sidebar')

and to this create directives, components which I use this components/directives in many places??

Its should seems like? :

    (function(){

  angular
  .module('app.common', [])
  .component('login', {
    template: 
    `
    <div style="border: 1px solid red;"> 
    login comp
    </div>
    `
  }) 
  .component('addCard', {
    template: 
    `
    <div style="border: 1px solid red;"> 
     menu with adding card
    </div>
    `
  }) 
  .controller('commonCtrl', function(){});
})();

here are components which I can use in each page.

So Do I think right, in the concept of creating modules?? I will create 2 files in folder with name components, inside will be this components app.common-module.js inside will be code number 2, and app.sidebar-module.js where inside will be code number 1(here private components which I use only in this component)

Upvotes: 1

Views: 54

Answers (1)

Dan M. CISSOKHO
Dan M. CISSOKHO

Reputation: 1065

According the angularjs doc : https://docs.angularjs.org/guide/module

we recommend that you break your application to multiple modules like this:

  • A module for each feature
  • A module for each reusable component (especially directives and filters)
  • And an application level module which depends on the above modules and contains any initialization code.

I will recommand you to read : https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity

I think right but you should not duplicate any code. It will be not necessary since all that you declare in your main app script will be reusable.

Upvotes: 1

Related Questions