AngularJS SPA Template for Visual Studio is a project skeleton for a simple single-page web application (SPA) built with AngularJS, Bootstrap, and ASP.NET (MVC, Web Api, SignalR).

included in Views/Jasmine/SpecRunner.html:

<!-- include spec files here... -->
<script src="~/scripts/controllersSpec.js"></script>

This should be controllers.spec.js

I'm trying to use Material instead of Bootstrap in an Angular project template project inside an asp.net core 2.1 solution in VS 2017. I'm using Angular 7, but the ClientApp won't let me remove Bootstrap, since I read Bootstrap and Angular material are mutually exclusive.

The problem is when I run ng serve on the command line as instructed incorrectly here: https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-2.1&tabs=visual-studio npm start doesn't work.

Everything worked fine until I tried to remove Bootstrap. But I want to use Angular Material instead !!

This has also wasted me an entire day, since, I decided to start afresh with a new project, yet for some strange reason the ClientApp angular project in the .net core solution insists on using Angular 5.2.0, instead of the latest. So now I've got to go through the process of updating all the package.json stuff. :(

I'm assuming it must involve some degree of cookies passing between client and server?

That is, in my Startup.ConfigureAuth(IAppBuilder app), I've got this:

            // Enable the application to use a cookie to store information for the signed in user
            app.UseCookieAuthentication(new CookieAuthenticationOptions
            {
                AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
                LoginPath = new PathString("/login")
            });

            // Use a cookie to temporarily store information about a user logging in with a third party login provider
            app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);

But am not entirely sure what that means. I don't want to redirect to /login, for instance, if I can just pass the front page sign in details, user name and/or email and password, with or without cookie, to a backend authentication service.

Then from that point forward, how to maintain some level of authentication. i.e. user id with or without session id for security reasons. That sort of thing.

Hello,

I don't like the separate page for the sign in. It feels kind of clunky to me, so I would like to simply "replace" the "sign in" button with user credential input and/or signed in credential.

How hard would this be?

For my part, I am not new, per se, to web, angular, MVC, etc, but more of a novice. Probably 30% versed, if you will.

Thank you...

Hello,

As a boilerplate example, excellent piece of work, to begin with. But it is only a beginning. I'm sure that's been reiterated ad infinitum, so to speak. I found a couple of concerns, and I wonder if you can suggest better approaches.

It seems like I needed to add Contacts in a couple different places in order for the wiring to even begin to operate "correctly". "Correct" in this case meaning, at minimum, no 404 errors; in practice, well that's another story beyond the scope here.

As a backdrop, it's not the SOLID-est, nor GRASP-iest, Insert-Favorite-Architectural-Reference-Here, etc, boilerplate code around. But it is an interesting case study. Perhaps that's also some of the Angular MVC-ness rearing its ugly head, as comingled with the ASP.NET MVC container, I don't know.

First, I needed to add a Contacts.cshtml. No problem. That could draw from whatever data model backs it up. Fine, great.

Then I needed to add a ContactsCtrl to the controller.js. Okay, great. It's starting to be a bit verbose in the definition, but again, fine. We're tracking, I think.

Finally, for the wiring to behave "properly", no 404, etc, I needed to connect a contacts state in the app.js. Then all was well, the Contacts page appeared.

Victory! For the moment...

In practice, I would like to keep track of modules, features, user (or group) based roles, authorization, and so on, in the back-end, and have that programmatically inform the application, views, etc. From reading and some experience, that seems like how it's done in production quality code. Apart from special cases, Angular controllers, services, etc, to special FE business logic, I'd like for that to be more than less server-oriented, data-driven, if you will.

Interested in whatever feedback you can provide concerning this.