Angular JS for HTML Templating

Question

I am looking at using Angular JS to mamange my HTML builds more effectively and am trying my hand at templating some of my HTML. However, it doesn't seem to work? I have;

  <div class="container">

      <div ng-include='"templates/menu.html"'></div>
      <div class="row">
          <div class="col-xs-12">
              <h1>Hello, baby!</h1>
              <p>This is the first ever Angular JS I have ever done.</p>
          </div>
      </div>         
  </div>



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="_includes/scripts/bootstrap.min.js"></script>
<script src="_includes/scripts/angular.js"></script>

Then I created a folder called, templates, where I have placed a HTML file, called menu, containing a navigation ul saving his obviously as menu.html. When I view index.html in my browser the menu is not rendered. Any help welcome. Thanks

Igal S. · Accepted Answer · 2015-09-20 12:55:59Z

3

Updated answer (summary of discussion below).

Working example in: http://jsfiddle.net/uo04c05h/
Angular should be started by ng-app directive <div ng-app class="container">
Path to files is relative to the file where angular is initiated

edited Sep 20, 2015 at 12:55

answered Sep 20, 2015 at 10:59

Igal S.

14.8k5 gold badges34 silver badges52 bronze badges

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

7 Comments

Al-76 Over a year ago

Thank you for the reply. I was using this as a guide airpair.com/angularjs/building-angularjs-app-tutorial If the quote is inside the double quotes then the artcile is incorrect I guess. However, changing it in my code still didn't render anything. Any ideas? Thanks

Igal S. Over a year ago

Could you try: <div ng-include src="'templates/menu.html'"></div> - Also make sure that path is correct and is relative to where angular app is initialized. So it may be need to be for example /templates/menu.html

Al-76 Over a year ago

I now have <div ng-include src="'templates/menu.html'"></div> and the path is correct to that menu.html How do I initialize the angular app?

Al-76 Over a year ago

More research reveals that I need to install Git and Node Js and figure out from the mad scientists how to set these up before Angular will even work. What Node JS actually does is beyond me. I thought it would be made fairly straight forward. For example, link to angular.js add the ng-includes tag, put some HTML in a separate file and then open in the web Browser and boom. Obviously not. The goal would be to be abe to edit one menu.html file instead of having to edit all 300 static web pages that include the menu. Thanks for the help though, much appreciated.

Igal S. Over a year ago

nodejs is for server side, and git has nothing to do with it. One last try - Try to add the attribute in body <body ng-app> that would init angularjs.

|

Collectives™ on Stack Overflow

Angular JS for HTML Templating

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related