Angular Walkthrough Part 1: Introducing Angular
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!
What is Angular?
- Strong typing
- 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?
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?
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:
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.
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?
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…
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!