How to Run First Application in Angular 4

Posted by

How to Run First Application in Angular 4

https://youtu.be/33nW5lgMmcg

Welcome back to lesson 3. So, guys, you must need to know that how the angular and CLI works. To work with Angular, we just need a kind of IDE. IDE means a kind of editor, where we just write our code. The simple one is Notepade++, but I am not going to use it. I will use the IntelliJ. You can also use the Visual Studio Code or the Webstorm as well, but I am going with IntelliJ.



So we are going to discuss step by step, How to run the first app in Angular 4. Let's start from here:

Step 1: Create New Project

The first step, to Run your first App in Angular 4 is to start your IDE and “Create New Project”. In my case, I am going to load my project, because I already have one on my computer. So I am going to click on “Import Project”.

import project
import project

After clicking Import, select your project from “Project Directory”. In my case, the project is saved in C:\users\ShahzaibKamal\Desktop\first-angular-app. Let’s see the Image below:

Angular 4 project directory
Angular 4 project directory

As you can see below; By which way you want to create a project. I am just selecting the Eclipse.

Eclipse
Eclipse

Then give your project a Name, and click "Next Button".

Rename your project
Rename your project

After typing you project name wait for a while after the processing get done, and then click on “Finish button”.

finish
finish



Step 2: Writing your code

First look of Angular Directory, Let’s see the image below and we are going to discuss it further:

open IDE
open IDE

As you can see, There is some files like,

  • Idea
  • e2e
  • node_modules
  • src
Also Read  How architecture of Angular 4 worked

We have no concern with the above three folders, idea, e2e and node_modules. We will only continue our work in src folder. Let’s see the structure of src folder. src folder contains subfolders like,

  • app
  • assets
  • environments

src
src



Let’s see the first two folders, the app, and the assets. Our concern is with these two folders, as most of our project files will be here. assets folder will contain all the stuff like, images and videos etc.

Now come to the app folder. This folder will contain all our main files. Three files are very important in app folder,

  • component.html
  • component.ts
  • module.ts

app.component.html:

app.component.html is a view, which displays all the information in our web browser. Let’s have a look at an example:

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

So in the above example where does the title come from? The title is actually a variable, which comes from the file app.component.ts. Let’s have a look at app.component.ts file.

app.component.ts:

Export class AppComponent {
  title = ‘Our Course’;
}

So if you look at the above two examples of code, you will see the title = ‘Our Course’; variable in AppComponent class. This title variable is then called in app.component.html file as Welcome to {{title}}!!

Output:

The output is: Welcome to Our Course

Let’s see the image below:

output of angular 4 example
output of angular 4 example

Conclusion:

Now let’s see how it all work? We have two files, for now, app.component.html and app.component.ts.

app.component.html file contain HTML tags and app.component.ts file contains all the logic, as we see in the above example. In app.component.html file we call a variable from app.component.ts, which we already defined here as title = ‘Our Course’;



That’s all we have in this lesson. Our Next topic is How it all worked. So stay tuned and goodbye from this lesson.

Also Read  Styling webpage using CSS in Angular 4

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *