Creating First App In AngularJS With Basic File Setup & Configuration

Firstly, we need to choose a decent IDE (Integrated Development Environment) in order to write our codes and compile it. There are several good IDEs available on the web but we will be using Microsoft’s Visual Studio Code editor.

---

---

Steps For Basic File Setup –

1. Open Visual Studio Code and switch to its terminal tab.
2. Make sure you are in correct directory by checking the file path (in our case \Desktop\myproject\myapp).
3. Since the server isn’t active now, type

   ng serve

   to initiate the connection. After the compilation ends type localhost:4200 in your browser to see the app’s web page/front end.

How Angular Render Files & Run It –

1. Once your are able to view the app’s web page you need to see the page’s source code by either using right click and then click on view page source or simply pressing by Ctrl + U.
2. The most noticeable part of the source code is the tag

   <app-root></app-root>

   In order to know what it does, we need to read 4 main files.

3. Go to Visual Studio Code’s Explorer tab (left sidebar) → myproject → myapp → src → app.
   Open index.html file and you’ll notice that the tag

   <app-root></app-root>

   is available in this file. But this tag doesn’t hold any values (visual attributes of app’s web page) instead it receives those values from other files.

4. Following the path mentioned in step 3 open the following 3 files –
             (i) app.module.ts
             (ii) app.component.ts
             (iii) app.component.html
   
5. In the app.component.ts file you would notice a segment called selector. In this file

   app-root

   is taken as a selector and it will receive a HTML & CSS file which is mentioned in the templateUrl & styleUrls segment respectively (in our case its app.component.html).
   In this file, there’s also a template variable, title which holds the value app in it.

6. The app.component.html file is responsible for the front end visual representation of your app’s home web page. Any changes made in the HTML code will reflect on the app’s web page.
   Now notice the variable title mentioned under the <h1> tag. This variable carries and displays the value assigned to it in app.component.ts file. In order to change variable name and value, you must do so in all the subsequent files.

Creating The First App Consisting A Simple Form Module –

After completing all the steps mentioned in the above sections, you need to follow these steps to create your first basic angular.js app.

1. Keep all the 4 files open and in app.component.html file clear everything a write up the following code line –
   

   <div style = “text-align:center”>
   <h1>
   Welcome to Angular {{ title }}
   </h1>
   </div>

   After saving and compiling the file you would see a plain webpage.
   Note: – The variable title still holds the value assigned to it in app.component.ts file.

2. Now to add an input field in the webpage which will fill the input box and display it at the same time, you need to write the following code –
   

   <div style = “text-align:center”>
   <h1>
   Welcome to Angular {{ title }}
   </h1>
   <input type=”text” [(ngModel)]=”name” />
   <p> {{ name }} </p>
   </div>

   Here, ngModel is a binding element and name is a variable.

3. Since we have defined the variable – name, we also have to declare and initialize name with the empty string in app.component.ts file. In order to do so type

   name =””;

4. But in the file app.component.html, we have used ngModel and for the proper functioning of the form, we have to import form module in app.module.ts file by writing

   FormsModule

   in the import section.
   Just like other programming languages include core library files for certain functions, similarly, we have to import angular form’s library file too. In the top most section of app.module.ts file write

   import { FormsModule } from ‘@angular/forms’;

5. After successful compilation of the program, you would be able to see the results in your app’s home web page.