Angular is one of the hottest open-source front end frameworks currently in the market. It is used for building client-side web applications and is specifically designed for SPA(Single Page Applications). Released by Google in 2016, the TypeScript based framework was rewritten based on AngularJS. As soon as you start learning Angular you will realize that it is not as simple as learning ReactJS or VueJS, some of Angular’s main competitors. In this article, I’ll explain how I learnt Angular 8 basics in 24 hours in 3 simple steps.
Before we get started, it is crucial to have some understanding of how Angular evolved. It may sound confusing but, before Angular became Angular, Angular was AngularJS. For now, keep in mind that Angular is completely different from AngularJS. If you are not interested in understanding the difference, I suggest skipping the following section.
Differences between AngularJS and Angular
AngularJS was released 6 years before Angular, in 2010 by Google. At that time, it became immediately popular. However, the launch of other frameworks exposed its drawbacks and turned the spotlight away. ReactJS and VueJS arrived on the market and made clear they wanted to compete for the best performance framework. This is when Google’s team realized and decided it was time to rewrite Angular completely. The release of Angular 2 revealed some drastic changes. Language, Architecture and Data binding were the key ones.
Architecture: MVC vs. Component-based architecture
AngularJS’s architecture supports the MVC (Model View Controller) architecture. Logic, output and view happen in separate files. On the other hand, Angular relies on components, directives with predefined templates. Such a modern structure allows us to scale and maintain large applications.
Data Binding: Two-way data binding algorithm
AngularJS two-way data binding is a unique way that immediately propagates to the view of any data changes that can affect the model, and changes made by users in views immediately reflect the model. A better Angular algorithm makes it five times faster than AngularJS for data binding and component-based architecture.
HOW I LEARNT ANGULAR 8 BASICS IN 24 HOURS IN 3 STEPS
Before we move forward so I can explain how I learnt Angular 8 Basics in 24 hours in 3 simple steps, it is important to stress that learning Angular takes more than that (much more!). Angular is known for its complexity and long learning curve. However, Angular developers support that this process is worth it since it is a very reliable framework. This post’s purpose is to outline some ideas on how you can break down Angular to have a quick understanding of it in case you have to jump in on a project without experience. Now, we are ready to move forward.
#1 GET FAMILIAR WITH ANGULAR’S STRUCTURE
When you need to learn a new framework in a short period, the most important is to get familiar with the project’s structure. It may sound useless but you’ll thank yourself for doing that later on. It will save you some time otherwise spent researching irrelevant questions on the internet.
Angular uses some boilerplate that can be easily requested through its CLI. With the help of Angular CLI tools, you can quickly build the projects, set up, add and test components, as well as deploy them. Interestingly, AngularJS does not have its CLI.
Through the CLI, navigate to the directory where you plan to start the Angular project and run the command ng new [project-name]. While it is running, you will be given the option to add routing and selecting the stylesheet format (CSS, SASS, LESS). These options will depend on the type of project you are planning to start. If you do not intend to have routing you can skip the routing option. In terms of the stylesheet, the most common is CSS. After that, the CLI will finish running the commands and will automatically generate a complete project.
Once that’s done, you can navigate to the projects directory and run ng serve, which is the equivalent of npm start to React. The CLI will compile the project and starts a server at http://localhost:4200
At this point, you can open your project on your Code Editor. There you will notice that Angular’s CLI generates a project composed of folders and files. Each folder and file has a different purpose. To make things easier, let’s break them down.
PS: 🗂 refers to a folder and 📝 to a file.
End to end testing folder located at the top level of the project’s structure. It contains source files to perform end-to-end tests to the root-level application (AppComponent).
When you run ng e2e command on the CLI, the app will be built in watch mode and the Protractor test runner will be launched. Once that is done, you will see the output in the terminal and the chrome browser will open up, test all the scenarios declared in the e2e file and quickly close.
It contains the component files in which your application logic and data are defined.
A stylesheet automatically generated to declare styles for the root AppComponent. The extension of the file reflects the style preprocessor you have configured for the project(in this case CSS).
A template generated to define the HTML root of the AppComponent.
The file responsible for performing unit tests for the root AppComponent.
When you run the ng test command on the CLI, the app will be built in watch mode and the Karma test runner will be launched. The test’s output is revealed in the terminal and a Jasmine HTML Reporter will be shown on a chrome browser which will open up.
Defines the logic for the app’s root component (AppComponent). If you add more components, the app.component.html becomes the root of the views hierarchy.
Defines the root module (AppModule) that tells Angular how to assemble the application. It declares AppComponent by default but can declare more components as you add them to the project.
A folder automatically generated to store images and other assets files to be copied as you wish to add to your project.
Contains build configuration (JSON configuration information) options for particular target environments. It is responsible for telling the build system which files to change when you run ng build or ng serve.
📝Index.html — The main HTML page where the views are rendered and are served when users visit your page.
📝main.ts — The main.ts is the main entry point of an Angular application. It uses the JIT compiler to compile the application and bootstraps the application’s root module (AppModule) to run in the browser.
📝polyfills.css — Provides polyfill scripts for browser support.
📝styles.css — All the styles declared here will be globally available. The extension of the file reflects the style preprocessor you have configured for the project(in this case CSS).
#2: UNDERSTAND ANGULAR’S BUILDING BLOCKS
Every framework varies when it comes to building blocks. It is important to explore some of it with anticipation so you can create a correlation to other frameworks you have used or been exposed before, what they have in common and what their differences are. Angular’s key building blocks are Modules, Components, and Templates. Let’s start with Modules.
Essentially, a module is described as a block of code with related functions. With that in mind, Angular apps are known for being modular. You can easily identify it by the class NgModules (or the decorator @NgModule). It helps to organize complex relationships between views (classes that can contain view: components, directives and pipes) to data providers. It allows defining all relationships in a single file. Every application must have at least one module or, depending on the size of the application, multiple ones.
-- declarations: The classes that are related to views and will be privately available to this module. Think about this as public and private functions in OOP, components are private by default but can become public if you add to exports. If you want them to be publicly available, you’ll have to add to the exports section.
-- exports: The classes that should be accessible to the components from other modules.
-- imports: Other modules have access to exported modules by importing the module to their metadata.
Declaration, exports and imports define the relationship between components and how they are shared between NgModules.
-- providers: Where you register data providers such as services and guards (i.e. ContactService, CanActive, AuthService) that can be injected in the components within this module. The injectable class will be available to any component in this module as well as any module that imports it.
-- bootstrap: Defines a component initially responsible by loading the application (AppComponent by default).
As the app grows, the module will become bigger and harder to maintain at some point. Our job is to refactor components and services to their modules, except AppComponent which we bootstrap from the root module. We bootstrap the AppComponent Module in a main.ts file. The main.ts file automatically specifies the bootstrap module. Finally, the bootstrap component is inside the bootstrap module.
In case you decide to add routers to your project, the router will have its file with import and export metadata only. It should always export the RouterModule. Depending on your app’s structure, it will have CoreModule, FeatureModule and ShareModule but those are topics you can cover in-depth as your project grows.
A component can control one or more sections of a view. The logic of the application must be written inside of the component. The results displayed in the view are generated through a class that interacts with an API of properties and methods.
Adding New Components:
If you wish to add new components to your project, other than the AppComponent, you will have to follow some steps to make sure your project won’t break. You can either add a new component manually or through the CLI. I suggest using the CLI so you avoid unnecessary mistakes that can delay your learning process or the execution of your project.
From Angular’s CLI, access the project’s main directory or the path you wish to create this component and run ng generate component [component-name]. It will automatically create a folder which contains the following files:
Additionally, you will notice that it generates a ngOnInit. The ngOnInit method is called always when a component is instantiated. Moreover, you should check some extra details before start working on the new component:
- Import components and dependencies to the component
- Attach the metadata of the component using @Component decorator.
- Specify the logic of the component by specifying the constructor and inside it, the variables and methods that need to be initialized when the class is created.
The view of a component will always be associated with an HTML file, also known as a template. The HTML tags will tell Angular how to render the component. For those familiar with embedded templating, Angular’s HTML file looks like a regular HTML but can add embedded templating to perform functions to display data, for example for loops followed by curly braces to display the data as the loop goes through.
#3 PUT YOUR HANDS ON! EXPERIMENT, TEST, GET COMFORTABLE
Now that you have a good grasp on Angular 8 basics it is time to feel how it works and get comfortable with it. As a suggestion, try to follow a simple tutorial or check other open-source projects. After following through these three quick steps, you may not realize but most of what your brain is going to do is to create a comparison to other languages or frameworks that you are familiar with already. This process of making comparisons and assumptions helps you to identify clearly what are some of the advantages and disadvantages
The challenge of learning a new framework is a painful process in the beginning but worth the effort. Every developer knows that trying something new every day is part of the path. It is not because you do not know a technology that you cannot learn and become proficient in it. Simply go for it, start from the basics, make correlations and, eventually, everything will fall in place. I hope you find this post helpful.