CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directiveangularjs-ng-include
SystemsGuy
SystemsGuy

Reputation: 153

Simplest way to use ng-include

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="[email protected]" data-semver="1.2.0"     src="http://code.angularjs.org/1.2.0/angular.js"></script>
    <script data-require="[email protected]" 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?

Upvotes: 3

Views: 1292

Answers (2)

Hristo Enev
Hristo Enev

Reputation: 2541

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:

  1. Put your ng-app attribute in the html tag of the document not in the head

  2. 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']) ...

  3. 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

Upvotes: 0

akn
akn

Reputation: 3722

  1. Place ng-app on your body section.
  2. 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'])
  3. 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

Upvotes: 3

Related Questions