Why Can't Angular Find My Template?
I'm Trying to Do the phoneCat Tutorial for Angular Js, Except in an Mvc Application. (I Hear It's Not a Great Idea to Mix Mvc Routing and Angular Routing, but...
I'm trying to do the phoneCat tutorial for angular JS, except in an MVC application. (I hear it's not a great idea to mix MVC routing and Angular routing, but I haven't gotten that far yet.)
I'm on step 4, where we split our components off into their own modules. I made a folder in my app called "AngularModules" and made a folder in that called "phone-list". I then placed the phone-list.component.js and phone-list.module.js files we make in the tutorials into that folder. The next step calls for replacing the HTML string with a reference to an external file that will contain the html. but for some reason, angular can't seem to find that file. If I view the template file and press f5, I do start up and go to a view of that file (with obviously no binding done, so it shows the double curly braces and all). I'm quite certain the folder isn't the problem, because if I replace the templateURL part with a template part with a string, it will work.
so here's my phone-list.component.js:
angular.module("phoneList").component("phoneList", {
//templateURL: "",
templateURL: "AngularModules/phone-list/phone-list.template.html",
//template:"<ul>" +
// '<li ng-repeat="phone in $ctrl.phones">' +
// "<span>{{phone.name}}</span>" +
// "<p>{{phone.snippet}}</p>" +
// "</li>" +
// "</ul>",
controller: function PhoneListController() {
this.phones = [
{
name: 'Nexus S',
snipped: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
}
});
I'm not worried I'm not including phone-list.component.js correctly; if I use the template section (currently commented out) it works. That other URL, which points to localhost, also doesn't work. But if I click the link, I do see the page. I have tried templateURL: "~/AngularModules/phone-list/phone-list.template.html", which also didn't work.
How can I get templateURL to work?
1 Answer
According the docs, the property name is templateUrl and not templateURL, so, your code should looks like this:
angular.module("phoneList").component("phoneList", {
templateUrl: "AngularModules/phone-list/phone-list.template.html",
Now you probably needs to handle the template path issue, but you will be in the correct path.
Check info about components here