Professional Documents
Culture Documents
in 20 minutes
So, do you want to learn the fundamentals of Angular 4 in a quick and easy
way? You have come to the right place! You don’t need familiarity with any
previous versions of Angular. In this tutorial, I’m going to take you from the
ground up and show you Angular 4 in action. You only need a basic familiarity
with HTML, CSS, and JavaScript.
If you learn better by videos, you can also watch this tutorial on YouTube;
otherwise, continue reading.
Beginner’s questions
Let’s start with a few beginner’s questions. If you’ve used any previous
versions of Angular, feel free to skip this section and jump to “Getting the
tools”.
What is Angular?
Angular is a framework for building client applications in HTML, CSS, and
either JavaScript or a language like TypeScript that can be compiled (more
accurately, transpiled) to JavaScript. If you have never worked with TypeScript
before, don’t worry. I will give you the basics in order to complete this tutorial.
What is TypeScript?
TypeScript is a superset of JavaScript. That means any valid JavaScript code
is valid TypeScript code. But many prefer TypeScript because it has additional
features that we don’t have in the current version of JavaScript that most
browsers understand. So, when building Angular applications, we need to
have our TypeScript code converted into JavaScript code that browsers can
understand. This process is called transpilation which is the combination
of translate and compile. And that’s the job of the TypeScript compiler.
Why do I need a framework like Angular?
A common question a lot of beginners ask me is: “Why do we need Angular in
the first place? What’s wrong with the plain old vanilla JavaScript and
jQuery?”.
1
Sure, there is a learning curve involved, but once you master Angular, you’ll
be able to build client applications faster and easier.
Is Angular better than React/Vue.js?
These days there is a lot of debate between Angular vs React vs
Vue.js. Whether Angular is better than React or Vue.js depends on how you
define “better”. Each of these frameworks have strengths and weaknesses
and there is no one shiny framework that makes every developer in the world
happy. My suggestion to you is to learn the fundamentals of each of these
frameworks and choose the one that works best for each project depending
on its requirements.
The -g flag stands for global. If you don’t put -g here, Angular CLI will be
installed only in the current folder, and it’s not going to be accessible
anywhere else.
If you’re on Mac, you need to put sudo at the beginning of this command to
execute it as an administrator; otherwise, you’ll get permission errors.
ng new hello-world
As you can see, we can access Angular CLI using ng. We provide a
command (in this case new) to instruct Angular CLI on what we want it to do
2
for us. Here, we are telling Angular CLI to generate a new project called
“hello-world” and store it in a folder with the same name. We’ll be looking at
these generated files shortly. For now, let’s finish the first step and see our
new Angular app in the browser.
So, run the following commands in the terminal:
cd hello-world
npm install
ng serve
With the second command (npm install) we install all the dependencies of
our application. The last command (ng serve) compiles our application and
hosts it using a lightweight web server. Now, we can access our application
at http://localhost:4200.
So, open up your browser and navigate to this address. You should see the
following page:
3
Structure of Angular Projects
Inside the generated folder, you’ll find the following top-level folders:
4
HTML markup: to render that view
State: the data to display on the view
Behavior: the logic behind that view. For example, what should happen
when the user clicks a button.
App
o NavBar
o SideBar
o ContentArea
Tweets
Tweet
Like
5
As you can see, this component-based architecture makes our applications
more organized and maintainable. Plus, we can potentially reuse these
components in various parts of an application or in an entirely different
application. For example, tomorrow, we can grab
this NavBarComponent and put it in an entirely different project. We just
need to modify the links. But all the HTML markup will remain the same.
Back to our tree of components, you can see that inside the content area, we
have a tree of components like this:
Tweets
o Tweet
Like
Again, this is one way to model this. We don’t necessarily have to have a
separate component for the list of tweets and each tweet. We could
combine TweetsComponent and TweetComponent into one component.
But, I’d like to separate the LikeComponent because we could potentially
reuse this like button somewhere else in this application or in another
application. Even if we don’t reuse it, separating the markup, state and
behavior of this like button into a separate component, makes our application
more maintainable and testable.
Back to our project, open up the src/app folder. Inside this folder, you should
see the following files:
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
These files represent AppComponent, which is the root component for our
application. In this particular case, all these files are inside the app folder. But
when we generate a new component using Angular CLI, all the files that make
up a component will be grouped by a folder.
So, in terms of the implementation, each component in an Angular project is
physically implemented using four files:
A CSS file: where we define all the styles for that component. These styles
will only be scoped to this component and will not leak to the outside. This
6
is what Shadow DOM does. But not all browsers today support Shadow
DOM. So, Angular uses a technique to emulate the Shadow DOM.
An HTML file: contains the markup to render in the DOM.
A spec file: includes the unit tests.
A TypeScript file: where we define the state (the data to display) and
behavior (logic) of our component.
You will also see an app.module.ts file. This file defines the root module of
our application and tells angular how to assemble the app.
Creating a Component
Now that you know what a component is, let’s use Angular CLI and add a new
component to this application.
When we click this button, it also shows the number of products of this type in
the shopping cart. Initially, the number should be 0. Every time we click the
Add to Shopping Cart button, the number is increased. Of course, in a real-
world application, there’s far more complexity involved. For example, we may
want to call some back-end services to store this item in a database. But for
now, let’s just focus on the fundamentals. If you understand the fundamentals
well, you can always add these other details later. So, for now, forget about
the server-side, databases and other complexities.
Ok, we’re ready to create a component. We can manually create all those four
files by hand, but there is a faster way. We can use Angular CLI!
7
ng g c product
Here, g is short for generate, c is short for component and product is the
name of our component. Now, if you look at the project folder, inside
the src/app folder, you should see a new folder called product. Expand this
folder. You should see the following files:
product.component.css
product.component.html
product.component.spec.ts
product.component.ts
Open product.component.ts. This is what you should see:
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor() { }
ngOnInit() {
}
If this code looks complex to you, don’t worry! I’m going to make it super
simple. It’s actually far easier than you may think!
For now, I want you to note the value of the selector property. It’s app-
product. This is a CSS selector. So app-product represents an element by
this name. With this, we can extend the HTML vocabulary. Anywhere we add
this app-product element, Angular will render the HTML markup of
ProductComponent inside that element. So, let’s add this element to the
template for our AppComponent.
Using a Component
Open up src/app/app.component.html. Replace all the markup with the
following:
<app-product></app-product>
8
App
oProduct
At the root of this tree, we have our AppComponent. This component
includes a child component: ProductComponent.
Save the changes. Back to the browser, now, you should see this:
9
product inside a card.
But for now, we don’t want to waste our time and make our application pretty.
Our focus is on understanding Angular. We can always come back to the
template for ProductComponent and improve it.
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor() { }
ngOnInit() {
}
10
So, unlike vanilla JavaScript where all our functions and variables are hanging
from the global namespace, we put them in containers called classes. With
these classes, we don’t pollute the global namespace and as a result, we
won’t have one function overwriting another function with the same name.
Because these functions are now in separate containers (classes). Also,
because each class includes a bunch of highly related functions and variables,
our code is more organized and maintainable.
ngOnInit() {
}
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
11
export class ProductComponent {
}
Component Metadata
So, you’ve seen that we implement a component using a TypeScript class.
But a class on its own is just a class. It only includes some data and logic for a
view. It doesn’t include any HTML markup or CSS styles. In order to attach
these to this class, we need to promote this class to a component. We can do
this by using the@Component() decorator function on top of this class (lines
3-7):
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent {
}
With this, we can attach metadata to this class that Angular understands.
This @Component() decorator function is defined in Angular and you can see
we’re importing it on line 1. It takes an object with the following properties:
selector
templateUrl
styleUrls
You’ve seen the selector in action. It associates a new HTML element to this
component. With this, we can extend the standard HTML vocabulary. So, now
we have a new custom element (app-product) that we can use anywhere in
our application. When Angular sees that element, it’ll place the HTML markup
of our ProductComponent inside that element.
The other 2 properties (templateUrl and styleUrls) are self-explanatory.
They specify the path to the HTML template and CSS file(s) for this
component.
Property Binding
12
In Angular, unlike vanilla JavaScript or jQuery, we don’t work directly with the
DOM. So, we don’t write code like this:
$("#myElement").text("something")
Instead, we use property binding. Let me show you how that works.
In our ProductComponent, let’s add a new field:
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent {
title = 'USB Stick 8GB';
}
This title field contains the title for our product. In a real-world scenario, we
get this title from a database somewhere on the server. So we don’t hardcode
it here. But for now, let’s not worry about this and see property binding in
action.
Now, open up product.component.html. Replace all the markup there with:
This special double curly brace syntax you see here is what we
call interpolation in Angular. Fancy name again, right? This basically tells
Angular to replace what we have between curly braces with the value of
the title field in our component.
This syntax is a shorthand for the actual property binding syntax we have in
Angular. The code you wrote above is equivalent to the following code:
<p [innerHtml]="title"></p>
What is this? Very simple! In vanilla JavaScript, we can simply get a reference
to an element in the DOM and set its innerHTML property like this:
var el = document.getElementById("myElement");
el.innerHTML = "USB Stick 8GB";
13
So, every DOM element has a property called innerHTML. In our Angular
application, we’re using the square bracket syntax to bind a property of a
DOM element to a field/property in our component:
<p [innerHtml]="title"></p>
So, at run-time, Angular will set the innerHtml property of this paragraph to
the title field we defined in our component. And more importantly, if the value
of our title field changes in the future, Angular will automatically update the
view (DOM) for us! This is property binding in action. We have bound
the innerHTMLproperty of this element to the title field of
our ProductComponent.
A Simple Exercise
Now, here is a simple exercise for you. I want you to extend our product
component and display the number of USB sticks in the shopping cart below
the name of this product. So, stop reading and make any necessary changes
in the code. Then, come back here and see my solution.
Event Binding
Similar to property binding, we have another concept in Angular called event
binding. With property binding, we bind properties of DOM elements to
fields/properties in our component. With event binding, we bind events of
DOM elements (such as clicks) to methods in our component. So, for
example, when the user clicks on a button, a method in our component will be
called.
14
We’re going to extend our product component and add a button to increase
the number of USB sticks in the shopping cart. So,
modify product.component.htmlas follows:
Note the difference between property and event binding syntax. We use
square brackets for property bindings and parenthesis for event binding. With
this code, whenever our button is clicked, Angular calls the addItem() method
in our component.
addItem() {
this.itemCount++;
}
}
Here, we’re simply incrementing the itemCount field. Now, save the changes
and go back to the browser. Test this application by clicking the Add button.
You can see the count gets updated immediately. This is the beauty of
property and event binding in action!
As I explained, Angular watches our itemCount field. When its value gets
changed, Angular updates the DOM immediately.
What you’ve seen far is just the tip of the iceberg. There is far more to
property and event binding and Angular in general. It’s impossible to cover it
all in one blog post. If you’re serious about learning Angular, I have
a complete course with 30 hours of high-quality videos. This is equivalent
to a book with more than a thousand pages!
Recap
Let’s quickly recap what you’ve learned in this post:
15
Angular is a framework for building client apps with HTML, CSS and
TypeScript.
It gives our applications a proper, maintainable and testable structure.
At the core of every Angular application, we have a tree of components.
Each component encapsulates the state (data), the HTML markup and the
behavior for a view.
At a minimum, a component is implemented using a class. This class may
include a bunch of fields for displaying data and methods, which will be
called in response to events raised from the DOM events.
A component may have an external template stored in a separate HTML
file.
It may also include one or more external stylesheets.
A component also has a selector. That tells Angular where in the DOM to
place this component.
We use the property binding syntax (square brackets) to bind properties of
DOM elements to fields/properties in our components.
When the value of these fields/properties change, Angular automatically
updates the DOM (view).
We use the event binding syntax (parenthesis) to bind events of DOM
elements to methods in our component.
Angular automatically calls these methods to handle events raised from the
DOM elements.
Once again, if you want to learn everything about Angular from the basic
to the advanced topics, I encourage you to enroll in my complete Angular
course. This is far easier and faster than jumping from one tutorial to another.
With this course, you can learn all these concepts in one place, step-by-step
and you’ll build and deploy real e-commerce app with Angular and Firebase at
the end of the course.
16