1

I am having some problems using ng-include. At first I was trying to use it in my project but it caused all the content to repeat indefinitely. Figuring it was something with the way I wired the project I started over. I haven't really added anything except for the angular file and one include and it keeps causing Angular to throw "WARNING: Tried to load angular more than once." and then it times out. No idea what is causing this.

<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="UTF-8">
        <title>Website</title>
        <!-- FOR ANGULAR ROUTING -->
        <base href="/">
        <!-- CSS Files-->

        <!-- Vendor CSS-->
        <link rel="stylesheet" type="text/css" href="../libs/bootstrap/dist/css/bootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="../libs/font-awesome/css/font-awesome.css"/>
        <link rel="stylesheet" href="../css/main.css">

    </head>
    <body>
        <div ng-include src="'navigation.html'"></div>
        <!-- JS Files -->

        <!-- Vendor JS-->

        <script type="text/javascript" src="../libs/angular/angular.js"></script>
    </body>
</html>

Ultimately what I want is something like this:

<html ng-app="app">
<head>
</head>
<body>
<div ng-include src="'navigation.html'"></div>
<div ng-include src="'header.html'"></div>
<div ui-view></div>
<div ng-include src="'header.html'"></div>
<script src="../libs/angular/angular.js"></script>
</body>
</html>

Plunker:

http://plnkr.co/edit/kFXFKC0VR5OIxwcpZFue?p=info

Rudenate3
  • 1,821
  • 2
  • 12
  • 13
  • 1
    Using Angular and jQuery at the same time is discouraged, unless you really know what you're doing. It's certainly overkill if all you want to do is include an external HTML file, even if you were initializing it correctly, [which you are not](https://docs.angularjs.org/tutorial/step_02). – Blazemonger Apr 06 '15 at 14:22
  • Removing jQuery does not fix the issue. – Rudenate3 Apr 06 '15 at 14:25
  • 1
    [You're not loading Angular correctly, either.](https://docs.angularjs.org/tutorial/step_02) What are you ultimately trying to achieve here? – Blazemonger Apr 06 '15 at 14:26
  • I'm just trying to include a separate html file. I'm just trying to figure out why Angular keeps loading, I haven't fully built out the site. – Rudenate3 Apr 06 '15 at 14:28
  • what is in `navigation.html`? Sounds like it has script tags in it. Shouldn't have `, , ` etc in it – charlietfl Apr 06 '15 at 14:29
  • [If you ONLY want to include a separate file, don't use Angular](http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file). If you do want to build a web app using Angular, [work through the tutorial first](https://docs.angularjs.org/tutorial) to learn how it works. It's a framework, not a library like jQuery, and requires a completely new way of thinking about your page and code. – Blazemonger Apr 06 '15 at 14:29
  • navigation.html for now just has "I am being rendered" no navigation or Angular yet. – Rudenate3 Apr 06 '15 at 14:30
  • I am creating a main index page and I want to use ng-include for the header, navigation and footer and will add angular-ui for ui-router. This is more about breaking up the layout than anything else. – Rudenate3 Apr 06 '15 at 14:31
  • [Work through the tutorial first.](https://docs.angularjs.org/tutorial) It will be more helpful. – Blazemonger Apr 06 '15 at 14:33
  • I am only having a problem using ng-include... I have no issues with any of the other directives. – Rudenate3 Apr 06 '15 at 14:37
  • Why don't you put the angular script tag in the header instead of the body? I don't know if that would help your issue, but that is where you should include any javascript files. – forgivenson Apr 06 '15 at 14:42
  • No change unfortunately. I've always put the JavaScript towards the bottom of the page so the page can load before it loads those files. – Rudenate3 Apr 06 '15 at 14:45

1 Answers1

0

While not a true answer, after looking back at this, it is way easier to accomplish this with directives.

even just

.directive('myDirective', function() {
  return {
    template: '<h1> Hello World</h1>'
  };
});

then

<my-directive></my-directive>
Rudenate3
  • 1,821
  • 2
  • 12
  • 13