We talked in the last article about Angular and its advantages, but we didn’t define it well. As many people struggle with starting learning Angular, we prefer to dedicate this blog post to those who are curious about learning Angular and to show them how to start.
So, We will show the best way to learn Angular and go a little in-depth with its main concepts.
So what is the best way to learn Angular ? and what are its basic concepts?
How to start learning Angular
Choosing the best resource to follow
This point isn’t related only to Angular. In a world full of hundreds of millions of tech resources, finding the best trustworthy guide to learn and practice a new Framework such as angular is the key element in the learning phase. We also emphasize the importance of following a single manual. We are building a full Angular tutorial that will cover every single point of the Framework, So please be there and help us with following our content. In the meanwhile, we can confirm that the official documentation of Angular is more than enough for a beginner to acquire the basics of Angular.
We can also use hongkiat classification for the best Angular resources.
Never start learning Angular Before …
Yes, We do not recommend learning Angular before having some minimal knowledge in HTML, CSS, and JavaScript. Angular is a powerful Frontend Framework that uses some programming skills and languages. So, it is so important to acquire some basic understanding of those technologies. We truthfully appreciate the simple tutorials of w3school and we suggest you take a look and give it a try if you are a beginner with those primordial skills.
Never distract yourself with multiple frameworks
If you have already chosen to learn Angular, You need to stick to your choice. Through our experience, We think that mastering only one frontend framework and being able to solve its complex problems in a shorter time is better than having superficial knowledge of multiple frameworks. We are mastery fans, and Mastery requires time, effort, and focus.
Practice, Practice, Practice …
There’s no doubt! Practice is the key to learning anything. We provide above the official Angular documentation and why we advise people to follow it: because it contains many live examples made with Stackblitz.
Either You follow a written guide or a viral one, Try to repeat the steps one by one, and never ignore even a simple tip or advice. Practice is the magical key to mastering Angular. Do not limit yourself to just reading or watching tutorials. Try it by yourself and don’t be afraid of having errors and mistakes.
Learn the basic concepts first
We noticed that many people nowadays try to follow the trendy tech frameworks. In fact, they do not understand the basic concepts, nor the architecture of the framework, and they try to immediately start developing and using it even without a deep knowledge of what happened behind the scene. Learning the concepts and acquiring them deeply is actually a keystone in being a good Angular developer. We will cover, next, in this article the main basics of Angular.
Let’s Discover the basic concepts of Angular
We cannot discover and learn Angular’s basic concepts without defining the framework itself. We will use Wikipedia’s definition.
Angular (commonly referred to as “Angular 2+” or “Angular CLI“) is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.
Wikipedia
Angular Architecture
Angular, in contrast with AngularJs, uses MVVM Architecture. MVVM stands for Model–View–ViewModel. This pattern consists of 3 main layers :
- Model : It represents the data layer or the real state content.
- View : It represents simply what the users see in the screen and interact with.
- ViewModel : It is the presentation logic of the Architecture. It supports the state of the view.
This pattern or architecture ensures a lot of advantages to Angular:
- Collaborative work: the separation of concerns can help us in boosting collaborative work, each one can work on its specific part of the application ( the UI part is separate from the related code).
- Code reuse: as a separation pattern, the duplication of the code is genuinely avoided. We can take the example of the model Layer as it is the most one that can be duplicated.
- Ease of Testability : We can easily Test our MVVM application as we are detaching the application logic from the UI.
Discover the basic concepts of Angular
We are following the same order as provided in the Angular official documentation. The main concepts of Angular are :
- Components
- Templates
- Directives
- Dependency Injection
We will talk and treat each of them now, but we will have a specific tutorial for each one.
Components :
An angular component is the main building block in Angular’s application, it is composed of 4 files :
- HTML file .
- Typescript file.
- .spec.ts File for testing.
- CSS or SCSS file.
we will be beginning with how to generate the Angular component.
“ng generate component component-name” is the command responsible for creating an angular component. You can also use “ng g c component-name” g stands for generating and c stands for the component.
After typing this command, Angular will create the 4 files that we introduced before.
Typescript file
We will begin with the most important file which will handle the logic side of the application. Those are the main important keywords in the typescript component file :
- @Component : a decorator specifies that this class is an Angular Component. It provides the configuration metadata.
- selector : it’s the tag of the component. We can call this component in another one using this selector.
- templateUrl : it’s how Angular knows the linked template file. By default, the attribute will have the name of the HTML generated file. We can also add some HTML code without mentioning the file name.
- styleUrls : it’s the styling configuration part, we can specify the (CSS or SCSS) file name or wanted style itself.
- Export : it’s a keyword that marks that we can use this component.
Angular gave us some other advanced attributes like Encapsulation, change detection, animations, and others … But at this level, we will focus only on the basics parts of an Angular typescript component file.
Html file
The Html file in an Angular component is its template layout. It represents the interface part of that component. It’s too evident that the HTML file will contain Html code, but how do we do the connection between HTML and Typescript parts?
First, as we mentioned in the previous part, the TS file will contain an attribute to know the HTML file, But you’re probably asking about how to pass data from HTML to Typescript and vice versa. We call that passage between the two files Data Binding, We will get back to this concept with more details and examples in the next few articles. But for now, we need to continue explaining some features of the component’s HTML file. Mainly this file contains only HTML tags, but we can call other components via their selector tags like the example below.
We can also encounter the router outlet tag which is a Directive that helps to identify where in the template part we can insert a matched component. We will talk about it also with detail.
The styling file
The styling file in an Angular component is either an SCSS or CSS file, and it depends on the way we configure the styling of the project. We can define a set of grouped styles in that styling file ( Classes or IDs). the following example demonstrates how we can use the Styling file.
The spec file (.spec.ts file)
It’s the file generated automatically by Angular to run unit tests for the Project’s source files. We can skip generating those files from the project’s creation by applying the –skip-tests option. You may apply it for the component creation or just by adding "skipTests":true to your angular.json file.
We finished Introducing the different Angular component parts. As I mentioned before we will discover more in detail this paramount concept of Angular, We will move now to Another big Angular Chunk which is Templates. Let’s discover together.
Templates
We talked in the Html file section about Angular templates. We can redefine Templates in Angular as the different views that the user can see using HTML code with more prebuilt functionalities.
Everyone who masters HTML well can easily get into Angular templates. the only thing to learn is how to pass data between HTML and typescript and here the term “DATA BINDING” marks his presence.
We will hear a lot about Interpolation, Property binding, Event Binding, Inputs and Outputs, and others.
We will encounter later in our tutorials a lot of templating tricks, so keep following us.
Directive
Directives are Typescript classes that add some specific behaviors to our Angular project. We can distinguish Directives from the @Directive decorator.
Directives since Angular 2 are as follows :
- Components: Yes Components are built-in angular directives with templates.
- Attribute directives: Directives that change how the interface looks to the user. We can enumerate some famous attribute directives like ngClass, ngStyle, ngModel …
- Structural directives: Directives that structure the Dom, it can modify some HTML elements, deletes others, and so on …
Directives are so critical parts of any Angular project.
Dependency Injection
Dependency Injection in angular is the fact that we import some external resources into a class rather than creating them.
It has a lot of advantages especially when talking about modularity and maintainability.
The known example of an injectable resource is Angular Services. We can use the Dependency Injection in Angular with the help of the @Injectable() decorator. In that way, Angular can use the service in its Dependency Injection System, We can also specify the level of visibility of the service by using the metadata ‘providedIn’ : The default Value for providedIn metadata is root: it means that the service is visible throughout the application.
The code written above shows the creation of an injectable service. The following code will display the injection of that service in an Angular component.
Conclusion
This long blog post covers the best way to start learning Angular. It focused mainly on two big parts :
- Theoretical Preparational Part: based on some advice, some resources to follow, and some preparatory tips
- Practical Part: consists of learning the basic concepts with code examples.
We hope that this blog post helped you in the process of learning Angular, and if it is the case please share the post and write a comment to motivate us to continue writing Tech and Dev tutorials.
Stay Tuned and Encourage us Web Dev Tutos.