Getting started with AngularJS (Part 1)

This is a series of tutorials to start AngularJS, following this will give you a basic, but a good idea about what actually it is, how it works and how we can use it to make our work much simpler. This tutorial will contain several parts, make sure you follow each and every tutorial. So let’s start.

. What you should already know?

  • HTML
  • CSS
  • Javascript

2. What angularJS is?

In simple terms, it is a javascript framework. We can add it in to our HTML document with <script> tag. In other words this is a library written in javascript. So we can use this library to make our work simple.

3. What makes angularJS awesome?

  • MVC (Model – View – Controller) design pattern
  • SPA (Single Page Application) support
  • Testing – unit testing, isolate small unit of codes and also helps E2E testing

4. How angularJS extend HTML?

It extends HTML using directives. Directives allow developer to specify custom and reusable HTML. Some of the most commonly used directives are,

  • ng-app – Declare the root element of the angularJS application ,under which we can use directives.
  • ng-bind – Binds application data to HTML view
  • ng-model – Binds value of HTML controls to application data.
  • ng-controller – Specifies the controller
  • ng-show and ng-hide – Conditionally show and hide elements

5. How can we get angularJS?

You can simply download the javascript file from here and add the path of the downloaded file in a script tag inside HTML document or you can simply add the following script tag.

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>

If you add the above link, you must connect to internet. Nothing will work without internet if you use this link.

6. Where can you get more information?

You can learn much more and get more details on this stuff by visiting here .

Okay, after some boring stuff, now let’s go in to the interesting part. A simple example will show you how easy and why this is so awesome.Follow the steps..

Step 01 – Write the following code in a text editor and save it as index.html

angular1

Note that I have included the downloaded angularJS library here.

Step 02 -Now just open index.html from your web browser. See the output by typing something inside the textbox.

angular2

Yeahh…. You did it!! 😀 😀

But how this is actually happening?

  • First inside the html tag I have inserted ng-app directive. This should be actually given a name for the application so that we can call it when we use a controller. As we do not use a controller here just keep it like this.
  • Then you can see inside the input tag I have inserted a ng-model directive. This will bind the application data “name” in to HTML view.
  • Now you can output the bind data in a place that you need. You just have to call {{name}} to output the bind data.

Hope you all can understand this.Lets meet with something more interesting in the next part. Please comment if you need more clarification.

Sanjaya Thilakabandara

Information and Communication undergraduate in Rajarata University of Sri Lanka.

Leave a Reply

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