 Yes, yeah. Hey everyone. So today, I'm going to talk about, sorry, share screen. Today, I'm going to talk about building applications with Angular and iSpanlet.net core. So today, I will guide you how to create web applications by using an Angular on the front end that connects to an iSpanlet.net core on backend. This talk will be like some brief guide for developers who want to start how to create web applications or getting new knowledge about using a combination of iSpanlet.net core 2.1 and Angular 6. So I'm going to do this in English because it's just a lot smoother that way for such a global.net conference. But if you want to ask me any questions in Russian, because I'm from Russia. So feel free to ask and I will be happy to discuss your questions. So all right, let's get started. So this is agenda for today's talk. We will start with checking out the prerequisites, tools and requirements for preparing of the environment. Moreover, you will learn how to create web applications with and without using.net core single page application templates in Visual Studio 2017. And we will also look at the way how you can do the same by .NET CLI comments. First, we will look at my demo project and we will analyze a structure of solution and what I have chosen to develop it. And by the end of the session, we will talk a bit about upgrading an Angular app to the 6th version. Okay, so I want to pay your attention in a few moments about prerequisites. So if you have already built Angular applications, it's great because we will talk today about Angular 6 and it will be nice to know basics of Angular 2 or higher. The next moment, it is knowledge about building apps using espana.net core 2. Preferably it applies to building APIs and in addition, I want to mention about IDE, which you can use to build such applications. So Visual Studio 2017 supports both of them from version 15.3 and higher. Also, you can use Visual Studio for Mac, which fully supports as well. You can also develop your application using Visual Studio Code or TradeBrainTrader, etc. I will use Visual Studio 2017 to write the camps and Visual Studio Code for front-end parts. That doesn't mean that you should use the same, so feel free to use whichever you prefer. That's it. Okay, now let's prepare our environment. As I mentioned before, I'm using Visual Studio 2017 to write the camps. So we should install espana.net core 2 in case if you haven't it, you should go to Microsoft official website and download and install it. So to write TypeScript code, I will use Visual Studio Code. Everything is that. I already have on my machine. So also, firstly, we need to make sure that we have installed Node.js 8 Plus version and NPM package manager on our machine to run our Angular application. You can download this old package from our official websites as well. And the next phase is installed in Angular CLI, which allows us to create a new application, generate components, road services, and so on. So you can also debug your application using NGServe comments. Well, to install Angular application on global level, you just need to type NPM comments like that. NPM install global-level Angular CLI. That's it. So that allows to use CLI comments anywhere on our machine. By the way, there is a visual presentation of Angular CLI, which is named as Angular console. It means that we can do everything that Angular CLI can do. You can create projects, interact with your editor, or engineerators, comments, install extensions without ever touching the terminal. You can even run every Angular CLI comment via Angular console and that without remembering all the flags, paths, names, etc. So you can download an Angular console from our official website. So it is Angular console.com. And you should only choose the most suitable version of your operation system to download Mac, Windows, Linux, and the pretty straightforward steps to install. So that's it. Now, let's look at how to create Angular application with and without using .NET Core single-page application templates using Windows Studio 2017. There is more one way to create an Angular application with .NET Core. So let's start to talk about the first approach. Here is a create an .NET Core application API project where we will not use an Angular template, because it will be on the next step with adding an Angular 6 application to an API project using Angular console. So on the slide, you can see that there are two steps with a complete .NET Core API project without client up. And the next step, it is creating an Angular client application using Angular console. So now we should, the first, it is create .NET Core API project. Let me switch to Visual Studio. Okay, there you go. So we should create new project. So you should select .NET Core, .NET Core web application, put some name for your application, and press OK. So in the next video, you should select in our approach an API entity template for creating an .NET Core application. Okay, so now we need to create a client application. And there are two ways how we can do that. We can add our Angular application to our project for Angular CLI. To create Angular 6 based up, you should to navigate to our .NET Core project folder, where we have our .CS approach file is present, and run the comment which is creating a new client application for us. So let me show you. Okay, so you should type ng new client up. So this comment will create an Angular 6 application within our .NET project. But if you want, as I mentioned before, do not remember all these comments, and you prefer graphical user interface. Then you should test the new tool, Angular console. So if you have installed Angular console on your machine, then you can create Angular application using that. So let's try. I'm going to create an Angular application using Angular console. So I have already installed this. You can either create a new Angular application, or you can import your existing application, which is created before. So creating a new application is pretty straightforward. And all you need, it is select path of your project, provide workspace name. It's let it be users, source, repos, and our web application 10. Okay, and now we should provide client of name for our workspace. And we should choose the schematics. Okay, good. But you can ask me, what is Angular workspace? Angular space, it is directory, which is generated via Angular CLI comments. And able to contain multiple projects, libraries that derive the configuration. Schematics, it is workflow tool. It is a part of Angular DevKit, which lets us transform, generate, or update your project and development within our development workflow. Angular CLI uses schematics under the hood in order to perform some jobs inside. And schematics provide an ability to configure the options of schematics package in the root level of our workspace. So now I should only hit on the create button. And you will find that Angular console writing the Angular CLI comment for you to create the workspace and scaffolding your application. Angular CLI has an integrated terminal engine. So when you compose and execute your comments visually, you will see all your change reflected in the inline terminal output in real time. Create an application takes approximately four, five minutes of your time. I want to do that right now because I already have my client application Angular workspace for today talk, which has been created by me before. So let me show how you can also build, serve, and test your application. So I have client application for my .NET Conf test application. Now I will select you and I have here for options, serve, test, build, and generate component. So let's build our client application. So here you can see that we can choose some important fields. It's prompt when you can choose a hit of time application, option, or watch option. You can select also the build configuration can be default or production. Based on your selected options, the comment will change accordingly. So I selected all these options and now let's run. So now our Angular application is building and we should wait some seconds, I hope. And also you can see that here we have, as I mentioned before, inline terminal, where we can see all building history, which is running in real time. So building in progress, all five modules, more, more, more. Okay, good. Now on the build successfully, you can also run the application. Now you can serve your application and I'm clicking on run. And now I have access to the Angular Live development server by the next URL, localhost. So let me go to the next URL. So our application is complete and ready to test. So also the next important thing that is you can also run unit tests. It is really important and you can check all your client tests from Angular console as well. In result, Angular console will run a browser where you're able to see all your test results and see what tests passed or failed. So as you see, we have one failed test because it's expected equal to we're going to do .NET conference but it should contain welcome to client help. So test is working. Okay, but if you remember, our task is to run our Angular application with .NET score. So for this, we need add some code within the startup class and we should switch on Visual Studio 2017. So the spot template uses Angular application and Angular client side and .NET core and began. So it uses package, Microsoft, .NET core spa services as a middleware to provide different configurable options for your application such as hot model replacement, routing helper and so on. So let's find out how to implement Aspen and .NET core spot template features in the same app. So to do that, we should register spa services that can provide static files. So let me switch on my .NET test application because I already have here client app which was created by me by Angular console. So let me open startup plus. And here I should provide adding spa static files. Services, here we have client app dist. Okay, good. So here is a published resources will be copied to the dist folder inside the client app folder. Next, we need to add spa middleware to the pipeline. We can do that inside the configure method. And so the configure method should contain the next. I will copy the required code fragments from my snippets. Do not waste my session time by typing all these codes. And now we need also to add script to package JSON which will start serving your client's application. Now, let me switch on package JSON. And here you should add script section and type ng-serve comments. Okay, now we should to provide our script name for .NET CLI server and thereby by adding the next piece of code. So if our environment is in development, we should add spa and use Angular CLI server and MPM script should run script start. Okay, so by the way, we make sure that the property launch URL is not present in our launch settings JSON file because we should run our client site application and do not use API action method. So should delete or comment as you want. So it is a quiet configuration for running Angular code with .NET score. So now we can test our application. Let me run our application using .NET CLI comment. Our store is completed. Okay, and now we can run our application. So now our application is listing on a local host 5.0. We have some problem in scripts really. Oh, sorry, I have lost the most important part that the script is named start. Yes, a little bit more time to wait. Okay, we are ready to check. Okay, so our Angular application is now running with .NET score. Awesome. So let's extend this application and call the ValusControl API from Angular application. To do that, you should open our app component and I will use for that already Visual Studio code. Yeah, let me open now. Okay, let me open now Visual Studio code. Okay, first we need to add imports of HTTP client to our component. So we should HTTP client from Angular common HTTP. So, and then we should add HTTP get request to our ValusController API. So let me copy of that. Do not waste our time. So here I have string array with Valus. And here I have HTTP get method to get values from our API. And then I can to set this result to my Valus string array. Okay, also next step it is import of our HTTP client model to our app model. And add this model to import for our app model. So finally, we should add some HTML to show all our values on the page. So we have some HTML. It should look like our values and list of our values here. So now we are ready to test. We can see that our .NET clear comment is rendering our search sources. And we can see our values on the screen. Okay, now we should see all these values which return from API. Good. Now, so this is the next part. We now created an application without a spa Angular application to play. So now in the second approach, we will use this spa template. And we should create now a new project. But we should only choose Angular template on the next step here. So in result, Visual Studio will create a complete well-structured application for you without extra steps like we did in the first approach. So you already can see that we have already client-up folder in our application. And also you can notice that we haven't some views folder. And it is no longer there because we don't need that views folder because we are using client-up as client-up to play. So that's it. We just created an Angular 6 application with .NET Core, pretty straightforward, no problems. Now, let me show you how to create the same using .NET CLI comment. So we can scaffold a new project using also .NET Angular comment and create and scaffold all everything that you need for your Angular application with .NET Core. All of you need, it is type your comment .NET Angular .NET Core app with the x. So we can see some processing of creating our project. And here go, we have already complete application. Now, let me look into this folder with our application. .NET spawn and x and run Visual Studio code. So we see the same well-structured application with client-up, with controllers. Here some other name for controller, sample data controller, the same from the structure and other things. Everything is the same. It's really simple and easy to start and use .NET CLI comment. Now, let me switch on the next part of our demo. In this module, I will guide you through my build guide web application. In addition, I will recommend you to get the source code from my GitHub, which you can download or work. So here you can also clone or know what you prefer. So the latest change already are present on GitHub. So this bear application provides you information about bears around the world. It's using a third-party bearer DBA API to get NSRoot data. This application has been created using Visual Studio .NET Core single-page application template based on Angular. If you want to run this application locally on your machine, you should first get a private key to access to Bearer DBA API. But if you want to skip these steps with registering a private key, you can open the public version of my application, which is hosting on Azure and available by this URL. So bearguide, azurewebsites.net, so welcome to Bearguide. I have published my application to Azure Cloud using pay-as-you-go subscription. It is a preview subscription, which allows you to pay on what you use in fact. You can cancel any subscription. You can edit and billing error service to notify you when price has been changed. So it will help you monitor and manage billing activity. It's really useful and flexible pricing plan. So now let me show what we have in my demo in the sources. So let me open my application. So I have created a solution with a few layers as you can see. As we are working on a layer architecture, our project must be independent between all the layers. I can say that the controller layers and data access layers must be independent. If we make it tightly coupled, any change related to the data access layer can change the controller code. Hence, the repository is used to create an abstraction layer between the data access layer and business logic layer of an application. So implementing these patterns can help insulate your application from the changes in the data store and can facilitate automated unit testing or test driving development methodology. So now we'll check each of these all layers one by one in detail. So the first layer, it is BEAR app web application project. This layer is mainly used to handle requests from which are coming from the client. The web layer mainly contains the controller classes. It is BEAR controller client part as we had created before using Angular console. And some layout pages to share my HTML on page. BEAR controller is derived from MVC controller where we have several main actions. You can see that I have some roadings which we are working for various query strings. So now let's look on Startup class. All configuration contains in Startup class. As you know, Startup class configures services and there's an application request pipeline. Both the host and app services are then available in Configure and throw out the application. The Configure services method is called by the web host before the Configure method to configure the application services. So now let's look on our BraveryDB settings. It is my class to store and keep my settings to access to BraveryDB API. So when you are working with applications, you can kind of get hooked to the ease of the dependency injection and some way to keep settings in adjacent and access to the pro-DI. So I'm here, I use the options pattern which uses classes to represent groups of related things. When configuration settings are isolated by scenario to inter-separate classes, the application adheres to two important software engineering principles. And an options class must be non-obstruct and with public parameters constructors. So the following class BraveryDB settings has two properties, API URL and API SecretK. As you see, I injected this settings class and then added it to score of my application to get it everywhere where I want. So now you can see how I'm using this setting so it's my beer service where I'm trying to get access to BraveryDB API and here I have injected my BraveryDB settings via constructor and now I can get access to the settings anywhere and I'm using here to get access to API SecretK. Now let's talk a bit about HTTP clients. HTTP clients got a whole new implementation based on .NET sockets and a generic spam class. It also got a new factory, a new factory which is a class which is assets in creating or pre-configured instances that plays nicely with dependency injection. So I'm using here BraveryDB client which is an HTTP type client and you can't use a pre-configuration for your HTTP client inside a custom class as I have used here in my case. So this BraveryDB client has HTTP client public property, read-only property and injected HTTP client via constructor. So this custom class can be registered as typed client and later when we needed this class it can be injected via the calling class constructor let's switch on beer service and here you can also see that I have injected BraveryDB client via constructor for beer service. So I prefer typed client for following the reasons the first it is a flexible approach compared to named clients. You can no longer have to deal with strings like in named clients and you can encapsulate the HTTP calls and all logic dealing with that endpoint. So now the second layer it is beer up business logic layer. Here you can see just a pair of interface and it's implementation, beer manager and high beer manager. It just contains some logic which allow me to manage my application behavior which it is working which depends on client's request and during some filtering, sorting, searching and so on. Well, also as you can see I have some entities. All entities were extracted to the separate beer up entities project. So here I have all these models and it is also good to have all your models in the separate project. Now beer up services which I have already talked about it is using to communicate with our BraveryDB API. Beer service is the main limitation of this layer with our interface. As you can see here I'm using query helpers. Let's talk a bit about query helpers. You may be noticed that creating a query string in code can lead to errors as you have to deal with strings, ampersand, and question marks and so on. Fortunately ispandet.net core has a static class query helpers which has a function adquery string offers a neat way to build your query string and aspandet.net core. So the adquery string has two parameters. It is one for creating query string for a single parameter and another for multiple your parameters. You don't have to deal with ampersand and question marks while you are composing your query specifically for some queries where we have a lot of parameters. Yes, of course, we have beer up below tests project where we have all our unit tests to cover our logic. Okay, good. Now let me switch on my client side of my project and I want to show a bit about client side part. So let's look what we have in client application which has been updated by me to the six version. It is 6.0.9 version which is using now for my application. The six version of Angular CLI has been published with a lot of improvements and changed. So I will try to discuss a few of them. The architecture of an actualized Angular CLI project has been changed mostly under the hood and since the releasing of Angular six version release candidate two. So the first thing it is AngularJSON file. So you can notice that AngularJSON most likely that all and we have encountered the Angular CLIJSON file journey project using Angular CLI. It is well known that this file is used as four configurations came up for the whole project and manipulated by the CLI including managing of different improvements. Environments, testing, proxy, third party resources and so on. Also as you may have noticed the old configuration file AngularCLIJSON was replaced by new one. So and now we have AngularJSON file with some change inside and the whole configuration now is contained in this file. Now let me switch on BEARS service. I want to pay your attention in a new recommended way how to register a provider directly inside your services. So in the injectable provider you have a new provider in attribute. It accepts root as a value or any model of your application. So and when you use root your injectable service will be registered as a single zone in the application and you don't need to add it to providers for the root model. Similarly when you are providing in for example users model the injectable is registered as a provider of the users model without adding it to providers of this model. And the new way has been introduced to have a better tree shaking in the application. Currently a service added to the providers of model will end up in the final bundle. You can use it ever if it's not used in the application, which is a big site but if you use lazy loading you can fall in a bunch of traps or end up with the service bundling in the wrong place it shouldn't happen often in applications. If you write a service and you usually use it but for party models sometimes offer services that you don't use and you end up with a big bundle of useless. So it will be especially useful for library developers but it is now recommended way to register an injectable ever for application developers. So the new CLI will have a scaffold service provided in root by default now. So when you are creating your application new your application it will be add by default. Now let me show my Beers components. Angular 6 uses now RXJS 6 version internally and requires you to update your application also. So and RXJS 6 has been changed and now we have the way how to shoot imports some things. So RXJS and higher version introduced two important changes compared to RXJS of previous version. It is different internal structure and that requires you to change your import statements so you can see that I have previously import of map operator using this way and now using RXJS 6 version I should just type map operator and provide also all other operators what I need and just type slash operators and that's it. So also RXJS introduced the pipe operators and the pipe as a method to change your operators operators and the whole way of changing or radius will not work and additionally some operators will rename takes in your data as input in transforms into the jar that put so and if there are yes I'm wrapping up okay so let me show only my custom order pipe which I have created for my project it is ordered by pipe and I have used this pipe to order my beers by alcohol content so I can sort by alphabetical or alcohol content it is my order by pipe okay so now let me switch back to my presentation and with a release of Angular we have some latest we have some way to get the latest of this version by the some ways so I'm going to talk about in a bit about upgrading your Angular application to the 6th version so let's get right to it if you are looking to use Angular 6 application version there are a few steps you will need to complete to get over there where we can take advantage of the new ng update tool to update Angular application to the latest version you should switch to your client's application directory and run ng update all command this will update the package JSON and then you need to run npm install if you get a message about some Angular CLI should update it you can update it by running ng update you may now see some vulnerabilities in your npm package and to fix them you should run command npm audit fix you may have to run this several times as some of the fixes introduce new vulnerabilities when you will run your application and everything during update was ok then application will be running as before so if you want to update your Angular application from any version starts from 2 plus you should go to update Angular Angular IO website and here you can choose your version of Angular and here is the final version what you want to upgrade so it's making it easier for developers to stay up to date with the latest releases extremely important to us so let us know what you think and what you can update your application so thank you for your attention I hope that you have found some useful information from this session and I will be glad to hear your questions in the Twitter or right now so thank you there are some benefits on this way to use your client application which is separately contains from your backend it is a flexible way to keep your change and to keep your application is in run in a more flexible way because for example you can have a team where you can have some backend developers and content developers and it is really a flexible way to work on your application within your team and I had such experience where we can work in the same application on frontend part and backend part and it's really good and easy to work on both sides of frontend and backend thank you, bye bye