Comments

6 Essential VSCode Extensions for Angular Developers

In this post, I’m going to list my top favorite Visual Studio Code (VSCode) extensions for building Angular applications. If you know a great extension that is missing here, please let us know using the comment box below the post.

Installing an Extension

If you know how to install an extension in VSCode, feel free to skip this section. Otherwise, launch VSCode, and open the Extensions tab from the left side bar. Here, you can see the list of installed extensions. You can also search for other extensions. Once you find an extension, simply click the Install button. Then, reload VSCode and you’re good to go.

TypeScript Hero

This is by far my absolute favorite extension! You no longer have to manually import types in TypeScript. TypeScript Hero automatically imports the types for you as you write code. When pasting some code from somewhere else, you can also add all the missing import statements in one go!

Another useful feature of this extension is that it allows you to sort and remove the unused import statements. You also get code completion and several other useful features. Highly recommended!

Angular Language Service

This extension provides a rich editing experience for Angular templates. Imagine you have a field in your component as follows:

course = { 
   title: 'The Complete Angular Course', 
   author: { 
      name: 'Mosh Hamedani'
   }
} 

With this extension, you’ll get auto-completion in your HTML templates:

Autocompletion

Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors.

Bracket

Move TS

As your application grows, you may want to break it down into smaller and more maintainable modules. You’ll have to move files and folders around. But what happens to all your import statements? They break! So, that’s what this extension is for. With Move TS extension, you can simply move files/folders around and this extension will automatically update your import statements.

Material Icon Theme

Do you like to have pretty icons in the project explorer? Install this extension!

Angular TypeScript Snippets

Another useful extension developed by John Papa that boosts your productivity when building Angular applications. It gives you a bunch of code snippets that allow you to quickly generate code. There are snippets for creating a component, service, directive, etc. You may argue that now we can easily create these artifacts using Angular CLI and that is absolutely right. However, this extension gives you some useful HTML snippets as well:

Angular TypeScript Snippets

You can find the complete list of snippets provided by this extension here.

What is your favorite extension that you frequently use? Use the comment box below and let us know.

If you enjoyed this article, please share it with others.

Hi, my name is Mosh Hamedani and I am the author of several best-selling courses on Udemy and Pluralsight with more than 130,000 students in 196 countries. You can see the list of all my web and mobile development courses on this website.
Tags: ,
Comments

Common Angular Errors

In this post, I’m going to list the most common errors you may encounter while getting started with Angular. For each error, I’m going to explain what it means and how to solve it.

This post is a work in progress and I’m planning to add more errors. If there is an error you encounter often, please let us know by dropping a comment.

Error 1: ‘ng’ is not recognized

When creating a new project with Angular CLI, you may receive the following error:

'ng' is not recognized as an internal or external command.

This error is simply telling you that Angular CLI is either not installed or not added to the PATH. To solve this error, first, make sure you’re running Node 6.9 or higher. A lot of errors can be resolved by simply upgrading your Node to the latest stable version.

Open up the Terminal on macOS/Linux or Command Prompt on Windows and run the following command to find out the version of Node you are running:

node --version

If you’re running an earlier version of Node, head over to nodejs.org and download the installer for the latest stable version.

Once you have installed Node 6.9+, you need to install Angular CLI globally:

npm install -g @angular/cli

Note the -g flag here. This tells NPM that you want to install this package globally so you can run it from any folders on your machine.

Error 2: node_modules appears empty

When you run ng serve, you may receive the following error:

node_modules appears empty, you may need to run `npm install`.

Our Angular applications use a bunch of 3rd-party libraries. These libraries are stored in the node_modules folder inside your project folder. When you create a new project using Angular CLI, these third-party libraries should be installed automatically. However, if you’re using a corrupted or a buggy version of Angular CLI, these libraries are not installed. So, you need to manually install them.

To solve this error, run npm install from the project folder. This command will look at package.json in your project folder. This file includes the list of dependencies of your project. NPM will download and store these dependencies in the node_modules folder.

 

If you found this post helpful, please share it with others.

If there is an error you’d like me to add to this post, please let me know using the comment box below.

Hi, my name is Mosh Hamedani and I am the author of several best-selling courses on Udemy and Pluralsight with more than 130,000 students in 196 countries. You can see the list of all my web and mobile development courses on this website.
Tags:
Comments

Layered Architecture in ASP.NET Core Applications

One of the viewers of my YouTube channel asked me an interesting question. He mentioned in a typical layered architecture, he sees ASP.NET MVC building blocks (Controller, View, and Model) as part of the presentation layer. These days, however, a lot of modern applications are built with Angular/React on the client and ASP.NET Core (Web API) on the server. So, what is the presentation layer in this kind of architecture? Let’s see!

With this stack, we have the following layers:

  • Presentation
  • Service
  • Business Logic/Application Core
  • Data Access/Persistence

Presentation Layer

Your Angular components, their templates, and the models you define in your Angular app are all presentation layer artifacts.

Service Layer

The confusing thing about this layer is that the term “service” is overloaded and it means different things to different people. In the context of a layered architecture, it wraps an application and exposes the application functionality in terms of a simple API that the user interface can talk to. This is the classic definition. Think of it as the glue between the presentation and business logic layers.

Now, in our modern stack, our logical service layer is physically composed of two parts: one part is on the client (Angular HTTP services) and the other part is on the server (ASP.NET Core controllers). These Angular services and ASP.NET Core controllers are very cohesive. The methods on these services (eg CourseService.getCourses()) talk directly to the endpoints exposed by your ASP.NET Core controllers.

Business Logic Layer

In your ASP.NET Core controllers, you often use repository interfaces (ICourseRepository), domain classes (Course) and services (PhotoService). All these are part of the business logic layer. They represent the core of an application irrespective of any presentation or persistence frameworks.

Note that here I’m talking about repository interfaces and not their implementations. These implementations are part of the data access/persistence layer.

Also, note that the services we have here are responsible for orchestration. For example, when adding a photo to a course, first, you need to store that photo in the file system (or some other kind of storage), and then you need to add it to the database (using a repository interface). Here is an example:

// Store the file first 
var uploadsPath = Path.Combine(host.WebRoot, "uploads");
if (!Directory.Exists(uploadsPath))
    Directory.CreateDirectory(uploadsPath);

var fileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
var filePath = Path.Combine(uploadsPath, fileName);

using (var stream = new FileStream(filePath, FileMode.Create))
{  
    file.Copyto(stream);
}

// Add a record to the database
var photo = new Photo { FileName = fileName };
repository.Add(photo);
unitOfWork.Complete(); 

You wouldn’t write all this logic inside an ASP.NET Core Controller. Imagine, tomorrow you decide to use a different framework. You want to re-use as much code as possible. By encapsulating this code in a service (PhotoService.AddPhoto()), you can switch from ASP.NET Core to a different framework with less effort.

But wait for a second…

Now, that strongly-opinionated developer comes and says: “But who does replace ASP.NET Core with something else? How often does that happen?” Let’s say never! By moving all this logic from a controller into a service, you put the responsibility where it really belongs. The result is cleaner, slimmer, easier to read and easier to test controllers.

Imagine a restaurant where the chef does it all. He’s at the door, welcoming guests, giving them a table, taking their order, then going in the kitchen, chopping the vegetables, cooking, washing the dishes, then coming out and giving the bill to the guests. Would you go to that restaurant? I hope not!

In a good and organized restaurant, there are a few people each focusing on only one job. The waiters/waitresses are purely responsible for welcoming the guests and giving them the bill. The chef is purely responsible for cooking. He or she doesn’t wash the dishes! By the same token, you should have classes that do only one thing and do it well. This is what we call separation of concerns. You should put the responsibility where it really belongs, even if you’re never going to change the presentation or persistence framework of your application.

So, once again, all your domain classes (Course), repository interfaces (ICourseRepository) and application services (PhotoService) are part of the business logic layer. They represent the core of your application completely decoupled from any presentation and persistence frameworks. This is what Uncle Bob defines as Clean Architecture.

Data Access Layer

This layer is all about persistence. Here we have implementations tightly coupled to Entity Framework (or other frameworks) for persisting and retrieving data. If you’re using Entity Framework, your DbContext belongs in this layer. So do UnitofWork and Repository implementations.

Splitting a Project

Now, a common (and bad) practice I’ve seen some developers do, is that they blindly split an ASP.NET project into multiple class libraries, one for each layer. And with this, they assume just because they have a class library called MyProject.BLL or MyProject.DAL, they have properly layered their application. But that’s not necessarily right.

What matters is the direction of dependency and coupling between classes, not folders or projects. You can easily organize your classes into folders and projects but these classes can be poorly coupled to each other, which results in spaghetti architecture. Read my blog post on the topic:

Should you split your ASP.NET MVC/Core projects?

 

If you learned something from this post, please share it and drop your comments/questions below.

Hi, my name is Mosh Hamedani and I am the author of several best-selling courses on Udemy and Pluralsight with more than 130,000 students in 196 countries. You can see the list of all my web and mobile development courses on this website.
Tags: , , , , ,
Comments

Angular 2 Tutorial: Angular 2.0 in 20 minutes

This article is outdated. Check out my brand new Angular 4 tutorial on YouTube.

Angular 2 has been getting a lot of momentum lately. The number of tweets and posts have been increasing as Angular team have been preparing the release candidate. So, I’m planing to write a series of hands-on blog posts to help you get started with Angular 2.0. If you have any questions as you read this article, please drop a comment below. I’ll answer every question and update the post if required.

Whether you’re familiar with Angular 1 or not, it doesn’t matter. You just need to have basic familiarity with HTML, CSS and Javascript.

Let’s start by a few beginners’ questions.

Beginners’ questions

If you’re already familiar with Angular 1, feel free to skip this section.

What is Angular? 

Angular is one of the leading frameworks for building well-structured, testable and maintainable front-end applications. It’s often (but not necessarily) used in building single page applications (SPAs).

Why do I have to learn Angular?

Angular is not the only framework for building modular, testable and maintainable front-end applications. There are many other frameworks and libraries out there, including but not limited to React, Ember, Backbone, etc. Do you have to learn them all? If you have time and passion, why not! But if you have limited time, you may better invest your time in learning Angular 2.0 and React as these are the leading frameworks in this space.

Angular is developed by Google and has a huge community support. Google trends shows that the demand for Angular developers is increasing constantly.

angular developer

So, whether you’re an aspiring or an established front-end or full-stack developer, knowing how to build applications with Angular can definitely increase your options when it comes to finding that ideal job.

Is Angular better than “…”?

The problem with this kind of question is that it’s hard to define “better”. Every framework has certain strengths and weaknesses. Religious debates about which framework is “better” than the others are really useless and don’t give you any values.

So, instead of wasting your time researching the best framework out there, spend some time and learn the top 2 – 3 leading frameworks. Then, you can pick the one that works best for you.

Getting the tools

If you don’t have Node on your machine, first, head over to http://nodejs.org and download and install the latest version of Node.

Once you install Node, open up Command Prompt on Windows or Terminal on Mac, and run:


npm install -g typescript

If you are a Mac user, you need to put sudo before npm to run this command with administrative privileges.

This will install TypeScript globally on your machine. TypeScript is a superset of Javascript and is the language we will be using in this tutorial. Why TypeScript? Because it brings many useful features to Javascript that are missing in the current version of Javascript, including classes, interfaces, access modifiers (e.g. public, private), IntelliSense and more importantly compile-time checking. So, we can catch many programming errors during compile time. Angular 2.0 itself has been written with TypeScript.

Just note that browsers don’t understand TypeScript. We use TypeScript compiler to compile or more accurately transpile TypeScript into Javascript. More on this later.

Next, run:


npm install -g typings

Typings is another Node module that we use to reference existing Javascript libraries in TypeScript.

Finally, you need an editor. You can use any editors that support TypeScript, including VSCode, Sublime, Atom, IntelliJ IDEA, Visual Studio and etc.

Your first Angular 2 app

Download the seed project and extract it somewhere on your machine. Inside this project, you’ll find a few  configuration files, an index.html and an app folder, which includes the source files for our application.

Inside the app folder, we have a couple of TypeScript files: boot.ts, which is the main or starting module of our application, and app.component.ts, which is the root component of our application. Every Angular 2 app has at least one component, which we call root component.

tsconfig.json is the configuration file TypeScript compiler uses to determine how to transpile our TypeScript code into Javascript.

typings.json is another configuration file for Typescript. When using external Javascript libraries in TypeScript, we need to import a typescript definition file. A type definition file gives us static type checking and IntelliSense for that Javascript library.

Next to that, we have package.json, which is a standard Node package configuration file, where we define the dependencies of our app.


{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",    
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install" 
  },  
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5"
  }
}

Now, we need to install these dependencies. So, open up Command Prompt on Windows or Terminal on Mac, and go to the folder where you’ve extracted the seed project. Then, run:


npm install 

This is going to take several minutes for the first time, so be patient. If you get several errors, that’s most likely due to administrative privileges. So, on Mac, be sure to add sudo before npm. 

Once these dependencies are installed, you’ll see a new folder called node_modules. All our application dependencies will be stored there.

Now, have one more look at package.json. Under the scripts section, we can have a few custom node commands:


"scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",    
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install" 
  }

The one we’ll be using a lot is start.


    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",  

 

It’s a shortcut for concurrently running two commands:

  • npm run tsc:w: which runs TypeScript compiler in the watch mode. When we save a TypeScript file, TypeScript compiler will automatically detect the changes and transpile our TypeScript code into Javascript. We never have to view or modify these Javascript files. So we code purely in TypeScript.
  • npm run lite: this will run the lite web server for our Angular app.

Now, back in the terminal and run the following command from the project folder:


npm start

When the lite web server starts, it’ll launch your default browser navigating to http://localhost:3000. This is our first Angular 2.0 app.

angular2-tutorial

What is a component?

A component is one of the most fundamental building blocks in Angular 2 apps. Every app consists of at least one component, which we call the root component. A component can include other components, which we call child components. A real-world app is essentially a tree of components.

But what are these components really? A component is a TypeScript class that encapsulates the template, data and behaviour for a view. So, it’s more accurate to call it a view component. That’s what they’re called in React.

As an example, think of Twitter. If you want to build a similar app in Angular 2, you may model your application components like this:

  • app
    • navbar
    • sidebar
    • content
      • tweets
        • tweet

Root component

Open up app/app.component.ts. This is the root component of our app:


import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>' 
}) 
export class AppComponent { }

As you see, a component is a TypeScript class decorated with @Component decorator. We use decorators (also called annotations) to add metadata to a class. This @Component decorator tells Angular that AppComponent is a component. Note that these decorators are actually functions. So, here, @Component is called and given an object which includes metadata about AppComponent:


@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>' 
})

This object has two properties: template, which specifies the markup that should be rendered when this component is used, and selector, which tells Angular where in the DOM it should render this component. This is a CSS selector. So, my-app here represents an element with the name my-app.

When Angular sees an element like that in the DOM, it’ll create an instance of AppComponent and render it (according to its template) inside that element. Open up index.html and scroll down a bit. Note the my-app element.

Rendering data

Back in app.component.ts, let’s define a field in this class:


export class AppComponent { 
	title = "Hello World";
}

So, as I explained earlier, a component encapsulates the template, data and the behaviour for a view. We use fields to store data. Now, let’s render the value of this field in the template. Modify the template as follows:


    template: 'Hello {{title}}' 

We use double curly braces syntax, called interpolation, to render data.

Now, save the file. Since TypeScript compiler is running in the background, it will re-compile our AppComponent. Our lite web server uses a module called BrowserSync, which automatically refreshes the browser when it detects a change in the source files. So, if you switch back to your browser, you should see the new content.

Handling events

Let’s extend our component and add a button. First, replace the single quote character in the template with backtick. That’s the character to the left of number 1 on your keyboard. By using backtick, we can break up our template into multiple lines and make it more readable.


@Component({
    selector: 'my-app',
    template: `
<h1>Hello {{title}}</h1>
` 
})

Now, add a button and a span to the template:


<h1>Hello {{title}}</h1>
<span><span>
<button>Click me</button>

We want to display a counter on this view. Every time we click the button, the counter will be increased by one. So, first declare a new field in the component:


export class AppComponent { 
        count = 0;
        title = "Hello World";
}

Then, modify the span and use interpolation to render the value of count:


<span>Clicks: {{count}}<span>

Finally, to handle the click event, we need to bind it to a method in our component. When we click the button, the corresponding method in the component will be called.

Change the button declaration as follows:


<button (click)="increaseCount()">Click me</button>

Note the syntax. This is called event binding. So, we put the event name in parentheses and then set to a method in the component.

Now, let’s create this method:


export class AppComponent { 
	count = 0;
	title = "Hello World";

	increaseCount(){
		this.count++;
	}
}

Save the file and switch back to your browser. Click the button a few times and note the counter.

So, in this article, you learned the basics of components in Angular 2.0 apps. A component encapsulates the template, data and behaviour of a view. We used interpolation to render data and event binding to handle events raised from DOM elements.

In the next part, we’ll look at services and dependency injection. If you want to be notified when I publish the next part, subscribe to my blog below.

If you enjoyed this tutorial, please drop a comment below and share it with others.

You can also check out my comprehensive Angular 2 course here.

logo draft 2_3_2048

Hi, my name is Mosh Hamedani and I am the author of several best-selling courses on Udemy and Pluralsight with more than 130,000 students in 196 countries. You can see the list of all my web and mobile development courses on this website.
Tags:
%d bloggers like this: