CODEWITHSUNDEEP
javascriptangularjsasp.net-mvc
Rick Hodder
Rick Hodder

Reputation: 2252

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?

Upvotes: 8

Views: 4668

Answers (1)

Daniel Lizik
Daniel Lizik

Reputation: 3144

For components the naming has to be camelcase, not hyphencase

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

Upvotes: 18

Related Questions