Ad

Using Directives To Modularize HTML Structure Of Website

- 1 answer

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?

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad