Showing posts from 2017

How to use the Angular Router

How to use the Angular RouterToday we will see how to use the Angular Router. The router allows us to define routes which are transformed to urls which are then understood by the browser. Having routes allows us to create different categories and access points to our website. This post will be composed by 6 parts:Define routesRouter outletSpecial routesData and ActivatedRouteResolve guardCanXXX guards1. Define routesTo start, we need to import the RouteModule and the Routes type from the Angular router.import { RouterModule, Routes } from '@angular/router'; The routes are defined via constant and then injected into the router module using either forRoot or forChild.forRoot is used to define routes on the main module and forChild is used to define routes on the child modulesFor example we can define two routes which we add to the main module:const routes: Routes = [ { path: 'home', component: MainPageComponent, }, { path: '', redirectTo: &#…

Reactive form with Angular

Reactive form with AngularI have been following the reactive movement for a long time now, especially from UI perspective from push design with websockets to in browser reactivity with WebSharper.UI.Next.
In term of form design, I always felt like there was a lack. A form concept is simple, but it always escalates to an extremely over designed code with inline validation, server validation, incorrect validation at time, multisteps, asynchronous selection, etc…
Something was missing, how the validation was done and how dirty it was to code a proper post back form.WebSharper was the real first innovation. It came out with a set of combinator that I explained in a [previous blog post] removing the “dirtiness” of form handling.
It just felt right. And when things in programming start to feel right, it means you are on the right path.Since its evolution from 1.x.x, Angular have supports for reactive form with a form builder. Today I will explain the concept and how to use it.1. Create a rea…

How to declare a component in angular

How to declare a component in angularLast week I explained what was the NgModule in angular, we saw what were the parameters we could add and what those parameters could be composed of.
Today I would like to talk about another main piece of Angular, the Component.
We will see what argument it takes and how we can use it.1. Parameters 2. Input/Ouput 3. Access child component 4. NgOnChange 1. ParametersComponent in Angular derives from directives. Some of the most used properties are:providers which defines a injectable values or services scoped only by the component and its children (compared to injectable provided to the module which is application wide)selector which defines a CSS selector to use the componentHere are some of the parameter used to defined a component:styles for inline style in the componenttemplate to define inline templateFor example here is a simple component:@Component({ selector: 'app-square', template: '<div></div>', styles: [ &…

How does NgModule work in Angular

How does NgModule work in AngularThe first time I saw the NgModule decorator and its arguments I was completely lost.
I couldn’t understand what was the meaning of imports, declarations, exports, providers or bootstrap and I had a hard time finding clear explanations.
So today I will go through each attributes and provide an explanation together with an example to understand what is the role of each NgModule argument.1. How does a NgModule declaration look like? 2. Imports 3. Exports 4. Declarations 5. Providers The full source code is available on my GitHub How does a NgModule declaration look like?Angular utilises the typescript decorators to define NgModule.
It accepts imports, declarations, exports and providers.A typical declaration would look like that:import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { SquareComponent } from './square.component'; import { SquareServ…

Saving data with Entity Framework Core with SQLite

Saving data with Entity Framework Core with SQLiteEntity Framework is a framework abstracting away all the complexity of dealing with storage. This abstraction is also known as ORM ~ object-relational mapping.
There is a number of provider which are implementation of the storage like SQL server or MySql or also SQLite, the one we will be seeing in this post.
SQLite is a embedded database. The whole database is contained within a single .db file which makes it highly portable, so portable that it is the default database installed in mobile OS like iOS and Android. It is extremely easy to use and to maintain. It also offer a powerful implementation of SQL. Today we will see how we can make use of Entity Framework with SQLite provider in a ASP.NET Core application. 1. Install EF and create a new DbContext 2. Create migrations 3. Use in ASP NET Core 1. Install EF and create a new DbContextStart by installing the packages:Install-Package Microsoft.EntityFrameworkCore.SQLite Once we have …

Razor syntax and helpers

Razor syntax and helpersRazor is a HTML templating engine which allows us to construct HTML pages from a combination of data and HTML markup. The power of Razor resides in its typesafety and support for well known operators, conditional ifelse and iterators forwhileforeach. It allows us to directly use our C# models in the templates and call functions accessible by the view. Together with intellisense, it is quick way to build UI.
Today we will explore some of the features from Razor: 1. Syntax 2. Layout and partial views 3. View components 4. Tag helpers 1. SyntaxRazor expressions can written in two ways, implicit or explicit notation.For implicit notation, we start with @ and then we directly have access to values either from the view itself or some we created in the view or static functions.@{ var a = 10; } <label>@a</label> One useful property of the view is the Model.
It gives access to the model linked to the page. By going @Model.XXX, we can access the prop…

Attribute route in ASP NET Core

Attribute route in ASP NET CoreAttribute route in ASP NET Core is an easy way to define URL routes for Web API projects. There can be instance where it gets confusing because of all the options provided. Today we will see the meaning of the different options and how they affect the constructed route. This post will be composed by 3 parts:1. Route attribute 2. Route values and token replacement 3. "/" or "" 1. Route attributeThere are two ways to define routing, convention and attribute. When both are set, attribute route takes priority over convention route. In this post we will only discuss attribute route.Attribute route is specified using the [Route(...)] attribute. The route attribute can be set on controllers and actions. Setting the attribute on a controller will prefix all action route by the controller route.So for example specifying the following:Route("values") public class ValuesController: Controler { Route("list") public IA…

Opinions and decisions, how to be a successful team mate

Opinions and decisions, how to be a successful team mateI have been working for more than 8 years in the software industry and have dealt with loads of developers from junior to senior.There are multiple points which can make a successful team mate. One of them is knowing when to express opinions and when to take decisions. One thing I have learnt is that decisions, forcefully agreed on, will most likely not be respected by the team. I also learnt that decisions come from opinions and the way we express opinions will dictate the level of respect team mates attributes to you and the level of trust they place in you. Just like in sport, respect and trust are the most important values to have.
Today I would like to explore the different scenarios where we, as developer, should express our opinions and also when should we, as developer, take decisions.1. OpinionsThose are rules that I have followed and which have lend me into building lasting relationships with team mates.There are two ru…

Filters in ASP NET Core - what are they and how to use them

Filters in ASP NET Core - what are they and how to use themASP NET Core comes with a concept of filters. Filters intercept the stages of the MVC pipeline and allows us to run code before/after their executions. They are meant to be used for cross-cutting concerns; logics which is required accross the whole application, generally not business oriented. One example is authorization where in a Web API, we would use to prevent unauthorized request to execute the code in our controllers. In order to do that we would have a filter at the entrance of the pipeline. In fact, ASP NET Core has predefine stages, the diagram can be found on the documentation Another example of a cross-cutting concern would be for logging and timing functions. While the concept of filters is easy to understand, the way to implement those aren’t always straight forward, especially when the filter instantiation itself requires simple objects. In or…

Different types of authorization in ASP.NET Core

Different types of authorization in ASP.NET CoreLast week I touched on how we could authenticate users using Resource Owner Password flow with identity server. Authentication is the act of taking the information provided and verifying the “identity” of the user, ensuring that Alice (our beloved example user) is who she “claims” to be.
In the program itself, we take her credentials and verify it and create an identity stating that the user is Alice and has claims A, B and C.Authentication is the first part of the access security, the second part is the authorization. The difference being that for authorization, we know who the user is, what we are verifying is if Alice is allowed to perform what she is trying to perform. The easiest example is the difference between user access and admin access commonly seen in software where users are authenticated but aren’t authorized to perform all the actions available in the system.ASP.NET Core comes with a set of useful tools to perform authoriz…

Resource owner password flow with Identity Server 4 and ASP.NET core

Resource owner password flow with Identity Server 4Few week ago I described how to build a custom Jwt authentication.
Today I will show how we can use Identity server together with Resource owner password flow to authenticate and authorise your client to access your api.This post will be composed by 3 parts:1. Identity server 2. Protect an api 3. Configure a client The full source code is available on my GitHub Identity serverIdentity server is a framework which implements Open ID Connect and OAuth 2.0 protocols.
The purpose of Identity server is to centralize the identity management and at the same time decouple your api(s) from authentication and authorization logic.
Centralizing has many advantages:If you have multiple apis, you can hold your identities in a common placeIf you have multiple apis, it provides single sign on - user only sign in into one client and is automatically sign in in all apis. This works because all clients …