Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Simple AngularJS 1.5.9 Component Not Rendering in MVC 5

I am trying to get AngularJS 1.5.9 up and running an MVC 5 application using a very simple component called configuration-list.

I created an MVC 5 application (4.5.2), added the Angular.Core 1.5.9 Nuget package

To take MVC 5, layout and razor rendering out of the picture, I created a simple file called test.htm:

<!DOCTYPE html>
<html ng-app>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/app/module.js"></script>
</head>
<body>
    <configuration-list></configuration-list>
</body>
</html>

And in module.js:

(function () {
    "use strict";

    angular.module("radar", []).component("configuration-list", {
        template: "Hello from configuration list"
    });
}());

The browser (IE 11) comes up empty.

I have opened the debugging tools and go to the console tab, and there are no errors logged.

I have put a breakpoint in module.js and it is hit (so I know the code is running)

I have tried moving the scripts below the component in the body tag

I have tried setting ng-app="radar" in the html tag

Any idea what I'm missing?

like image 291
Rick Hodder Avatar asked Jan 25 '17 16:01

Rick Hodder


1 Answers

For components the naming has to be camelcase, not hyphencase

angular.module("radar", []).component("configurationList", {
    template: "Hello from configuration list"
});
like image 148
Daniel Lizik Avatar answered Oct 05 '22 22:10

Daniel Lizik