Question

167

Angularjs external templating: the template cannot be loaded?

rated 0 times [ 168] [ 1] / answers: 1 / hits: 9098 / 11 Years ago, wed, december 25, 2013, 12:00:00

I thought loading an external template with Angularjs is as simple as this below,

<div ng-include='template/index.php'></div>

But it does not print anything out on the browser. What have I missed?

The html,

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv=Content-Type content=text/html; charset=UTF-8>

        <title>Angualr</title>

        <meta charset=utf-8>

        <script src=js/angular.min.js></script>

        <script src=js/app.js type=text/javascript></script>

        <script src=js/maincontroller.js type=text/javascript></script>

    </head>



    <body>



        <div ng-include='template/index.php'></div>



    </body>



</html>

the template,

<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

    <input type='text' ng-model='searchText' />

    <ul>

        <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>

    </ul>

    <input type='text' ng-model='newPerson' />

    <button ng-click='addNew()'>Add</button>



</div>

js/app.js,

var app = angular.module('MyTutorialApp',[]);

js/maincontroller.js,

app.controller(MainController, function($scope){



    $scope.people = [

        {

            id: 0,

            name: 'Leon',

            music: [

                'Rock',

                'Metal',

                'Dubstep',

                'Electro'

            ],

            live: true

        },

        {

            id: 1,

            name: 'Chris',

            music: [

                'Indie',

                'Drumstep',

                'Dubstep',

                'Electro'

            ],

            live: true

        }

    ];

    $scope.newPerson = null;

    $scope.addNew = function() {

        if ($scope.newPerson != null && $scope.newPerson != ) {

            $scope.people.push({

                id: $scope.people.length,

                name: $scope.newPerson,

                live: true,

                music: [

                    'Pop',

                    'RnB',

                    'Hip Hop'

                ]

            });

        }

    }

});

EDIT:

Directories,

index.html

  js/

   ...

   ...

  template/

    index.php

EDIT 2:

index.html,

<div ng-app='MyTutorialApp'>

        <div ng-include='template/index.php'></div>

    </div>

template/index.php,

    <div id='content' ng-controller='MainController'>

    <input type='text' ng-model='searchText' />

    <ul>

        <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>

    </ul>

    <input type='text' ng-model='newPerson' />

    <button ng-click='addNew()'>Add</button>



</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sophiak

Add To Favorites

Follow

Total Points: 242

Total Questions: 90

Total Answers: 103

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

answered 11 Years ago harleyterryp · Accepted Answer

Live demo here (click).

ng-include looks for a $scope property, so you need to pass it a string, like this: ng-include='/template/index.php'.

<div ng-include='/template/index.php'></div>

What you were passing to it essentially makes it look for this in your controller: $scope['/template/index.php'] = 'some string';

You're also bootstrapping angular in the template itself - so how could it be included? ng-app needs to be in the main page so that ng-include can work!

<some-element ng-app=myApp>

  <!-- in here, angular things work (assuming you have created an app called myApp -->

  <div ng-include='/template/index.php'></div>

</some-element>

Just replace some-element with something like html, body or whatever element you want the app to work from.