- Angular is a client-side framework,
very popular from Google to make it easier
for you to implement large amounts
of JavaScript code in the web browser.
It's a very useful framework.
It's been around for 6 or 7 years now.
Some of the features it provides,
Client-side data binding.
So what that means is you can have a class
called a component which contains data
and you can associate it with an HTML webpage
and the elements on the HTML webpage
automatically display the data from the component.
So that's called Client-side data binding.
You don't need to access the DOM directly.
The idea is that you write normal JavaScript code
to update the data in your component class
and it automatically re-renders itself in the HTML.
So we have, we can move away from low level code,
such as you know, find the element with this ID,
find its child element,
add the new element to the DOM tree.
We can just work in terms of logical JavaScript data,
and the HTML is automatically re-displays that data for us,
much higher level of programming.
It supports dependency injection and services.
In Angular, a service is a class
which you inject into a component.
The component then calls methods
on the service to get data to display.
So we'll have a look at that later on during this lesson
and the following lesson.
Angular comes out with a new version every 6 months.
At the time of writing,
we were using Angular 12.
Every 6 months, the version changes.
By the time you are viewing this video series,
it'll definitely be, have moved on.
It could be Angular 13 or Angular 14,
Angular 15, Angular a hundred.
So we have this tool called Angular CLI,
Angular Command-Line Interface.
It's a tool which enables you
to create a new Angular application.
You don't have to use it,
but you almost certainly should.
It's very, when you have an Angular application,
there's a lot of files involved
and you have to follow best practice.
If you use Angular CLI, it reinforces best practice.
So you can use Angular CLI from the command-line
to create a new Angular application.
I would always do this.
I would never create an Angular application from scratch.
I would always use the Angular CLI
to create a baseline application.
Once you've done that,
you can look at the configuration files.
It generates, for example, a package .JSON
that specifies your libraries
and it specifies a test configuration
that configures the test framework for Angular.
As we'll see shortly, Angular uses Jasmine.
Jasmine is very similar to Jest
so that's similar to what we've been looking at so far.
So Angular CLI, it generates lots of folders
and lots of files
and it kind of shows you how to do it properly.
So you should follow the conventions
that Angular suggests.
Having one folder per component,
organizing things in the hierarchical structure,
using the correct file naming conventions
for your, for your code and for your HTML
and for your style sheets and for your test files.
So there's a lot of files involved.
It's important to organize these things properly
and Angular CLI helps you to organize things properly.
So you should definitely use it.
Okay, so Angular CLI
will help you generate an application initially,
it'll also allow you to, or help you
or it will do it for you actually.
It'll generate additional files
that you might need later on.
So for example, you might need extra classes or interfaces.
You might need extra style sheets.
You might need an extra service class to be injected.
You should use the Angular CLI tool
to generate all these things
and it'll generate them
in the conventional best practice kind of way.
So there we go, those are some of the things
that you can create using the Angular CLI tool.
We'll see all how to do all of this later on
during this lesson and the following lesson.
Okay now Angular CLI is a Node.js application.
So before you go anywhere,
you have, if you haven't already done so,
mean you will have done by now.
You need to make sure that you've installed Node.js.
Once you've done that or Yarn,
Yarn would also work.
Once you've installed either Node.js or Yarn,
you can then install Angular CLI
like this, npm install -g,
so globally on your machine,
install the Angular CLI tool.
The @ symbol isn't significant.
It's just the name of the,
it's just the name of the tool, @angular/cli.
That'll download and install the Angular CLI tool
on your machine.
And then in order to use it, it looks like this.
You say ng, ng is the Angular CLI,
ng is kind of short for Angular.
So if you type that in,
it'll first of all verify that Angular is,
the Angular CLI is installed properly.
And it'll tell you what version of Angular are you using.
So like I said, when I created my examples for this session,
it was Angular CLI version 12,
but you know, 6 months later,
it'll be 13, then version 14, then version 15.
So, all the examples that I've got here
will continue to work,
now going into the future.
But if you generate new applications for yourself,
then the version numbers for all the libraries
will be different and that's fine.
Generally, Angular these days is backwards compatible.
It's very rare where they introduce a change
that breaks old code.
Okay, so that should be fine.
Right, so let's imagine
that you've installed Angular CLI.
Angular CLI enables you to create the new application,
to add artifacts to the application
so to add components,
services, classes, interfaces, directives, pipes.
There's quite a lot of, quite a rich ecosystem, Angular.
In fact, one of the,
one of the things that people criticize
about Angular is that it's complicated compared to React.
With React, you'd create a simple React application
with about 20 lines of HTML.
But in Angular, you're, you're looking at,
you know, probably about 12 files,
probably a couple hundred lines of code.
So you definitely don't want to write all that yourself
hence the need or the usage of Angular CLI
to get you started.
But you can also use Angular CLI
to create other applications afterwards
and to add them into your application.
You can also use the Angular CLI to serve an application.
Okay, so what that means is it'll compile your code,
it'll start in memory,
it'll start a web server,
like a development web server,
so that it'll host your web application
in debug mode, if you like.
So it's the quickest way
to get an application running in an app is to serve it.
You say ng serve.
And that's what we'll do initially.
Once you're happy that the application's working
and you've debugged it and it's beautiful,
then you can build it for, for production.
Okay, so that will basically compress it.
It'll amplify the files and basically minify them.
And it'll give you the smallest footprint possible,
ready to put onto your production server in the real world.
Okay, so that's called a build.
Right, so there we go.
So Angular CLI,
currently creating in Angular version 12 in my examples.
The version will be incremented every 6 months.
So what you probably need to do
if you're gonna be using Angular,
there isn't any dramatic imperative need
to always be using the latest version.
But you probably wanna be within,
you know two or three versions of the latest.
You know so within two years, it'll be Angular 16.
You probably wanna, you know, keep relatively up to date,
you know two or three years up to date.
Don't leave your Angular running on version 7
because eventually it'll break.
Right, so that's a very quick overview.
Hopefully by now, you've installed Angular CLI.
So what we're going to do in the next section
is we're going to generate a simple application
and start dissecting the files that it generates.