Okay, okay, I hear you saying.
Let's get on with it,
show me some code.
Indeed, we'll get started with creating
our Angular application in this very first exercise.
We will use the Angular command line interface,
the Angular CLI for scaffolding out our Angular application in this exercise.
Then, as we go through the rest of the exercises in this course,
we will build our Angular application step by step.
The Angular CLI is a very convenient way of creating an Angular application.
The Angular application created by the Angular CLI follows the style
guides suggested by the Angular framework developers.
We can use the Angular CLI to scaffold out
many parts of our Angular application including the components,
the services of our Angular application.
The Angular CLI also comes with its own built-in server,
which we can use to serve up the Angular application as we are building it up,
and then view our Angular application in
the browser as a live preview of our application.
As when we make changes,
the changes will be reflected immediately to the browser.
That's the reason why I chose to use the Angular CLI as
the approach for building out our Angular application in this course.
To get started, go to a convenient location on
your computer and create a folder named Angular.
So, I'm going to start out moving to my documents Coursera folder.
That's where I store all my files for my Coursera course,
and then I will create a folder
named Angular and then a move into the Angular folder.
Now, we're going to create our Angular application within this folder.
The first step that we do in this exercise is to install the Angular CLI.
So, at the prompt,
type npm install -g @angular/cli@ 6.2.1.
Now, whenever I install an NPM module,
I will also specify the exact version of the NPM module that I'm installing.
I would strongly urge you to install
the exact same version of NPM module so that you can go through
the rest of the exercises without having any problem with the exercises.
So, in this case, I'm installing the 6.2.1 version of the Angular CLI.
Now, if you are doing this on a Mac or Linux,
don't forget the sudo in front of the npm install.
The installation will take some time.
So, once it is completed installing,
then the Angular CLI will be available on your command line.
Once the installation is complete,
you can check and see that the Angular CLI is installed.
Once that is installed,
you may need to restart your terminal in order
for the Angular CLI tools to be available at the prompt.
The Angular CLI is available by typing ng at
the prompt followed by a set of additional instructions.
So, the first command that we will try out is ng help,
and this will list a set of all the other commands
that the Angular CLI allows us to execute.
Ng as you see will be the prefix for
all the Angular CLI commands that you will use in this course.
This will list out a set of all the options that the Angular CLI provides for us.
We will learn a lot of these commands as we go through the rest of this course.
To create a new Angular application,
I'm going to create that application in
the Angular folder in a subfolder named conFusion.
If you have taken the previous course on Bootstrap four,
you'd understand why I name this application as conFusion.
So, at the prompt,
type ng new conFusion,
and then I would use sass as
the CSS styling framework for my Angular application.
So, I specify minus minus style equal to SCSS,
and hit the Return and it'll take some time for
the Angular application to get created in the current folder.
Once your application gets installed,
let's use the built-in server from
the Angular CLI to compile our Angular application and start serving it.
Move to the conFusion folder,
and at the prompt, type ng serve,
and wait for the Angular Live Development server to get
started and build our Angular application and start serving the application.
Once it is completed,
then you will notice that this application will be available by typing
a http://localhost:4200 into the address bar of our browser.
You can leave the development server running continuously.
As you make changes to your Angular application,
the server will automatically recompile the changes and then
start serving up the updated Angular application within your browser.
So, this would be a very good way of watching live the changes that you make
within your Angular application being immediately reflected
into the browser where you view your Angular application.
If you go to the browser and access the Angular application at localhost:4200,
you see that the application starts working,
and it'll serve up this set of words into our browser.
So, this is a very simple application that bare-bones Angular application to
get you started with developing your Angular application.
We're going to build on top of this scaffolded application by Angular CLI,
by implementing various features as part of this course.
If you're planning to use Git for your Angular application for versioning,
then at this point,
it may be a good idea to initialize your Git repository.
The Angular CLI automatically does the initialization of your Git repository,
and thus the first commit with the message initial commit to the Git repository.
Let's check the status of our Git repository.
Lets check out by typing git log
one line and you will see that
the initial setup has been committed to our Git repository.
Now, we can start working on our Angular application that we
have scaffolded out into this folder here.
Should you choose to synchronize your Git repository with an online repository,
then please make sure that your online repository is a private repository.
Bitbucket allows you to create free private repositories.
So, go ahead and set up your Git repository on Bitbucket.
With this, we complete our exercise.
In this first exercise,
we have installed the Angular CLI.
Then, we have scaffolded out our Angular application on which we're going to
work to develop further as part of the rest of the exercises in this course.