comiventor comiventor - 5 months ago 6
Javascript Question

Unable to use multiple templates/controllers in same HTML

In an Angular app, I need to include

along with its controller in
without duplicating either
or AController.

I wrote the following in A.html but it didn't work

<div ng-include src="src/html/v1/A.html"></div>

Following is the app's code structure

├── html
│   ├── v1
│   │   ├── A.html
│   │   ├── B.html
├── index.html
├── js
│   ├── controllers
│   │   ├── v1
│   │   │   ├── AController.js
| │   │   ├── BController.js
└── sass
├── v1

Following is what contains -

templateUrl: "src/html/v1/A.html",
title: "A"
controller: "AController"
templateUrl: "src/html/v1/A.html",
title: "A"
controller: "AController"
templateUrl: "src/html/v1/B.html",
title: "B"
controller: "BController"
.otherwise({ redirectTo: "/" })

Please suggest what am I missing here.

PS: The answer to this question may be answer to many other similar questions but I couldn't find the answer at first instance. The upvotes to this question clearly tells that it holds relevance.


The src attribute for ng-include accepts an string. So change it to:

<div ng-include src="'src/html/v1/A.html'"></div>

From the docs:

angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. src="'myPartialTemplate.html'".