Learn Angular From 0 to 100 — Journey Begins

Sukesh Marla
Mar 23 · 20 min read
Image for post
Image for post

Complete series source code can be downloaded from GitHub.

Introduction

Welcome everyone. My name is Sukesh Marla. I run an organization called Just Compile LLP. It’s a Mumbai based IT firm specialized into customized web and mobile application development, Consulting and Training.

With this article, I will be starting with my brand-new series called “Learn Angular from 0 to 100”. This series will help you to become an Angular developer. We will talk and learn about Angular from Project Development point of view and not only cover the fundamentals but also explore the best practices and various architecture points we must think of while designing the Angular applications.

Consider this series as a Journey. Pack your bag and start your journey. You can start your trip from any Station and can stop at a Station, depending on your current skill and knowledge.

By the end of this article, you will reach Station 1. Every time we cross a Station, we become competent into something.

So, are you ready for a beautiful Angular journey? I am excited to share my skills with the world are you eager to learn it? I believe Yes 😊

Complete series

Angular journey

Let’s understand what we get by the end of each Station.
1. Station 1 — Get Basics stronger
2. Station 2 — Explore ES6 features
3. Station 3 — Webpack
4. Station 4 — Explore Typescript features
5. Station 5–Create first Angular application
6. Station 6 — Angular fundamentals
7. Station 7 — Angular Project

Station 1 — Get basics stronger

Image for post
Image for post

This Station is to make fundamentals stronger. You can skip this and jump to the next Station directly in case you believe this Station is not necessary for you.
My Recommendation, go thought all Stations. There is no harm in revision.

What are we going to learn in this series?

While going through this series, if somebody asks you, “What are you learning?” then don’t answer it as “AngularJS” because these series have nothing to do with “AngularJS.” It is going to be an Angular Tutorial.

Is AngularJS and Angular different?

Yes, they are entirely different.

Image for post
Image for post

AngularJS and Angular do share some standard vocabularies/features. In both technologies, you will see Directives, Pipes, Services, and many other standard features. Both share the collective thoughts of the Single Page Application. Concepts in both technologies share a similar idea, but syntax and approach of creating them are entirely different.
For instance, In both AngularJS and Angular, we use Pipe for data transformation logic.

AngularJS was the client-side framework created by the google team for creating single page application development. Later in the stage, specific issues are identified in Angular JS. To tackle those issues plus to follow a modern UI development methodology (component-oriented architecture), an entirely new framework was introduced with a completely new approach. It was Angular, and its first version was “2.0”.

Is there a migration path from the AngularJS app to an Angular app?

Yes, there is, and it called “Re-create.” 😊
Many people may argue that AngularJS application can be migrated to Angular application, but practically it’s a myth. It’s only possible with a trial or demo applications. With real-time applications, it’s just a dream.

Terminologies we hear now and then.

If you have ever tried to learn Angular before, then you must have seen many jargons such as Node, TypeScript, ES6. Let’s talk about a couple of those terminologies.

Please note, in case you find initial theory a little difficult to digest then don’t worry, just relax and keep continuing even if certain things are unclear. Once you start with practical labs, these theories become more and more straightforward. After a couple of practical labs, I recommend you revisit these theoretical topics.

What is JavaScript? And Why?

Probably many of you already know the answer to this. But to revise, it’s a programming language developer has been using for many years for client-side scripting in web applications. The primary purpose of it is DOM manipulation. JavaScript executes in the client-side by the browser and manipulates the client DOM.

Image for post
Image for post

How is JavaScript different compare to other programming languages?

Like most of the programming languages, JavaScript is not a compiled language. It’s a dynamic and interpreted language. Run-time environment (provided by the browser) executes each line one by one and throw an error at run-time in case anything goes wrong.

Let’s do a demo to understand the same.
Create an HTML file with the following content.

<html>
<head></head>
<body>
<script>
console.log('A');
console.log('B');
console.log('C');
console.log(ABCD);
console.log('D');
console.log('E');
</script>
</body>
</html>

Now execute the HTML file. (simply double click the file and open it in browser)

Image for post
Image for post

As you can see, although there is an error in the 4th “console.log” first three lines executed successfully. If it were C# or Java, we would have encountered very different output. We would have ended up with the compile-time error. That’s JavaScript. 😊

What is ES6?

ES6, ES2015, ECMA 2015 are all the same. Initially, it was proposed as ES6, and finally, ES2015 becomes the official name. Usually, most of the people call it ES6, so we will call it ES6 throughout this series.

It’s a new JavaScript standard. Lots of new capabilities and features are added in this version to make JavaScript developer’s life easy. We will explore a couple of those features moving forward in this series.

What is Angular?

Now to get the real idea behind this, let’s talk about a new way of web application development popular nowadays.

It’s called Single Page Application.

What is and Why the Single Page Application(SPA)?

Gmail and Facebook are some of the most known examples of such applications. Let’s compare the traditional web applications with Single Page Applications.

Image for post
Image for post
Image for post
Image for post

In the case of SPA, performance will be much better. The end-user gets one Page in the beginning, and it stays forever. All future operations performed by end-user look like simple dom manipulation.
Something gets dynamically visible, something gets invisible, some new items get created, some existing items get removed, but the entire UI never gets refreshed. It gives a feeling that the whole application is developed on one single page. Hence called Single Page Application.

Does it involve only one page?

But the question is, is it internally contains only one page? I mean, do you think that the entire application is developed by a developer in a single page. The answer is No. It’s not possible. 😊

In reality, the developer develops it as multiple pages and then using concepts like Ajax, some CSS, and some dynamic JavaScript code he/she brings the appearance of Single Page application and so improves the overall experience.

What’s the challenge of creating a SPA?

Now, DOM manipulation is not very easy with Vanilla JavaScript.
Vanilla JavaScript is a name given by the community where code is written purely with core JavaScript syntax. (No third-party libraries)

Creating a real-time web application with a pure vanilla JavaScript is a challenge. Libraries such as jQuery make DOM manipulation very easy.

Is jQuery or some other DOM manipulation library enough for creating a SPA?

Try to imagine the volume of JavaScript we will write to create a single page application. In the case of a single Page application, all DOM manipulation will be done at the client-side. Server-Side code will be only limited to only business logic and data. More significant the app is more significant will be client-side code. I am not saying we cannot create a Single Page Application using jQuery or some other DOM manipulation library. We can, but having too much JavaScript code makes code unmanageable. We need some kind of standard and structured way of UI development.

You must have heard Architecture patterns such as MVC or MVVM in server-side technologies, which gives a clear separation between the various logical areas of an application. It has a clear answer for, “What to be kept where?” and “What will talk to what.” The code is more manageable when the application is developed using such architectures.

By using jQuery, we only get a few methods that will make our life easy in terms of DOM Manipulation, but what about code management and architecture. Don’t you think we need a better-structured approach on the client-side as well? Especially when we know that we are going to end up into a lot of JavaScript code finally.

So, the answer to the current question is, No. jQuery is not enough to build a SPA. We need more than that. We need some kind of framework that will enforce a structured way of coding in the UI world.

What is Angular?

Angular is a client-side framework created by Google. It’s not an alternative for JavaScript. It is a JavaScript framework.

Please note it’s not a library, it’s a complete framework. It’s is a far bigger concept than a library. It provides a comprehensive platform needed for development. That platform may consist of some reusable libraries to make life easier, but it may give you a lot of other things, such as compilers. It provides a complete execution environment. It may force you to follow a certain kind of fixed structure while coding.

Image for post
Image for post

The Angular framework, just like jQuery, makes DOM manipulation very easy, but it also gives you a clear separation between UI, UI logic, presentation logic, and application logic.

Angular also force us to develop our entire UI application in terms of reusable and composable web components. It’s called the Component Oriented Architecture. It’s a standard way of UI development recommended by HTML 5.

You can see such architectures implemented in other technologies as well, such as a polymer, react, etc.

So, in short, Angular is a client-side framework for creating Single Page Application in a component-oriented style.

What is NodeJS?

When I was learning Angular for the first time, I was quite confused. I was wondering what “NodeJS” is doing here, and I believe many of you share similar questions.

It’s a run-time for executing JavaScript code without browser. It means now you can write JavaScript code that can run independently of the browser and can be used for creating other kinds of applications as well, such as a desktop or even servers that can respond to HTTP requests, etc.

Before we dig into the question, “What is the role of NodeJS in Angular application development?” First, let’s cover some more ground regards to NodeJS.

Installation

You simply need NodeJS for that. You can download the latest version of NodeJS from the following link.

Installation is pretty straight forward.

Confirm installation is successful

To confirm that installation is successful, open the command prompt and execute the following two commands one by one.

  1. “node” command
    You should get the following output.
Image for post
Image for post

2. Now, press “Ctrl+C” twice to exit “node” command and execute “npm” command

Image for post
Image for post

Usually, the node installation process also updates the environment variables in a system. Some times because of some system security issues, it may fail to update the environment variables. In case it fails, you may get the following errors.

  • node is not recognized as an internal or external command….

In such case make sure to do it manually. Open Control Panel>>System and Security>>System and then refer below two images.

For updating path:

Image for post
Image for post

For updating system path:

Image for post
Image for post

A quick demo of Node console application

Open your favorite text editor and write the following code.

var a=10;
var b=20;
console.log(a+b);

Save your file as “firstnode.js.”

Now open the command prompt. Navigate to the folder where you have saved the file and execute the following command.

node firstnode.js

You will get the following output.

Image for post
Image for post

As you can see, JavaScript code was executed without a browser.

It was a simple demonstration of a “NodeJS” application.

Node run-time understands all JavaScript keywords (except UI specific keywords such as “alert” or “document”) and so knows how to execute it. “NodeJS” even understands new ES6 features and, to some extent, ES7(version going to be introduced after ES6).

Moving forward, we will do coupe of our demos with browsers and a couple of with NodeJS.

What is npm?

When we talk about the application, we have dependencies.
Let’s say we are working on an application called “App1” and we want to use a third-party module called “dep1”. That “dep1” is dependent on two other third-party modules “dep2” and “dep3”. “dep3” is dependent on “dep4”.

Now the challenge here is, as the “App1” developer, it becomes our responsibility to download “dep2”, dep3” and “dep4” along with “dep1”.

In short, we need to have a complete idea about the entire dependency hierarchy. We also need to make sure that the correct version is downloaded. For instance, “dep2” has the latest version as “3.5” and “dep1” needs “2.3” of “dep2”.

Isn’t it too much work? A simple solution is the Package manager. It is a software tool that will simplify working with dependencies. You will find the concept of package manager mostly in all technologies. In Java, we have “maven,” in .net, we have “nuget,” and in python, we have “pep.

“npm” is a Node Package Manager for the JavaScript language. We get it as a part of NodeJS Installation.

Using “npm,” we can download the packages from the npm registry, which is an online database of JavaScript packages. JavaScript packages include both reusable libraries and utilities that can do some automation.

“npm” for downloading JavaScript libraries
To demonstrate this, let’s download “jquery” using “npm.” For that open command, prompt and execute the following command.

npm install jquery

Now open the folder where the above command is completed, you will see the “node_modules” folder created inside it. Inside the “node_modules” folder, you will notice jquery downloaded.

As you can seem using “npm” utility, we can download reusable libraries from the “npm” registry. Just like jquery, we can download “angular,” “reactJS,” and other libraries easily using “npm.”

“npm for downloading utilities
JavaScript Packages, also known as “Node Modules,” are not limited to third party libraries. We also have node modules, which are self-executables. We have node modules, which after installing support us with new CLI commands using we as a developer, can achieve certain things which won’t be possible otherwise.
For instance, we have a node module called webpack, which will let us bundle all our JS files and create a single bundled js file. What is bundling and what is web pack and all, don’t worry about these questions as of now. We will talk about it.
For now, let’s have a demo of downloading a node module, which is self-executable.

Simply execute the following command.

npm install  -g @just-compile/jc_calc

You may notice a particular attribute “-g” is added to the “npm install.” It means we will be installing our node_modules globally. You won’t see any changes in the local node_modules folder.

(In windows, global node_modules location will be “C:\Users\{username}\AppData\Roaming\npm.”)

As soon as the above finishes it’s execution, we will get a new CLI command “add_jc_calc.” Let’s use it.

add_jc_calc 8 9

You will get the following output.

17

Don’t worry about the “-g” flag used with “npm.” We will talk about it very soon.

What is “package.json”?

It is a simple text file that contains the metadata information about the “NodeJS” application.
It is located at the root directory of the application.
We have three advantages of using it.

1. To provide metadata information about our package or application.
2. To keep track of application dependencies.
3. For creating “npm scripts.”

How “package.json” keep metadata information about our package or application?
Let’s start by creating “package.json.” It can be created manually using any text editor of your choice or can be using “npm” utility.

Open command prompt, navigate to the folder of your choice, and execute the following command.

npm init

It will prompt for “package name” followed by “version” and then so on. Provide the value of your choice and press enter. Its just information about the application. Ignore “entry point” and “test command.” Don’t worry about these options. Check the below image for reference.

Image for post
Image for post

In the final prompt, enter “yes,” and press enter. Open the folder in file explorer, and you will notice “package.json” created in the folder with the following content.

{
"name": "myapp",
"version": "1.5.1",
"description": "trying package.json for learning",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "sukesh marla",
"license": "ISC"
}

As you can see, “package.json” contains a lot of information about our application and that’s the first advantage.

How is “package.json” used for keeping track of application dependencies, and what’s the benefit of it?
Before how to let’s answer why we want to keep track of application dependencies.
Let’s talk about a random system dependent on three external libraries– jquery, systemjs, and core-js.

Each of these libraries can be downloaded using “npm install.” Commands will be as follows.

1- npm install jquery
2- npm install systemjs
3- npm install corejs

Now, when we say application, there will be multiple developers. Each developer will be needed a copy of the source code. Hence it’s recommended keeping entire source code in some kind of version control (like GIT).

The question is whether the libraries downloaded in the above step will be included in the version control, or every developer will have their copy of the same.
In most cases (which is also the recommended approach), these library files are kept separate from version control, and every developer is asked to download them separately using “npm.”

Image for post
Image for post

The problem with this simple approach is, every developer needs to download every file. In the above case, it’s just three libraries, but in some cases, it maybe 100. In that case, there is a high possibility that he/she forget to download some.

The solution to the above problem is “package.json.” Follow the following steps.
1. Create “package.json” following the ways specified in the last section (that is “npm init”).
2. Execute the following commands one after the other.
a. npm install jquery — save
b. npm install systemjs — save
c. npm install corejs — save

please note an additional “ — save” flag is added with each install. It will create a new section in “package.json” called “dependencies” as follows.

{
"name": "myapp",
"version": "1.5.1",
"description": "trying package.json for learning",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "sukesh marla",
"license": "ISC",
"dependencies": {
"corejs": "^1.0.0",
"jquery": "^3.4.1",
"systemjs": "^6.2.5"
}
}

3. Now, delete the node_modules folder and execute just the “npm install” command (in the folder where “package.json” file is located”). You will notice that all dependencies will be downloaded in one go.

That’s it. “package.json” will keep the list of all dependencies, and every developer will simply execute the command, and they will get all libraries. In this way, we achieved both our requirements.

1. Libraries are not kept as a part of source control
2. No need to remember the libraries by every developer.

Image for post
Image for post

How to create “npm scripts” and what is the purpose of it.

We have already seen a demonstration of installing third-party node_modules using “npm install.”
We have also witnessed an illustration of an executable node module, but we haven’t spoken about the “-g” flag used with “npm install” yet. Installing node modules “-g” leads to global node modules. It will be available to all applications. Whereas when used without “-g” leads to local(application-specific node modules). They cannot be executed directly in the command prompt. We need “npm-scripts” for the same.

Step 1 — Create “package.json” using “npm init.”

Step 2 — For the demonstration, we will use the same “@just-compile/jc_calc” package.

First, uninstall the global module using the following command.

npm uninstall -g @just-compile/jc_calc

Please make sure not to miss the “-g” flag in the above.

Now, install it locally as follows

npm install @just-compile/jc_calc

Step 3 — Now try to execute the following command

add_jc_calc 8 9

You will get the following error.

‘add_jc_calc’ is not recognized as an internal or external command,operable program or batch file.

As the package is not installed globally, you won’t get “add_jc_calc” CLI directly in the command prompt.

We need an “npm script” for executing local modules.

Step 4 — Open the “package.json” and add/modify the script section as follows.

{
"name": "myapp",
"version": "1.5.1",
"description": "trying package.json for learning",
"main": "index.js",
"scripts": {
"add": "add_jc_calc"
},
"author": "sukesh marla",
"license": "ISC"
}

Step 5 — Now, in command, promptly execute “npm script” using the following command.

npm run add 8 9

You will get the following output.

C:\SukeshRND\node\package>npm run add 9 9> package@1.0.0 add C:\SukeshRND\node\package
> add_jc_calc "9" "9"
18

Executing local node modules is not the only use case for “npm scripts.” Sometimes we have some commands which are complex to write and going to be used multiple times.
So instead of using those complex commands numerous times, we create “npm script,” which will be pointing to complex commands.

What is the role of “NodeJS” in Angular application development

Many people who start learning Angular get confused about “NodeJS.” They get the impression that they need to learn “NodeJS” to learn Angular.

Let me be apparent. You no need to be a Node expert in case you want to learn Angular. We won’t be writing a single line of code in “NodeJS” while Angular development.

So, can I create Angular applications without having much knowledge of “NodeJS”.?
Yes, 100%.

But that doesn’t mean we don’t want “NodeJS” at all.

  • We will install “NodeJS.”

As an Angular developer, you should know “npm,” “package.json,” “npm scripts,” and the concept of “node_modules.” That will be more than enough.

Webpack

Usually, a web application with a single JavaScript file is never possible when we talk about the angular application. It’s going to have a lot of JavaScript files.

More JavaScript we have more will be downloading load at the client-side. We need to make sure that the size of the JavaScript file is less. On top of that, we cannot imagine including each of those JS files in our startup HTML file. It will be too much overhead.

Module loader

One solution is using Module loaders. Module loader is a library that loads the JavaScript file at run-time dynamically. One example of such a Module loader is “systemjs.”

Module loaders can simply be downloaded using “npm.” For instance, for downloading “system js,” use the following command.

npm install systemjs
Image for post
Image for post

The problem with the Module loader is performance. Loading JavaScript files run-time affects performance.

In one of the future articles, we have a nice demo on the module loader. So for now, just try to get the idea behind the Module loader.

Module bunder

It is a node module which takes a JavaScript file as input and then identifies all other JavaScript files input file is dependent on (directly or indirectly) and finally merges all files and generates one single JavaScript files. It joins them in such a way that logic inside those JavaScript files won’t get affected.
That one generated bundle file is included in the HTML file.

Image for post
Image for post

How come the module bundler and module loader understand dependency?

Don’t worry about that now. When we plan to use the Module bundler or module loader, we write our code following some standard. For now, just believe that somehow, somewhere in every JavaScript file, we specify the dependency with other JavaScript files.

Having one single JavaScript file, won’t it affect the performance?

Again, don’t worry about it now. Module bundlers have provision to create multiple feature-wise bundles as well.

Is Webpack a module bundler?

Yes, Webpack is a module bundler, but it’s not the only bundler. We have more. Such as “Browesrify.”

We will see the Webpack demo in one of the upcoming articles.

Does Module bundler only bundle JavaScript files?

No, it can also bundle CSS files.

What is TypeScript? And Why?

Let’s understand this by answering a couple of more sub-questions.

  • What is Typescript?
    It’s a programming language.
Image for post
Image for post
  • · Where can I use TypeScript?
    Anyplace JavaScript can be used. Instead of writing JavaScript write TypeScript, compile, and then use the generated JavaScript.

Every Js code can be straight forward copied from JavaScript file and pasted in TypeScript file, and it will be considered as TypeScript code.

Image for post
Image for post
  • What about ES6 features in the case of TypeScript?
    We will cover the ES6 features very soon. If you are working with Typescript, then the good news is Typescript has similar features.
    In-fact TypeScript have additional (example -Decorators, Generics). We will be exploring most of the features throughout the series.

It was just a quick overview of TypeScript. We have a detailed article waiting on purely TypeScript.

Conclusion

So, we have reached the Station 1. Have some relaxing time for yourself. So far, it was more of theoretical learning. I promise moving forward it’s going to be much more exciting and much more challenging.

Stay tuned and practice well. Please drop comments and clap. It helps us to stay motivated to write more such series.

You can check me out on twitter @sukeshmarla.

In case you are looking for customized mobile or web application development, exclusive technical Consultancy for architecting your project, and want to train your people in advanced technologies, you can visit my company Just Compile or contact SukeshMarla@Gmail.com for details.

JustCompile

Training, Consultancy , Development, Resourcing

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store