Your first angular app

As we have installed angular CLI in previous article now we can create a new angular project. So back to the terminal

Let's call this project hello_world.

~$ng new hello_world 

here is my practice screen-  also i'm not mac user😉

So this will generates a bunch of files and folders and then it going to use NPM to download third party libraries.

So our project is successfully created, now to start coding we need a code editor. the editor i'm gonna use for practice is visual studio code or vs code it's beautiful, cross-platform and light-weight editor, you can download it from code.visualstudio.com  .

If you dont like this editor feel free to use any editor that you prefer, we can use sublime, atom or any other editors, if you gonna use vs code i want you to add it to the path so you can easily open it from the terminal. Open vs code here if you are using mac press shift+cmd+p or if you are using wind😉ws press shift+ctrl+p this opens-up the command palette now here type-

          code     and you will get intellisense 

"install 'code' command in PATH". with this we can go to the terminal in the folder where we created a new project hello-world

Simply type

                       ~$hello-world $code .   

So this opens up vs code pointing to the current folder. In the next article we gonna look at the structure, you gonna learn what files and folders we have here but before we get there let's make sure that this application works.

So back in the terminal once again we use angular CLI to load our application in the web server so type in the terminal

~ng serve

So now we have a live development server listening on localhost:4200 and angular CLI also compiles our application it generates bundles for javascript and css files.

It's time to test our application

Open chrome and hit the url localhost:4200 

Beautiful... this is our first angular app.

In next artical we will look at the structure of the new angular project... 

see you s😍😍n.