CODEWITHSUNDEEP
javascripthtmlangularjs
Affix Programmer
Affix Programmer

Reputation: 80

ng-include is not including content.html

I am currently using 1.5.3 AngularJS Version & ng-include="'file.html'" is not working

<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
    <head>

        <!-- Include AngularJS Files -->
        <script src="vendor/AngularJS/angular.min.js"></script>

        <title>Website Title</title>
    </head>
    <body>

        <!-- Include Content.html to index.html -->
        <header ng-include="'content.html'"></header>

    </body>
</html>

When i run this code it doesnt show anything on index.php

content.html exists with: 

<h1>Hello, this is my website.</h1>

It will just not work.

my plunker code to see how i am doing it

plnkr.co/edit/OagoGf8AavIRxFgGVZSl

Upvotes: 2

Views: 412

Answers (3)

Richard Pressler
Richard Pressler

Reputation: 494

Angular isn't actually running on that page. Just including angular in your <head> isn't quite enough.

Here's what you've done so far:

  1. Define an HTML file that pulls in the angular library.
  2. Write HTML that tells the page that it should be using the angular module myApp.

What you need to do now is simply create that module. To so this, just create a javascript file with one line:

angular.module('myApp', []);

This creates an angular app called myApp on the global scope. Then add a <script> tag to include the new .js file in your index.html. That's it! Now Angular will look at you HTML file, see that you want the app myApp to run on the HTML, and it will find that app in your new JS file.

Here's your plunkr updated

Hope this helps.

Upvotes: 2

Zane Hitchcox
Zane Hitchcox

Reputation: 936

You have to have to use angular.module to have angular bootstrap your application to the dom. This is how angular starts.

The format is

angular to call angular,

.module to specify to angular which module you are looking for,

('myapp' the name of the module

, []) to specify any dependencies your app has. You can attach all sorts of stuff to your app which is extremely useful.

altogether, that's angular.module('myApp', [])

Note, you can hook into your app without re-bootstrapping at anytime with angular.module('myApp') without the array of dependencies. This will retrieve your application without instantiating it. Then you can chain controllers, factories, whatever to it like this:

angular.module('myApp').controller('MyCtrl', function($scope) {})

It looks like you're coming from PHP, so you're in for a real treat once you start using angular. Good luck with your app!

Here, I edited your plunker: http://plnkr.co/edit/fQnngC49d5QsHAzti7Nc

Upvotes: 2

S Panfilov
S Panfilov

Reputation: 17531

just take a look at console errors?

Plunker says that there is no module "myApp". So, you didn't include any .js files in plunker.

Actually I didn't know, is angular work right way without any js, but in normal case you should define the main app module and controllers for each page

Upvotes: 2

Related Questions