How do I get Angular JS to work in a Visual Studio

2019-02-28 15:17发布

问题:

I think my problem is that I don't have Angular JS properly configured on my machine or Visual Studio 2015, but I'm not sure. All I know is that my app is showing a blank page and that Visual Studio 2015 is not recognizing Angular tags. Can someone explain what I'm missing and how to add it?

I have been given a Visual Studio solution from a client and need to get it running. I know it uses some kind of Angular JS and seems to be using C# 6.0 and needs Visual Studio 2015 to compile. I have never used VS2015, C#6.0, or Angular before. I usually develop asp.net/C# apps in VS2013.

The project compiles (I can clean and rebuild it), but the initial screen is blank. The page source of that page seems to be the code I want however. In VS, I can see it doesn't recognize certain tags. I thought that I needed to include a reference or download something related to Angular. I re-downloaded the Angular files from https://angularjs.org/. I also tried explicitly reference the angular.js file in the head of the aspx page as shown here: https://www.npmjs.com/package/angular-material. I also tried adding the angular to intellisense as described here: AngularJS intellisense not working on Visual Studio 2015. None of these are working.

In VS, I'm getting warnings on lines like these:

<body ng-cloak ng-controller="litm.xyz.recipes.IndexController">
<div layout="column" layout-fill>
<md-toolbar>
<md-button class="md-icon-button" aria-label="Settings" style="padding: 0">

The errors say that the attributes aren't part of the tag or that the tag is not supported:

I thought this was just intellisense not working, so I tried to run the solution. It compiled and shows me a blank screen. If I look at the page source of the screen, I can see that my code is there, but nothing is displaying:

If I remove the Angular tags, I can get the page to show up. So if I replace the initial body and div tags with this:

    <body>
    <div>Text

I can see part of the page:

This seems to indicate the problem is with the Angular tags. So how do I get them to work?

Edit 1:

I added these references to angular:

<script src="/lib/angular/angular.js"></script> 
<script src="/scripts/angular-aria/angular-aria.js"></script> 
<script src="/scripts/angular-animate/angular-animate.js"></script> 
<script src="/scripts/angular-material/angular-material.js"></script> 

The only place I could find angular in the code is in package.json:

"browser": {
"angular": "../lib/angular.js",
"angular-animate": "../node_modules/angular-animate/angular-animate.js",
"angular-aria": "../node_modules/angular-aria/angular-aria.js",
"angular-cookies": "../node_modules/angular-cookies/angular-cookies.js",
"angular-hammer": "../node_modules/angular-hammer/angular.hammer.js",
"angular-data-table": "../node_modules/angular-data-table/release/dataTable.helpers.js",
"angular-material": "../node_modules/angular-material/angular-material.js",
"angular-messages": "../node_modules/angular-messages/angular-messages.js",
"angular-sanitize": "../node_modules/angular-sanitize/angular-sanitize.js",
"angular-ui-grid": "../node_modules/angular-ui-grid/ui-grid.js",
"angular-ui-router": "../node_modules/angular-ui-router/release/angular-ui-router.js",

The angular js files are in the lib and Script folders: