This is the first blog in a series where we will dive in the world of Angular and ASP.NET Core. In this first post we will setup a new Angular project and have a quick look over the generated files.
To keep a separation of concerns between backend of frontend we’ll create two separate projects and use two different editors. For all frontend coding of Typescript, CSS and HTML we will use the editor VS Code. Not to be confused with Visual Studio, this lightweight editor developed by Microsoft gained quite some popularity over the last few years.
To get started download the Stable Build installer from the VS Code website. At the time of writing version 1.30 was released but with the rapid development of VS Code you will probably get a newer version.
When VS Code is installed we will use the default settings and extensions to keep it light. But of course feel free to install a theme of your choice, my personal pick is Material Theme, which I think looks pretty slick.
To get started with a new Angular project we will be using ng-cli a handy command line tool which lets you scaffold new projects or generate new components to your project, because it makes our lives easier we’ll be using ng-cli throughout this series.
To make it work we need to install Node and NPM first. Install the latest LTS version if you don’t have it yet on your system.
After Node is installed open a command line window and execute:
npm install -g @angular/cli
Verify if everything is installed correctly
The output should look something like:
_ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 7.1.4 Node: 8.11.3 OS: win32 x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.11.4 @angular-devkit/core 7.1.4 @angular-devkit/schematics 7.1.4 @schematics/angular 7.1.4 @schematics/update 0.11.4 rxjs 6.3.3 typescript 3.1.6
If you get an error installing the CLI, this is an issue with your local npm setup on your machine, not a problem in Angular CLI. Please have a look at the fixing npm permissions page, common errors page, npm issue tracker, or open a new issue if the problem you are experiencing isn’t known.
To accommodate for the future backend project we’ll create a new central directory for our separate projects. For example I created
C:\Projects\aspnet-angular-app\. Go to this newly created directory and execute the following ng-cli command to create a new Angular project:
C:\Projects\aspnet-angular-app>ng new client ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS
When ng-cli asks to use routing hit
Y and when it asks which stylesheet format to use hit
After a few minutes it will have installed all dependencies and create a minimal project layout.
In VS Code hit
File -> Open Folder and select the newly created
client folder. Before doing anything else open the terminal by hitting
Execute the following command in the VS Code terminal:
The project will now be built and an internal webserver is started. Browse to
http://localhost:4200 to see your newly created app in action.
At first Angular will feel overwhelming, lots of files, terminologies, magic, but luckily ng-cli takes care of most of this. Lets go through some of the important files of our new project.
This folder contains your end to end tests. Protractor is used to write your tests and they are executed by running
ng e2e in the terminal.
All configuration that is used to keep ng-cli working properly is done in here, commonly called an Angular Workspace. The Work Space file has many configuration options. Nitay Neeman has written a nice article going over the most common options.
TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. This file contains the default best practices rules determined by the Angular team. You can change those rules as you wish but in this series we will use the default.
Here we define the routes for our app.
In Angular a components controls a patch of screen called a view. This can be a full page, a partial page, a large component on a page or a small component. If it has HTML and/or styling, it’s a component.
The app.component is the default generated demo component from ng-cli. The
.html file contains all your HTML code,
.scss all your SASS styles,
.spec.ts your unit test and
.ts your code.
NgModules configure the injector and the compiler and help organize related things together. Here is where you define what is part of your app and what isn’t. Angular is very modular and you can define multiple NgModules in a single workspace.
<app-root></app-root> is a reference to our Angular component
Angular comes pre-installed and pre-configured with the Karma unit testing framework. To run all unit tests you simple execute
ng test which will run all tests.
This file is your Main function. Comparable to C#, Java, C++ or really any other programming language, it’s the very first entry into Angular.
Angular has a system of component styles where each component owns its own isolated stylesheet. But for global styles this is where you will want to add them.
There are many more system files created but most of them will not be touched and used with its default setting.
In this article we created a new Angular app ready to be tinkered with. In the next step we will look at setting up the ASP.NET Core backend.