Angular 6 First Application

               ANGULAR 6 FIRST APPLICATION

In this blog we will make our first Project on Angular 6. I am sure that everyone of you have successfully installed Angular 6 on your system by following the previous lectures.

Now to start out with the first project go to the required directory from the terminal where you want to have your Angular projects.

After getting into the required directory type the following command in the terminal:
                                           > ng new myFirstApp --style=scss --routing 
The command is described below:
                                       

• ng - This is the way to call Angular Cli.
• new - This is one of the command from Angular command Directory.
• myFirstApp It is the project name.

Optional flags - The next two flags are optional and are described below:

* --style=scss: This is used to enable Sass(by default css is enabled)

* --routing : This flag will generate a routing file in your directory which will be used to add routes of different pages in your directory.

Now once the development process of Angular completed you will find a directory name "myFirstApp" in your project directory.

Now one thing to note here is Angular will provide you with a dummy page once you created a new App.
Therefore the Angular Test page is ready and you can run your first Angular Project without any change.

So just jump into your Angular project folder by typing the below command:
                                                  > cd myFirstApp

Now to run it just type the following command in the terminal:
                                                 > ng-serve -o

This will open the following window in your browser :

                                     


Now In your project folder open file   open file "app.component.html" inside "/src/app" directory . The file would be something like shown below:

Now remove all the boilerplate html with the following code show in the picture:

Now open "/src/app/app.component.ts", the file would be something like shown in the below picture:

Change title with any string you like and see your browser. The output would be something like this:

And your First Application on Angular 6 has been successfully developed.

Stay tuned  for more lectures......................

« Previous Next »