Hello!, Welcome to COT. Lockdown sucks! doesn't it? no? :(. Well, it's a great opportunity to learn new skills, if you are reading this in twenty-twenty lol. This article tries to explain what is Angular to those who do not know anything about it, let's get started.
Here is the list of topics/questions this article explains:
1.What is a single page web application?.
2.Basic idea of what is Angular?.
3. What is Node.js?.
4. Some cool things, yes cool things.
5. TypeScript.
6. How an Angular application gets rendered?
7. How to start learning Angular?.
Single page web application means it dynamically rewrites/changes the webpage you see, instead of reloading a whole new page. It makes websites faster, as they only have to load required content. You must have visited all those beautiful single page web apps of Google, for example- Machine Learning Crash Course.
Angular is a framework(like Flutter is for Android) developed by Google used for developing single page web applications. It is open source, and the code is written in TypeScript. It has a lot of features you can't ignore, it provides libraries for developing user interface, form validation, and many more things. Angular also gives facility to unit test your application.
[Note: AngularJS, and Angular are not same. AngularJS is old. The latest version of Angular is Angular 8. ]
React, and Vue are also used for developing single page applications, I will be writing about them in future.
One of the most cool things I liked about Angular is you can invent your own HTML tag. You can combine the whole code you have written for your tag(including CSS & HTML) in a single JavaScript file, which is a cool thing, because it will allow other developers to use your custom tag just by including a single JS file.
Before you learn anything about Angular, it is necessary to know what is Node.js, because Angular is completely dependent upon it.
If it allows JavaScript to run outside of browser, guess what is the biggest advantage of it?. It can run the f**k*ng JavaScript on a server, which is a cleint side scripting language. You just have to run node command with a .js file as argument, and it will give the same output as you would have got in your browser console.
Node Moudules:
Node modules are nothing, but JavaScript libraries which you can install on your computer(outside of browser). Later they can be used in your programs.
NPM(Node Package Manager):
It is a package manager just like apt, yum etc. in Linux. NPM allows you to install node modules, just like you install packages in Linux. Angular can also be installed using NPM.
Now, let's talk about some cool things in Angular.
Angular Material:
It is a library which make material design available to angular developers. Material design is a design concept which makes your application look beautiful. When I say beautiful, I mean it. The page shown below was created by me using Angular Material. It took me about 45-50 lines of HTML of code only, without any CSS, or JavaScript, it was all given by Angular Material in the form of HTML tags, custom tags HTML rather.
click here to know more about Angular Material.
Angular Components:
User interface in Angular in divided into components. It controls a part of screen. All components have selectors(like html tags), this allows you to reuse a component across the web app.
For example, if there is a tutorial website, then the list of topics in sidebar would be a different component, and the part which shows the content for each topic would be another component. The list of topics in a tutorial is always constant, you do not have to load it repeatedly if you are using angular.
Each component has a template(html file), and a typescript file. Template tells how to render a component, and typescript file contains the logic, for example it calculates the age of user using DOB. If you don't know what is TypeScript, no need to worry, I have explained it in this article. You can check.
Components come under Angular Modules, and they can also have child components.
Animations:
Angular has a module which makes easy to animate things. Animations is great way to catch user's attention where it is needed, they help in improving user experience.
Angular Services:
Services in Angular are used for these two main purposes:
1. To share data across multiple components:
Suppose you have a list containing some data, and you want to use it in multiple components for different purposes. Without a service, you will have to define that list inside all components in which you want to use it, which is not a good idea.
2. External interaction:
Services are also used for external interaction, For example, connecting to a database.
Different Ways to Handle Forms:
Angular provides two kinds of forms to handle user inputs.
1.Template Driven Forms(TDF):
Most of the code for these forms is written inside HTML. TDFs use ready made functionalities(like checking error) provided by Angular to handle forms, they make html templates look messy.
2.Reactive Forms:
Reactive forms allows to write most of code inside TypeScript. They give you more control over forms. You can use RxJS Observables to track what's happing inside form, if the user has touched a textfield, or typed a letter etc. RxJS is a reactive programming library, reactive programming makes your code asynchronous. Asynchronous code means you can run multiple pieces of the code at a time.
Reactive Forms are easy to test because most of its code is written inside typescript, that is one of the main reason we should use them.
Angular CLI:
It is a command line tool, as its name suggests. Angular CLI can used to create angular project, generate components, and services, and to automate many more tasks which take editing multiple files. If you want to use angular material in your angular project, just run ng add command with the appropriate argument.
Testing in Angular:
Test-driven development prevents most of the bugs, it is a fact. That is the reason Angular comes with Jasmine, and Karma. Jasmine is a testing framework which has easy to understand syntax. Without Karma you have to run Jasmine tests by refreshing browser tabs in different browsers again, and again. Karma can do that all in command line.
Development & Production Environments:
Angular Allows you to build your web app in two different modes. Development, and Production mode. Development build helps in debugging. If your application is ready, you can
It is a programming language developed by Microsoft which gives better object orientation than JavaScript, and it also provides optional static typing. Optional static typing means when you are declaring a variable, you have choice to give its type(like number, or string). It is not the case in JavaScript, JS is dynamically typed, means it figures out type of a variable at runtime.
Static typing helps translators/compilers to detect errors before
even running the program. It also helps IDEs to detect errors when the programmer is writing the code, and making mistakes while assigning values.
The interesting part about TypeScript is that, everything you write in JavaScript is also valid in TypeScript, you can change extension of your file from .ts to .js, and it will work. That's why it is also called the superset of JavaScript.
A TypeScript program cannot run directly with Node.js, you have to convert it to JavaScript using a Transpiler. Transpiler is a type of program which translates other programs from one programming langauge to another. Why on earth anyone would do that?. Well, I have already told you.
TypeScript can run on client, as well as server side. Node.js is the guy which makes it possible.
Angular Universal:
Index.js can be very big, because it contains the whole code. This can make your web app load slower when the first time user visits. To solve the problem, Angular provides something called Angular Universal.
Angular Universal renders pages on server side, it generates static pages, which get loaded later on. This allows users to use the web app even before everything is loaded.
Beginner Level:
Angular Docs:
Official Angular Docs is the first place you should visit if you want to learn Angular.
Codevoltion youtube channel:
Their Angular 8 Playlist is so good.
Intermediate Level:
Fireship Youtube Channel:
Check his Playlists, he greatly explains complex topics in very less time.
Angular Vienna:
This playlist contains 45 to 60 minutes videos, which are great, and give you deep understanding of Angular.
If you have any question, you can ask me in the comment section. Bye.
Here is the list of topics/questions this article explains:
1.What is a single page web application?.
2.Basic idea of what is Angular?.
3. What is Node.js?.
4. Some cool things, yes cool things.
5. TypeScript.
6. How an Angular application gets rendered?
7. How to start learning Angular?.
What is a single page web application?
Single page web application means it dynamically rewrites/changes the webpage you see, instead of reloading a whole new page. It makes websites faster, as they only have to load required content. You must have visited all those beautiful single page web apps of Google, for example- Machine Learning Crash Course.
Basic idea of What is Angular?
Angular is a framework(like Flutter is for Android) developed by Google used for developing single page web applications. It is open source, and the code is written in TypeScript. It has a lot of features you can't ignore, it provides libraries for developing user interface, form validation, and many more things. Angular also gives facility to unit test your application.
[Note: AngularJS, and Angular are not same. AngularJS is old. The latest version of Angular is Angular 8. ]
React, and Vue are also used for developing single page applications, I will be writing about them in future.
One of the most cool things I liked about Angular is you can invent your own HTML tag. You can combine the whole code you have written for your tag(including CSS & HTML) in a single JavaScript file, which is a cool thing, because it will allow other developers to use your custom tag just by including a single JS file.
Before you learn anything about Angular, it is necessary to know what is Node.js, because Angular is completely dependent upon it.
What is Node.js?
Node.js is not what its name suggests :). I mean node.js is not a JavaScript library/file ,or something, it is rather a runtime time environment which allows you to execute JavaScript code outside of browser. You can't do that without node.js. Node.js is also cross platform.If it allows JavaScript to run outside of browser, guess what is the biggest advantage of it?. It can run the f**k*ng JavaScript on a server, which is a cleint side scripting language. You just have to run node command with a .js file as argument, and it will give the same output as you would have got in your browser console.
Node Moudules:
Node modules are nothing, but JavaScript libraries which you can install on your computer(outside of browser). Later they can be used in your programs.
NPM(Node Package Manager):
It is a package manager just like apt, yum etc. in Linux. NPM allows you to install node modules, just like you install packages in Linux. Angular can also be installed using NPM.
Now, let's talk about some cool things in Angular.
Some Cool Things About Angular
They are really cool :).Angular Material:
It is a library which make material design available to angular developers. Material design is a design concept which makes your application look beautiful. When I say beautiful, I mean it. The page shown below was created by me using Angular Material. It took me about 45-50 lines of HTML of code only, without any CSS, or JavaScript, it was all given by Angular Material in the form of HTML tags, custom tags HTML rather.
click here to know more about Angular Material.
Angular Components:
User interface in Angular in divided into components. It controls a part of screen. All components have selectors(like html tags), this allows you to reuse a component across the web app.
For example, if there is a tutorial website, then the list of topics in sidebar would be a different component, and the part which shows the content for each topic would be another component. The list of topics in a tutorial is always constant, you do not have to load it repeatedly if you are using angular.
Each component has a template(html file), and a typescript file. Template tells how to render a component, and typescript file contains the logic, for example it calculates the age of user using DOB. If you don't know what is TypeScript, no need to worry, I have explained it in this article. You can check.
Components come under Angular Modules, and they can also have child components.
Animations:
Angular has a module which makes easy to animate things. Animations is great way to catch user's attention where it is needed, they help in improving user experience.
Angular Services:
Services in Angular are used for these two main purposes:
1. To share data across multiple components:
Suppose you have a list containing some data, and you want to use it in multiple components for different purposes. Without a service, you will have to define that list inside all components in which you want to use it, which is not a good idea.
2. External interaction:
Services are also used for external interaction, For example, connecting to a database.
Different Ways to Handle Forms:
Angular provides two kinds of forms to handle user inputs.
1.Template Driven Forms(TDF):
Most of the code for these forms is written inside HTML. TDFs use ready made functionalities(like checking error) provided by Angular to handle forms, they make html templates look messy.
2.Reactive Forms:
Reactive forms allows to write most of code inside TypeScript. They give you more control over forms. You can use RxJS Observables to track what's happing inside form, if the user has touched a textfield, or typed a letter etc. RxJS is a reactive programming library, reactive programming makes your code asynchronous. Asynchronous code means you can run multiple pieces of the code at a time.
Reactive Forms are easy to test because most of its code is written inside typescript, that is one of the main reason we should use them.
Angular CLI:
It is a command line tool, as its name suggests. Angular CLI can used to create angular project, generate components, and services, and to automate many more tasks which take editing multiple files. If you want to use angular material in your angular project, just run ng add command with the appropriate argument.
Testing in Angular:
Test-driven development prevents most of the bugs, it is a fact. That is the reason Angular comes with Jasmine, and Karma. Jasmine is a testing framework which has easy to understand syntax. Without Karma you have to run Jasmine tests by refreshing browser tabs in different browsers again, and again. Karma can do that all in command line.
Development & Production Environments:
Angular Allows you to build your web app in two different modes. Development, and Production mode. Development build helps in debugging. If your application is ready, you can
TypeScript
Angular uses TypeScript. TypeScript is better than JavaScript if your application is going to become big. JavaScript becomes complex to handle if your application is scaling.It is a programming language developed by Microsoft which gives better object orientation than JavaScript, and it also provides optional static typing. Optional static typing means when you are declaring a variable, you have choice to give its type(like number, or string). It is not the case in JavaScript, JS is dynamically typed, means it figures out type of a variable at runtime.
Static typing helps translators/compilers to detect errors before
even running the program. It also helps IDEs to detect errors when the programmer is writing the code, and making mistakes while assigning values.
The interesting part about TypeScript is that, everything you write in JavaScript is also valid in TypeScript, you can change extension of your file from .ts to .js, and it will work. That's why it is also called the superset of JavaScript.
A TypeScript program cannot run directly with Node.js, you have to convert it to JavaScript using a Transpiler. Transpiler is a type of program which translates other programs from one programming langauge to another. Why on earth anyone would do that?. Well, I have already told you.
TypeScript can run on client, as well as server side. Node.js is the guy which makes it possible.
How an Angular application gets rendered?
Everything you write in your angular project files is converted into a single JavaScript file called index.js, no lots of html files. The index file is downloaded to the client side when you load the website for the first time. All the changes on the screen are made by manipulating DOM, as everything is inside the index.js.Angular Universal:
Index.js can be very big, because it contains the whole code. This can make your web app load slower when the first time user visits. To solve the problem, Angular provides something called Angular Universal.
Angular Universal renders pages on server side, it generates static pages, which get loaded later on. This allows users to use the web app even before everything is loaded.
How to start learning Angular?
Angular is well documented, and has good community.Beginner Level:
Angular Docs:
Official Angular Docs is the first place you should visit if you want to learn Angular.
Codevoltion youtube channel:
Their Angular 8 Playlist is so good.
Intermediate Level:
Fireship Youtube Channel:
Check his Playlists, he greatly explains complex topics in very less time.
Angular Vienna:
This playlist contains 45 to 60 minutes videos, which are great, and give you deep understanding of Angular.
If you have any question, you can ask me in the comment section. Bye.
1 Comments
Nice Article bro
ReplyDelete