Understanding Angular and Creating Your First Application
If you have come here having never touched Angular and you want to build your first simple application, then you are in the right place. Thank you for joining me.
I will purposely keep each part as short as possible while achieving a new goal in Angular.
In this article we will begin to understand the basics of an Angular application’s structure and get started building our first application.
What Is Angular?
Angular is a TypeScript-based 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)
Although that is a nice description. It really does not tell us much. We can pick out a few things.
- It it TypeScript-based. That’s important. It means at some point you will need to learn TypeScript. Here is a beginner’s guide.
- It is open-source (free).
- It is for building web applications.
- It is a framework (unlike React which is made up of libraries). The difference? Inversion of Control. A good discussion can be found here. Ultimately it means we have a skeleton in which we add functionality.
We can also get a better idea by just reading the difference between Angular and React.
Both Angular and React have component-based architecture, which means they have cohesive, reusable and modular components. But, the difference comes at the point of tech stack. React uses JavaScript while Angular goes with Typescript for web development which is more compact and error-free.
What can we pick out of here? Component-based architecture.
So what we have is a skeleton (framework) to work in which allows us to build modular, re-usable components.
This makes up our Angular application.
Angular application’s also tend to be used to build Single Page Applications (SPA’s.)
A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.
In other words, a single HTML page who’s Document Object Model or DOM is changed dynamically.
Let’s Begin
Setup
We will use Visual Studio Code or VSCode as out development environment. If you do not have it, it can be downloaded here.
We will also need to install node.js. This can be downloaded here. We will not write any node code but it will help us bundle and optimize our code as well as give us access to the node package manager, npm.
Development
Step One-Installation of The Angular CLI
With our tools installed, we will start our application by using the Angular Command Line Interface or CLI. This is the recommended method for starting a new project.
We will need a directory on your computer to store the application. You can create this as desired but mine will be simply be named FirstAngularApp. This is a folder for your application, not the application name. That will come later.
Open VSCode and open the folder in which you want your application (FirstAngularApp.)
Open a new Terminal window.
If you installed node globally, we just need to install the CLI, type
npm install -g @angular/cli or npm install -g @angular/cli@latest
If you did not install node globally, first type this in the Terminal.
npm install
and then install the CLI,
npm install -g @angular/cli or npm install -g @angular/cli@latest
What we are looking for is a successful install. It will look something like this,
Step 2-Creating Your Application
To create your application in the FirstAngularApp folder simply type the following in the Terminal window.
ng new learning-angular
Where learning-angular is the name of our application.
You will be asked two questions. One is whether you want to install Angular Routing. This defaults to No. Just hit Enter.
Routing very is important and is what allows us to load different components to create an SPA but can be, and usually is installed, later.
More information on Angular Routing can be found here.
The other question is what type of styling you want to use. The default is CSS. We will use this default. Just hit Enter.
Notice while installing, many files have the extension, ts. This is for TypeScript. A note below.
actually typescript does not run directly on browsers. it is first compiled into java scripts codes. So you can say Typescript supports all the browsers which supports java script . (Quora)
After installation, you are looking for the message like this in your terminal window.
√ Packages installed successfully.
Opening the Application in Your Browser
After successful installation, navigate to the application directory, learning-angular by typing,
cd learning-angular
We then compile our application and start the development web server by typing,
ng serve
After it is finished compiling, we can go to our browser and type,
http://localhost:4200
Port 4200 is the default port.
You will see something like this. You know this is your application because it will say at the top, “learning-angular app is running” and “learning-angular” is the name of our application.
Success. You have built your first Angular application!
Note the message in the upper middle
A Quick Look at The Angular Project Files
In VSCode, look in the file explorer and you will see the framework’s structure of your Angular app.
In future parts, we will be adding folders and our own components. But for now, let’s examine some defaults.
Expand the src and app folders and click on index.html.
It is into this HTML page (app-root) that it will render components. index.html is the Single Page in the SPA.
Locate app.components.ts file and click on it. Notice the “Title =” line.
This sets the title you saw on the browser screen with the name of your application.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'learning-angular';
}
Also notice the templateUrl and selector. The selector is referring to the app-root in index.html.
Now locate and click on app.component.html. (This file might be quite large.) It is the what gets rendered into app-root of index.html.
There is much more going on, but that’s enough for now.
Type, CTRL+F in app.component.html and search for {{ title }}. In simple terms, the app.component.html file is the template into which the title from the app.component.ts is being passed, and then being rendered in the index.html so you see it in your browser.
For fun
In app.component.ts, change title = ‘learning-angular’; to title = ‘Hello World’; , save and, if needed, refresh your browser. You should see,
This was a minor change but it allows us to start seeing the relationship between application components. There are many other relationships.
now,
In app.component.ts add the line below title=(phrase = ‘Developing in Angular’;,
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Hello World';
phrase = 'Developing in Angular';
}
Now delete the entire contents of app.component.html and type,
<div>
{{title}}
{{phrase}}
</div>
Save and re-fresh the browser if needed. Not nearly as pretty since we removed all the styling but look! There’s your phrase. Cool!
Clean Up
We should clean up by closing or browser page and stopping our development server.
To stop the development server, in the Terminal of VSCode, type CTRL+C and hit Y and Enter. It will look something like this.
^CTerminate batch job (Y/N)? y
PS C:\NuSoft\Medium\FirstAngularApp\learning-angular>
Remember, you can always restart the development server by typing, ng serve. And browse to it by typing http://localhost:4200.
Conclusion
We did a lot. We built the foundation of an Angular application and started the process of understanding how things fit together. We even made a code change.
In future articles, we will take this further.
But for now, thanks for reading. I hope this got you started, and enjoy exploring!
Resources:
Suggest:
☞ Angular Tutorial - Learn Angular from Scratch
☞ Learn Angular 8 from Scratch for Beginners - Crash Course
☞ Angular and Nodejs Integration Tutorial
☞ How To Build a Node.js Application with MongoDB
☞ Angular 5 vs Angular 6 | What's New in Angular 6 | Features & Updates