- You can create an Angular application
by using Angular CLI, the command line interface tool.
Open up a command window and run this command,
NG, for Angular, the Angular CLI, create a new application
and call it HelloWorld.
It'll create the folder called HelloWorld
and it'll download all the libraries into that folder.
And it'll generate all the code
and all the configuration as well.
When you run this command line tool,
the first thing it does is ask you a couple of questions.
Do you want routing?
Routing is useful when you have a single page application
where the user navigates the different URLs
and automatically displays different components.
We'll have that in general,
but for the simple application we generated now,
you'd say, "No, thanks."
And then in terms of style sheets,
we'll just go over the basic CSS option.
You also have the option of using some CSS
pre-processor like Sass or Less
to make it easier to manage large style sheets.
But for now, we'll just go for the simple option.
No routing and a simple CSS style sheet format, please.
I've already created an application.
If you go into the demo folder for lesson 11
you'll see there's a folder called "Example1,"
and in there I created a simple application, HelloWorld.
It was the basic application generated
using the Angular CLI.
We'll have a look at the pre-built example in a moment,
but first of all, I'm just gonna actually
do this just to show what it looks like.
So I've opened up a command window
into Lesson 11, Example 1.
I've already got a HelloWorld application in there,
so I'm gonna create another application,
NG new HelloWorld2.
So it asks, "Do you want to add Angular routing?"
Generally, you'd say yes,
but in this simple example, we say, "No, thank you."
Which style sheet format would you like?
You can use the arrow keys to say which format
of CSS you want of style sheets.
So we'll just go for the plain CSS.
Okay. And then you press enter,
and off it goes, generating the application.
It takes about two or three minutes
to generate the application
because generating the source files for one thing,
but mainly because it downloads a lot of libraries.
It generates a packaged json file,
which specifies all the libraries to download,
and there a lot of libraries to download,
so go away and come back.
Make a cup of tea.
Have another cup of tea.
By the time you've come back, it'll be ready.
Okay.
So what we'll do is, we won't wait for that, obviously.
We'll have a look at the example
that's already being created.
So the Angular CLI, it creates a fully functional
minimalistic application,
which contains this directory structure.
Okay, so this is the HelloWorld directory structure.
I'll show you the actual demo in a moment.
Notice a package.json file, which specifies the libraries.
I also notice that it has downloaded
those libraries into node_modules.
Now, if you are using the examples that I provided
to accompany this video series,
the node_modules folder, in practice, is huge.
So what I always do when I'm packaging my application,
is I delete the node_modules folder before I zip it,
because it's just too big.
Okay.
So if you want to run the HelloWorld application
that I've provided, you'll have to do an NPM install.
So open a command window, go to the HelloWorld folder,
and then run NPM install.
Like that. Okay?
That will also take two or three minutes,
but you need to do that,
and it'll then install all the libraries
in the node_modules folder.
So make sure that you do that.
Also, we've got TypeScript configuration file.
Angular applications are TypeScript.
Okay. So that's something to note.
So it generates TypeScript configuration
and the list of libraries we need,
and then various files here.
Karma is the test runner for Angular.
Karma runs your tests.
We'll see that later, obviously,
plus various other configuration files,
and then a source folder, or plus a git repository
so you can upload to GitHub or Bitbucket.
In the source folder,
we have the homepage, index.tsx, plus the home entry file,
if you like main.ts,
is the code entry point in the application,
and index.html is the actual homepage
that the browser will open.
And style.css is the global style sheet.
In a way, you define your corporate color schemes,
fonts, logos, and such like.
Okay.
There's obviously a lot of other detail here.
The test file basically tells Angular what tests to run,
what files to look for when it's running tests.
The environments folder allows you to define
different properties, like the URL of a server
you want to connect to.
You might connect to one server in development mode,
but a different server in production mode.
So you can define configuration information
in here to help differentiate between those two modes.
The assets folder is where you put your images
and videos and things like this.
You know, your kind of media assets, if you like.
And then the app folder is where all the code lives.
So if you go into the app folder, you will find,
well, there were four files called
app.component.something.
A component in Angular is a class
which renders part of your webpage.
And in a minimalistic application,
you have one component called app.
Each component can have four files.
A file that defines the component class.
A spec file, where you put your tests.
You can have a separate test file
per component for unit testing.
Each component has data to be rendered
and that data is rendered in the associated HTML file.
This is for the HTML template.
A component has code and data
that can be tested.
The data is rendered by the HTML template
with the file name. Same file.
And a component can have its own style sheet.
Okay. So that's relatively common.
So you can have two different sets of style sheets.
The global style sheet for the whole website,
and then a specific style sheet
just for this component if it needs it.
Okay. And then this file here, app.module
is kind of a box into which you put all your components.
So we've got three main types of source file.
The code entry point, which is always main.ts,
the module, which is kind of like an assembly box
that specifies all your components.
And then each component itself has four files:
the code, the test, the HTML to display the data,
and a CSS to style the HTML.
All right, so that's what was generated by default.
I'll just show you the application
that I've already created.
So in my HelloWorld folder, in example one,
if you open HelloWorld or HelloWorld2,
in fact, that seems to be coming together now.
Let's have a look at the HelloWorld folder
in the code editor.
So here it is.
If I just expand, what we'll see here are the files
that I just mentioned.
All the configuration files in the root folder,
the source folder that contains my homepage,
my code entry file,
plus my application component.
My application component plus the module.
I'm not gonna look at the source file yet
because there are so many of them.
We'll do that later.
At the moment, I just wanted to give you,
like, the big picture,
create an application, and then be able to run it.
Right, so to run the application,
the easiest way is to say "ng serve."
"ng serve" will compile your code into JavaScript.
It'll start a development web server.
By default, the web server will start on localhost.
Although, you can use the "--host" property
to run on a different host.
And the port number by default is 4200,
and you can use the "--port" option
to run on a different port number.
So I'm gonna serve my HelloWorld application.
So first things first, you need to be in the folder
that contains your application.
Okay? So you need to go into the HelloWorld folder
or HelloWorld2.
You know, whichever one you wanna be in.
Basically, you need to be in the folder
that contains the package.json file.
Then you say, "ng serve,"
and, you know, ng serve takes a few minutes.
You have to be patient being an Angular developer.
It compiles all your text script code into Angular.
Oh, it's saying here that I have a more recent version
of the Angular CLI on my machine.
Okay. So there we go.
So when I wrote the demos, it was version 12.
As I sit here today, it's version 13.
So I could upgrade.
You can upgrade easily from version one to version two.
I'm just gonna wait a moment while it does the compilation.
It'll start the web server.
Once that's ready, I can then go into a browser
and serve the application,
and have a look at the application.
So if I could wait long enough,
it would've completed building.
I could go into a browser,
browse to localhost 4200, and it would look like this.
Okay. So, I feel it's a rather over-engineered sample page,
but that was generated by the Angular CLI application.
Okay. It's good.
We're ready to start diving into the details.
Now, what we need to do is to actually understand
what does that code look like that's been generated?
And once we understand, you know,
what does a component look like,
and what does the HTML look like,
once we understand the code,
then we'll be in a position to actually start writing
the tests for the Angular application.