Making your first AngularJS app

Hello folk,

This is my first blog related to AngularJS. Today i am gonna teach you about how to make your first AngularJS application. AngularJS is front-end javascript framework developed and maintained by Google. It allows developers to create super flexible MVC(Model-View-Controller) applications.

In this post you find how to setup the angular development environment and by using it to how to create your first angular application. AngularJs library can be linked to HTML page by downloading the JS file or you can use a CDN.

Download the AngularJS

Click on the above link and then select the whole text. Copy and paste the selected test in new file and named it as angular.js. Now you can add it in the HTML file by using

screenshot-30

in the head section. Also you link by adding the CDN

screenshot-31

in the head section.

Creating the index page

Create HTML page with any name and add the following sample code.

Screenshot (29).png

Before heading toward adding angular code, let me explain you about some angular ng-directives frequently used in angular applications.

  1. ng-app: It is used to define an angular application
  2. ng-controller: It is used to define the application controller.

So lets create a DIV inside body tag and give a proper ng-app and ng-controller name.

screenshot-32

Creating the app.js file

Create a file named as app.js and add it in the <head> section of the HTML page. Now add the code

Screenshot (33).png

in app.js and save it.

In HTML file, inside the <body> section add  {{message}} so that final HTML code look like this.

screenshot-34

Just save the code and run it the browser. You will be able to the message displayed in the browser.

That’s it for now ! Stay tuned for more AngularJS tutorial here.

Advertisements

One thought on “Making your first AngularJS app

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