Page 56 - MSDN Magazine, July 2017

Figure 1 Simple Angular Component: ProductsComponent
(bit.ly/2p1Jfs5), TypeScript (bit.ly/2p1LBXN), npm (bit.ly/2pfw316) and Reactive Extensions for JavaScript (rxjs) (bit.ly/2piytxU).
Modules
The building blocks of all Angular applications are Modules. You can compare Modules to an MVC Area. For the most part, it’s seg- regated from the rest of the application, and different developers can work on different modules at the same time with barely any overlap. In the code provided on GitHub, there are three modules of importance: AppModule, ProductsModule and CartsModule. ProductsModule and CartsModule are the two that are isolated-like areas. AppModule is the connector as it puts everything together.
Components
A module itself is typically made up of other modules, components and services. The components declared in each module are where the data and HTML come together.
Through Visual Studio, you create a simple component (prod- ucts.component.ts) under your Web project (MainSite/ClientApp/ app). The initial creation of this component can be seen in Figure 1.
Component Decorator
Other than the @Component decorator, this TypeScript looks similar to a C# class with the references at the top and class being declared. The @Component decorator has a required object, which tells Angular how to use this class and lets the component be self-contained.
The selector informs Angular that in any HTML if this CSS selector is used, it should create this component and insert its gen- erated HTML at that location. This also means that if you have HTML code like the following, you’ll have three separate instances of each component and three separate classes will be created:
<products></products> <products></products> <products></products>
The template allows HTML to be inside a single file rather than always having to generate an HTML file for every view. As the cur- rent template wraps lines, single quotes aren’t used. Instead, tick
import { Component } from '@AngularJS/core'; @Component({
selector: 'products' template: `
<h2 class="intro-header">List of Products</h2> <ul>
<li>I am a product</li>
<li>I am another product</li> </ul>
`,
styles: ['.intro-header { color: blue }', 'p {font-size: 10px;}'], providers: []
})
export class ProductsComponent {}
CancellationToken parameter to an API method won’t affect your route template. It will give you a token that you can pass down to an appropriate async call to handle:
[HttpGet, Route("{id: int}")]
public async Task<IActionResult> GetByIdAsync(int cartId, CancellationToken token){
var cart = _cartService.GetByIdAsync(cartId, token); if (await cart != null) return Ok(cart);
return BadRequest();
}
Tools
Now that you have the Web API in place, you don’t have to build out the UI or your own tool to test the Web API functionality. Along with your unit tests, two tools stand out as great utilities to support your API development: Postman (bit.ly/19MnN02) and Swagger (bit.ly/2p1GeYH).
Web API has other features to make Web API robust and help keep your API methods down to as few lines of code as possible. In your empty controller, you had only the need for some simple CRUD operations, but other APIs you’ve created have put a message on an Azure Queue, kicked off a back-end process, or fired and forgotten as part of CQRS. The application of using API Controllers is vast and extensive.
Angular
Today’s Web APIs are utilized frequently by one of the many JavaScript frameworks that companies
use. One of the more popular frame-
works is AngularJS. AngularJS provides
marks are created and it’s a good habit to use even if the template is just a single line where single quotes could be used.
If your HTML gets a little messy, you can always pull your template out into its own file and reference it, but tem- plate now becomes templateUrl. The same can be said for styles, except that it’s an array of styles or it’s an array of references to styleUrls.
Providers is an array where Injectable Services for your component class can be declared. Singleton services would not be declared at the component level. Each time a component gets created, Angular does an inside-out search for the injected services. Looking at Figure 2, you’d never realistically create this
Parent.Module { providers: [WidgetService] }
Child.Module_A { providers: [WidgetService] }
Component_A Component_B
providers: [ WidgetService
]
Child.Module_D Component_C
some great features and lets a develop- ment team get up and running quickly. AngularJS was completely rewritten from version 1.x (called AngularJS) to version 2.x (all versions starting from version 2 are now called Angular), and the Angular team recently released ver- sion 4.0, which is not a rewrite and is backward-compatible to version 2.x (for the most part it’s a seamless upgrade). From a Visual Studio perspective, Angular can be intimidating because the setup isn’t as easy as it once was with just JavaScript files. Other technologies it helps to be familiar with are Webpack
Figure 2 Hypothetical Layout of Parent Modules, Child Modules and Their Components
50 msdn magazine
ASP.NET Core