Using Angular js in Web Applications

In this article we will look what angular js is and the scenarios where angular js might be the right fit for your web application.

Introduction:

What is angular js?

Its  a javascript mvc framework by Google for building rich client side applications. Server side code can still be used  but majority of the user interactions like form submissions, data binding etc is shifted to client side.

When to use Angular?

When you decide to build a website using angular the major question to ask yourself is that is this a website that requires valid HTML or is this a web application that focuses more on functionality then markup. Angular works with static HTML code and JSON data. The major impact of the approach of how angular handles its logic mean that structure and data are designed to be separated from each other. This results in templates (HTML) and data (which is fetched as JSON) bound together to provide a working and interactive webpage. Therefore the markup fetched from the server is meaningless on its own without Angular parsing it and you need to have a client that supports JavaScript. So it’s not a good idea to use angular if you’re building a website that relies on search engines to function. So if you’re building a web application, admin website or single-page website then you’ve chosen a the right tool for it.

How does Angular works?

Application logic and data are separated when using Angular. Application logic resides on client side and angular uses directives, bindings, filters , expressions etc to structure the application on client side.

Controllers, Services and Models are used to glue all the logic and data operations together. As mentioned, data and logic are separated so this means that your data (the dynamic stuff), your HTML templates (the static stuff), and your logic (the controllers and binding markup) work together to make the application work.

The majority of the data fetched for a HTML page is either redundant or stateless , so making it 100% static is a good idea right? Angular does this and it does it well.

So the good part  is that if all the static stuff can be cached for longer and your dynamic responses are smaller. This is great for caching server-side responses and greatly reducing the amount of work that the server has to do to generate the HTML response.

Getting Started:

Angular App:

You can have a entire web application as an angular app or you can have part of you web application as an angular app. Either case, in order to indicate the browser, that a certain portion of your web application is angular , you have to use  ng-App directive

Example:

<!DOCTYPE html>
<html>

<head>
<script src=http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js&#8221;></script>
</head>

<body>

<div ng-app=“”>
  <p>Name: <input type=“text” ng-model=“name”></p>
  <p ng-bind=“name”></p>
</div>

</body>
</html>

ng-App directive tells the browser that the div is the owner of the angular js application. Now that we have defined the angular app , lets move on to other parts of an angular app.

ng-mo

 

 

 

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