Include view + controller + style

Question

I need to create a base view, and include "modules" in it.

What I call module is : a View (HTML page), a Controller (Javascript) and a Style (CSS).

At the moment, I need to includes all my javascripts at the end of the index.html and my css at the beggining... BUT, sometimes I won't load ALL my modules.

So if in my page, I need to display module 1 / 2 / 3, I only want to include their views / controllers / styles, and not Module 4's.

I tried with ngView and ngInclude, but I always get an error when I put the related javascript.

Here is an example of what I would like :

<div ng-include="'modules/module1.html'"></div>

The result would be ===>

<link href="modules/module1.css" />
<div ng-controller="module1Controller as module1Ctrl">
  <h3 class="test">Module 1</h3>
  <p>It is a test !</p>
</div>
<script src="modules/module1.js"></script>

I hope it makes sense...

I'm not an angularJS expert yet - do you have a snippet or an example of a directive that could do this ? — carndacier
– carndacier, Commented Mar 21, 2016 at 16:13
docs.angularjs.org/guide/directive . I highly suggest learning more about directives, as this will help with the transition to angular2 when time comes — Nick Delaney
– Nick Delaney, Commented Mar 21, 2016 at 16:15
Ok, I'm not an expert but I know what is a directive... The question here is : what do I need to put in this directive to do the job ? or at least a lead to do so... — carndacier
– carndacier, Commented Mar 21, 2016 at 16:17
That link is more than what a directive is. And if you did know what a directive is, that you so clearly state. Then you wouldn't be asking this question in the first place since its the solution for the question you are asking. Furthermore there are plenty of snippets in there explaining it. — Nick Delaney
– Nick Delaney, Commented Mar 21, 2016 at 16:19

Nick Delaney · Accepted Answer · 2016-03-21 17:27:41Z

1

Your directive -

app.directive('module1', function () {

     var controller = ['$scope', function ($scope) {

          //CONTROLLER FUNCTIONS HERE

      }];


      return {
          restrict: 'E', 
          scope: {
              data: '=data'
          },
          controller: controller,
          templateUrl: 'module1.html'
      };
  });

module1.html:

  <h3 class="test">Module 1</h3>
  <p>It is a test !</p>

Then on your view

<module1 data="THIS COULD BE AN OBJECT" />

In regards to your css you should really be using something like LESS or SASS, creating separate files, then building one big global CSS file using some sort of task runner like Grunt, Gulp.

All your CSS pertaining to module1 can just start with module1

Example:

module1 h1{font-size:24px;}
module1 div.body{width:100px;}

Here is a link to the plunk... https://plnkr.co/edit/epD6ckxaXxbGHssGaJhu?p=preview

edited Mar 21, 2016 at 17:27

answered Mar 21, 2016 at 16:29

Nick Delaney

6015 silver badges15 bronze badges

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

2 Comments

carndacier Over a year ago

Thanks, that's all I asked :) I'll try this now

Nick Delaney Over a year ago

@carndacier i added a plunk link in the post above

Collectives™ on Stack Overflow

Include view + controller + style

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related