Simplest way to use ng-include

Question

I have been trying to write a simple angular.js app, that includes another file using ng-include. I must have done something/missed something so that the included file does not get included. I must be doing something fundamentally wrong but can't see what it is.

Here is Index.html

<!DOCTYPE html>
<html>
<head ng-app="app">
    <title>Demo</title>
    <script data-require="angular.js@1.2.0" data-semver="1.2.0"     src="http://code.angularjs.org/1.2.0/angular.js"></script>
    <script data-require="angular-resource@1.2.0" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular-resource.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div ng-controller="appctrl">
        <h1>Airports</h1>
        <div ng-include="'extra.html'"></div>
        <h1>Airports</h1>
    </div>
</body>
</html>

file extra.html contains the element to be included

<h2>Inside</h2>

and script.js is the file to initialise angular

(function () { 
    'use strict';

    var app = angular.module('app', []);
    app.run(['$route',  function ($route) {  // Include $route to kick start the router.
    }]);        

    angular.module('app').controller('appctrl', [function AppCtrl() { }]);
});

I created to Plunk to demonstrate what I mean. There's not much there: the ng-app defined, references to the angular files and a couple of titles to delineate the insert point. Nothing is shown between.

What is the simplest way to use ng-include in angular.js?

Answer 1

Place ng-app on your body section.
Include angular-route.js (eg. <script src="http://code.angularjs.org/1.2.0/angular-route.js"></script> ) and add this dependency to your app initialization ( var app = angular.module('app',['ngRoute'] )
Don't put your script.js code inside (function(){}) . (If you want to do this, call this function (function(){})(); )

Your code with changes: http://plnkr.co/edit/k1dFPeb9E2B2pjTthi1K?p=preview

Answer 2

This is a script of mine:

HTML:

<div id="superhero-nav-container">
    <ul id="superhero-nav">
        <li><a ng-click='template = templates[0]'>Biography & Stats</a></li>
        <li><a ng-click='template = templates[1]'>History</a></li>
        <li><a ng-click='template = templates[2]'>Powers</a></li>
        <li><a ng-click='template = templates[3]'>Enemies</a></li>
    </ul>
</div>
<div class="superhero-templates" ng-include src='template.url'></div>

JS in the controller:

    $scope.templates = [
        { url: '/views/superheroes/biography.html' },
        { url: '/views/superheroes/history.html' },
        { url: '/views/superheroes/powers.html' },
        { url: '/views/superheroes/enemies.html' }
    ];
    $scope.template = $scope.templates[0];

I have something like menu that changes the html in the bottom div. Hope that helps.

EDIT (for the comment below):

Your mistakes were:

Put your ng-app attribute in the html tag of the document not in the head
Include angular-resource.js (eg. <script src="https://code.angularjs.org/1.2.15/angular-resource.js"></script> ) and add this dependency to your app initialization:
angular.module('app', ['ngResource']) ...
Don't put your script.js code inside ( function(){} ). If you want to do this, call this
function (function(){})();

Here is your working code: Plunker

Simplest way to use ng-include

Question

2 answers

solution1
3 2014-07-02 20:44:12

solution2
0 2014-07-02 20:28:50

Simplest way to use ng-include

Question

2 answers

solution1 3 2014-07-02 20:44:12

solution2 0 2014-07-02 20:28:50

solution1
3 2014-07-02 20:44:12

solution2
0 2014-07-02 20:28:50