Using directives to modularize HTML structure of website

Question

Is it OK to do this? For example, what if I build a custom directive that contains all the HTML for my websites logo, search bar, and navigation. And then I have another directive that contains my websites footer. So each .html file would look something like:

<html>
  <head>
    head stuff
  </head>

  <website-header></website-header>

  This page's individual content.

  <website-footer></website-footer>

</html>

Would that work, and would it be recommended? I haven't tried it yet.

My first idea was to use ng-include and to just include the header and footer HTML files, but for some reason I have a hard time getting HTML inside of those ng-included html files to be render under the effects of any JavaScript. So if I used jQuery to make my navigation more interactive, none of that interactivity seemed to work, but I had no errors.

Is it OK to use directives like this? Or is there just some other obvious way to do this using Angular? Would the HTML elements rendered to the page still be affected by JavaScript as if all the elements were coded into the HTML to begin with?

If this is OK to do, are there any standards to go by? Any gotchas, or just other information that would be good to know?

I use directive for my header and footer with angular. work very well — AlainIb, Dec 31 '15 at 01:01
what you are trying to achieve is actually the 'web component' concept and it is completely valid. I personally would prefer that as well. using JQuery with Angular is not recommended but its workable. just make sure when you try to modify something within angular stuff, you need to notify angular about the changes, something like $scope.$apply() otherwise, angular wouldn't know about it. — sdfacre, Dec 31 '15 at 01:02
You may want to consider using ui-router https://github.com/angular-ui/ui-router, which supports nested states and views. Your approach is fine, but personally I think directives should be small and simple; makes them easier to test. — Shaun Scovil, Dec 31 '15 at 01:20
@ShaunScovil I had read some about that, and even tried to set it up, but I had a hard time wrapping my head around it. The project I'm planning will ultimately have like 2500 pages and so it does seem like that would be the ideal way to handle it, but I definitely want to know all my options. — Chirpizard, Dec 31 '15 at 01:35
@sdfacre Yeah, I'm trying to avoid jQuery in the project... it's so tempting when I just need to do something simple that I already know how to do in jQuery, but I'm trying to adhere to the Angular way! — Chirpizard, Dec 31 '15 at 01:36
Not to get into a long discussion, but an app with 2500 pages should still only use a handful of page layouts. I hope your not planning on making a separate directive or template for every page! :-) — Shaun Scovil, Dec 31 '15 at 01:46

score 1 · Answer 1 · answered Dec 31 '15 at 01:04

I use directive for my header and footer with angular. work very well

example of my header directive :

directives.directive('header', function () {
   return {
      restrict: 'A', //This means that it will be used as an attribute and NOT as an element.
      replace: false,
      scope: {},
      templateUrl: "partials/elements/header.html",
      controller: ['$scope', '$filter', function ($scope, $filter) {
         // Your behaviour goes here :)
      }]
   }
});

You can also use ng-include like this (but directive have her own controller)

<div ng-include="'partials/elements/header.html'" />

score 1 · Accepted Answer · answered Dec 31 '15 at 01:12

1

I see no problem with that approach. I would even suggest doing it for the <head></head> element so you can pass page specific values to the scope like:

<website-head title="This Page's Title"></website-head>

Note that building a website in Angular can get tough / weird when you're doing more than one page. You can use Angular routing for that, but that can result in 'ugly' url's like "www.website.com/#/about".

Angular is mostly used for building web-apps, PHP (like @TheGuyWhoCodes already suggested) could fit better in your situation. The biggest difference between the two being that PHP handles it al server-side and that has a lot of advantages for webdesign (think SEO, which doesn't always handle front-end generated content very well). Those are some things to think about when making a website in Angular.

answered Dec 31 '15 at 01:12

Luud Janssen

362
1
3
12

Oh wow, I can even use it for the tags? That's awesome. Thank you! – Chirpizard Dec 31 '15 at 01:25
expect for the `#` in the url, routing work very well for building multi page web site with angular. It's a MVC framework after all ( MVVM with controller ) – AlainIb Dec 31 '15 at 01:26
Yes, using Angular for websites with multiple pages does work, but you have to know the disadvantages before working with it. OP, for my projects I always use [Craft CMS](https://craftcms.com/) it uses [Twig](http://twig.sensiolabs.org/) which is a template engine written in PHP which also allows you to do that kind of stuff. I don't know what you're trying to make, since you said you'd have around 2500 pages, but it might be worth a look. – Luud Janssen Dec 31 '15 at 01:43
Regarding the disadvantage of (the lack of) SEO in Angular, here's [a post about it](http://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications). It has some links to interesting articles – Luud Janssen Dec 31 '15 at 01:57
Thanks. Taking a look at Craft now. The main reason I wanted to do this in Angular was to learn more about Angular, hah. But I'd love to hear more about your opinion. There will be a page for each object in an array database. Each object contains data about things in a game. I think the biggest challenge will be to create the actual html pages for each of those items. I'm not terribly concerned with SEO for this project. – Chirpizard Dec 31 '15 at 02:17
If you're not concerned about SEO i'd say Angular is the way to go here! Like Shaun Scovil already mentioned in his answer to your original post, you of course don't want a seperate template for everyone of those 2500 pages. If I were to do such a project, I'd probably use Angular (because it's MVC and just insanely cool) and use the directive scope inheritance I mentioned in my post to generate the different pages. Then for the content I would suggest using a markdown parser like [marked](https://github.com/chjj/marked) or [markdownJS](https://github.com/evilstreak/markdown-js). – Luud Janssen Dec 31 '15 at 13:40

score -1 · Answer 3 · answered Dec 31 '15 at 00:57

-1

It's fine to use that. If you want to / if you can use it, try out php with its include function. It keeps things really nicely organized! So you could do something like this:

<?php include("meta.php"); ?>
<?php include("header.php"); ?>
     <body>
        Content.
      </body

<?php include("footer.php"); ?>

answered Dec 31 '15 at 00:57

ariagno

532
1
15
29

I should have mentioned in the OP that I have used php to do that sort of the thing in the past. I'm just wondering if a similar effect can be obtained by just using angular directives. What are the differences between php include and ng-include? Thanks for the response. – Chirpizard Dec 31 '15 at 00:59
I think it really depends on what language you really would be using on your project. For me, I used php include because a lot of my website was built of php. Speed is also a key, since it does it server side, it loads faster to the client – ariagno Dec 31 '15 at 01:04
I think mixing Angular and PHP is not a good choice. choose one of them – AlainIb Dec 31 '15 at 01:07

Using directives to modularize HTML structure of website

3 Answers3