Angular 2: First app

In this first app let’s not write any code here and just see how to structure folders and look around the things first. It’s more like setup thing than to write some code.

After installing Angular CLI via node, we can create our folder structure so easily. Just in case you missed on how to install angular cli check out my previous post.

Once you are ready with the initial angular 2 setup, we can create the angular folder structure with the following commands.

> ng new first-app

This should create the folder structure of our first angular 2 app along with the node modules required for our app.

*Note: The command can take a while as it has to download the packages from npm. Wait until the control is returned back. DO NOT CLOSE/CANCEL.

Once that is done you can see your app folder structure in the directory you ran the above command.

If you don’t wish to check out the folder structure and just interested only in running the app you can just enter the following commands again.

> cd first-app

once you are in your app folder just run it with the following command

> ng serve

The above command compiles all the ts(Typescript) files in the folder and if it successful, it will provide the url to run the app. The above command may sometimes launch the nodejs firewall blocker popup, just allow it.

Once the compilation is successful, you should be able to see the following window

first-app-created

As pointed in the above screenshot, run the app in localhost:4200 and you should see the app up and running.

angular-start

Let’s examine the folder structure now.

app_structure.png

e2e: End to end testing folder for angular

node_modules: node modules, this contains all the libraries required to build angular app. Like angular core modules, http modules, forms modules etc

src: This folder is where we write our angular code

The rest of the files are for configuration of project.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s