With Angular 2, Angular Cli was introduced which stands for Angular Command Line Interface. Angular CLI runs on node JS and helps in the quick creation of the new Angular application. To start creating an application first we need to install Angular CLI and for that, we need to have Node js. To install Node js click on the link https://nodejs.org/en/download/current/ and install for your platform. After installing Node js open the command terminal, as I m using windows so I’ll open a command prompt. To install Angular CLI type
npm install -g @angular/cli
where npm stands for Node Package Manager, -g for global to use it globally in the system. To check if Angular CLI is installed properly you can use command
to check the version.
Creating Angular 4 Application
Now we can start creating our Angular 4 application. To create a new project, we will be using Angular CLI and will type the command
ng new new-angular-app
This command will create the default structure and files with needed for the development of the project. It will take some time to download the files. After it is completed you will have a configured Angular 4 project. Now let’s see the structure and files inside the folder. I ‘ll be using the Microsoft Visual Studio Code IDE for my development as its free and powerful. Let see the created directories and files for our new angular app.
Inside the root directory, you’ll see 3 folders, e2e which is for an end to end testing which we ‘ll be using later. The second one is the node_modules folder which contains the angular files and other required classes for development. We don’t have to do anything in this folder. The last one is the src or the source folder which contains the development files and index.html.
We have some other files which we may not require as default configuration is sufficient for running the application. We ‘ll be doing our development inside the src folder only. In this app, the folder contains the components. Images and other media files can be stored in assets folder. Environment variables configurations are in the environment folder which as of now we don’t need to change. Out of the other files we will be using, index.html (rarely) for few imports of style libraries , style.css for application level styling and favicon.ico to change the favicon. Others we can leave to default.
This was about the structure of Angular 4 files, now lets start and check the app is working or not. Angular CLI provide a server which we can start and check the output in browser. To start that go inside the application folder in command prompt and type ng serve this will compile and deploy the app on local server, which can be access though http://localhost:4200 (to change port number ng serve –port_no ). So lets start the app and see if it is working fine.
Application compiled successfully. Lets see the output.
As you can see the default page, means the app server is working fine. In the next tutorial we will start development of cool and reactive app using Angular 4 and Angular Material.