AngularSpa

Story of File Uploading in ASP.NET Core (Part III - Streaming Files)

We must consider saving files in byte[] formats unless it is absolute necessary, because over the time it can affect the performance of any data storage system. With that being said, streaming can be a good idea in this scenario. We can configure a static files folder for storing the uploaded files. However, this part is optional. You can simply use the web root folder wwwroot instead. But let's just see how to create a separate static files folder on the content root and use it to serve the uploaded…

Keep reading

Story of File Uploading in ASP.NET Core (Part II - Angular/AJAX)

Uploading files from Angular end to an ASP.NET Core Web API can be done using the same IFormFile interface; introduced in the previous post. To keep things separated, a new API controller (UserController) has been created with the following POST action, [HttpPost] public async Task<IActionResult> PostUser([FromForm]UserVM vm) { if (!ModelState.IsValid) { return BadRequest(ModelState); } /* Use Automapper for mapping UserVM to User */ User user = new User { Name = vm.Name }; using (var memoryStream = new MemoryStream()) { await vm.Avatar.CopyToAsync(memoryStream); user.Avatar = memoryStream.ToArray(); } _context.Users.Add(…

Keep reading

Angular Forms Validation, updateOn: 'blur' & updateOn: 'submit' (Angular 5 edition)

In my previous post, I wrote about Asynchronous Validation in Angular's Reactive Forms Control. But that was when we were in the age of Angular 4, now a new age is upon us: age of Angular 5. With the new version, we have some new ways of doing validations in Angular forms. Since I won’t talk about everything from the beginning (How to define a form model, how to add validators etc.), consider this post as a continuation of my previous one. I’ll just show you the two…

Keep reading

How Tree Shaking Works in ASP.NET Core Angular SPA

If you've been using ES2015 modules throughout your javascript codebase; in other words: import(ing) and export(ing) modules, there is a good news for you. You can eliminate unused modules (dead code) from your published script when using different module bundlers available online. And this process of dead code elimination is known as so called Tree Shaking. While rollup (a trending module bundler) being the first to introduce the concept and implement it, other module bundlers came to realize that this is a must have feature and soon they…

Keep reading

Lazy-loading NgModules in ASP.NET Core AngularSPA

Angular has this cool feature of loading a module lazily. Modules that are set up to load lazily can significantly save application startup time. Lazy-load module set up is done in application's routing configuration section. As the title suggests we will be using the AngularSPA template shipped with Visual Studio 2017 Preview (2) for demonstration. Route that is configured to lazy-load a module sends an HTTP GET to the server which in turns return the module in a chunk of code block. This only happens when the router is activated…

Keep reading

Adding Angular Material in ASP.NET Core Angular SPA template (Update 2.0.0)

If you are not familiar with ASP.NET Core SpaServices, take a look at this repository: https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices Lots of SPA templates (Angular, React, Vue, Aurelia etc.) are available in this repo that uses NodeServices for server side rendering. We will work with the AngularSpa template and add Angular Material in it. To install the Spa templates via yeoman, first intall the template generator with the following command: npm install -g generator-aspnetcore-spa@next Create a directory where you will initialize the…

Keep reading