Hello again everyone!  I hope you are all doing well.  It has been a while since I made a tutorial series (the last one being about Entity Framework 6), so I thought I would make one more about another development tool I have been using lately, which is Angular.  For the next few months, I will be posting video/blog tutorials on how we can use it to build Single Page Applications.  Before we can get started with coding, we need to understand what Angular is and how it works at a high-level, which will be the scope of this specific post.  So, let’s get started!

Explaining Angular

What is Angular?

Angular is a JavaScript framework developed by Google to help developers create Singe Page Applications, otherwise known as SPAs.  While it is a JavaScript framework (and can utilize JavaScript code), Angular applications are typically written in TypeScript.  This is a superset of the JavaScript language that was developed by Microsoft, and it gives us access to some features that are not available to us in vanilla JavaScript.  Such features include:

• Strong typing
• Interfaces
• Compile-time checking 

At the time of this writing, Angular is currently on version 7, and 8 will be released in the near future.

How Does Angular Work?

When our application is successfully compiled, it generates a file containing HTML and JavaScript.  When a user makes a request to our server, this file is sent to their browser.  Since the entire application lives on this file, users do not need to make requests to the server to generate new HTML.  This is because the JavaScript in our file renders only the HTML the user needs to see (based on their interactions with the application).  In other words, the user’s device is doing the legwork of running the app, which helps increase performance as most modern devices are more than capable of running applications directly in the browser.  The application does still communicate with the server, but only to send or receive data.

 What is Needed for Angular to Work on a Device?

To start, your users will need access to a modern web browser in order to run your Angular application, such as Google Chrome, Mozilla Firefox, or Microsoft Edge.  In most cases, this should not be a problem as these browsers are free to download and/or come packaged with their operating system.  Additionally, your users’ devices should have enough processor power and RAM to run these applications, as their browsers will be doing most of the leg work.  Again, this should not be a problem in most cases.  One very important item to note is the Internet Explorer 11 is disabled by default in every new Angular application.  This is because IE 11 is not considered a modern web browser and may not be compatible with all the libraries that your applications needs to run correctly.  You have the option to enable this in your application, but I advise against it as you would be setting the expectation that the application will be supported in IE 11 for its entire lifecycle.

Is Angular the Same as AngularJS

You may have noticed that Angular is segmented off into different versions, starting with AngularJS and then moving to Angular versions 2, 4, 5, 6, and 7.  Are all these versions related in some way, and do the function the same?  Why do they have different names?

When Google first set out to create a JavaScript framework for SPA development, the originally named it Angular.  This only allowed developers to write in JavaScript and did not reflect the direction Google wanted to go when creating future frameworks.  When Angular 2 was released (which added the ability to develop in TypeScript), Google retroactively named Angular to AngularJS. 

There are some nuances between AngularJS and Angular.  For example, AngularJS makes use of controller to control each view in the application, while Angular utilizes components.  Additionally, AngularJS sees very limited support, while Angular gets a lot more attention and regularly has new versions pushed out for it.  

What Does Angular Utilize to Run Our SPAs?

Now that we know what Angular is at a very high level, let’s start to understand the building blocks behind each application.  These include:

NgModules

An NgModule is a set of code that is devoted to executing a specific workflow.  For example, if you are writing an online store, you may have a section where users can login, edit their profile, and change their password.  You might also have a section that handles all functionality related to a shopping cart, such as the ability to add/remove items, view the total for items in the card, and input shipping information.  Since these sections (user profile and shopping cart) are their own specific workflow, they would get their own NgModule.  Developing your application in such a manner helps separate concerns and keeps your modules organized and easy to find.

Components

A component is a set of code that is used to control a specific view in our application.  For this tutorial, the components I will be developing will have three items: A TypeScript file, an HTML file, and a CSS file.  The TypeScript file helps you control view specific logic.  The HTML file will let you design the structure of your UI while the CSS file will let you style it.  It should be noted that you can utilize template syntax in your HTML file to include some view specific logic, but that is a talk for another blog post.  Components can even have one or more child components.  These child components can have data passed to them, or even pass data up to their parent component. When you write logic for your component, it should only be specific to the view that it controls.  So how do we execute non-view related logic in our application?

Services

 A service is a class that allows us to perform non-view related logic on our application and can be utilized by one or more components.  Non-view related logic would include anything from validating user input to retrieving data from our web API.  Long story short, if the logic is not directly related to our view, it goes in a service.  If we wish to use our services, we need to “inject” them into our components.  This is a process called…

Dependency Injection

As stated before, Dependency Injection is the act of injecting a service into our component.  The name exists because once we inject the service to the component, the component becomes dependent on the service to perform all the logic we need.  This is accomplished by creating an object of the service in our component’s constructor.  Once the object is created, we have access to all the services functionality.  This is a very brief explanation of what Dependency Injection is, and we will come back to this topic later in our tutorial.

Perfect, we now know how Angular works and what building blocks it uses to create SPAs.  Please join me next time as I walk through how we can get an environment setup for Angular development and create/run our first application.  Until then, take care and have an excellent day!