Saige Blog

Hi, my name is Saige. I have been working in the field of full stack developer for about 5 years. In the past five years, I have built some Web applications and Web APIs. C**#** is my primary programming language and I am also compatible with Java and Python. For the backend technology in my most recent projects, I used ASP .NET Core, Entity Framework Core, Dapper and MVC 5. I used SQL Server as a database but I’m also good with MySql and PostgreSql. For the frontend, I usually use Angular frame ...

Introduction Define paginated list inhered from List, having the property PageIndex (The page number) ,TotalPages (Count/pageSize), TotalCount(total item count), this one is not necessary becuase the count is accessible from List.Count Therefore, in order to get the next page, you need to send the next pageIndex to controller(PageIndex + 1). The page size is set to 30 by default. The page size is option parameter for controller. The GetPaged method is a static method to get paged list by skippin ...

@Injectable({ providedIn: ‘root’ }) Command Lines Angular CLI The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. Template statementsTemplate statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. See the Template syn ...

Overview How to break your app into components How to make reusable components using inputs How to handle user interactions, such as clicking on a component ModelProduct ModelOne of the key things to realize about Angular is that it doesn’t prescribe a particular model library. Angular is flexible enough to support many different kinds of models (and data architectures). However, this means the choice is left to you as the user to determine how to implement these things. 123456789101112/** * P ...

@Injectable({ providedIn: ‘root’ }) ==Decorator==Component => Services => API (Rest) HTTP Call Ajax Call in Angular HttpClient => API Async/await and Tasks Promises Observiables => Observer pattern Publish/subscribe pattern

OverviewAngular provides two different approaches to handling user input through forms: reactive and template-driven. Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes. FormReactive forms and template-driven forms process and manage form data differently. Each approach offers different advantages. Reactive forms provide direct, explicit access to the underlying forms object model. Compared to t ...

RoutingHow client-side routing worksPerhaps you’ve written server-side routing code before (though, it isn’t necessary to complete this chapter). Generally with server-side routing, the HTTP request comes in and the server will render a different controller depending on the incoming URL. The beginning: using anchor tagsClient-side routing started out with a clever hack: Instead of using a normal server-side URL for a page in our SPA, we use the anchor tag as the client-side URL. As you may alrea ...

Property binding and securityProperty binding can help keep content secure. For example, consider the following malicious content. src/app/app.component.ts 1content_copyevilTitle = 'Template <script>alert("evil never sleeps")</script> Syntax'; The component template interpolates the content as follows: src/app/app.component.html 1content_copy<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil ...

IntroductionAutomapper could use user defined mapping profile or built-in mapping. It mapped from the entites(source) to models(desitination). CodeMovieDetailResponseModel has two inner class CastResponseModel and GenreResponseModel. The MDRM(MovieDetailResponseModel) has two List property Casts and Genres. We have to define the rules for mapping from Movie Entity’s MovieCast(which has the many-to-many relationship) to MDRM’ Casts. Therefore, we need a method called: static List GetCasts(IEnume ...

Property BindingProperty binding moves a value in one direction, from a component’s property into a target element property. Binding to a propertyTo bind to an element’s property, enclose it in square brackets, [], which identifies the property as a target property. A target property is the DOM property to which you want to assign a value. For example, the target property in the following code is the image element’s src property. Setting an element property to a component property valueTo bind t ...