July 31, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Overview of AngularJS

  • February 10, 2014
  • By Dan Rigsby
  • Send Email »
  • More Articles »

What Is the Library/Framework

AngularJS is a client-side JavaScript framework, maintained by Google, which assists in building full web applications. HTML started as a declarative markup for building simple forms, but as developers expanded its use to build real world applications, HTML grew. However, it has never really embraced all of the features that an application framework can bring. AngularJS provides some of the missing pieces to build these rich 'desktop like' applications:

  • Data binding: As data is changed on a form, the objects behind the scenes are updated at the same time. The reverse is true as well. Such that if you change an object in JavaScript, every element that is bound to it will reflects its change.
  • Structure: Provides guidance about how services, directives, controllers, and modules are laid out.
  • Navigation/Routing: Navigation inside an AngularJS application will change the URL, however instead of going back to the server to render a new page, AngularJS will interpret the URL and dynamically change the current page. This makes large single page applications possible.
  • Testability: AngularJS ships with tests and provides documentation about how to write your own tests with Karma and Protractor.
  • Dependency Injection: Most of the core features can be changed with new injected components.
  • Separation of Concerns: Supports MV* styles like MVC and MVVM. This makes development and testing easier by separating the DOM from the processing logic.
  • Modularity: Achieved in many forms, but most notably with the concept of 'directives', which is a custom reusable HTML tag. Such as: '<my-custom-tag my-property="1"></my-custom-tag>'.

Keep in mind that AngularJS is more of a framework than a library. That means that it's not something you will want to include in every application. It is primarily used to build single-page applications, but it can be used with any application. It is somewhat opinionated in how you write and structure your code, but this leads to readable and maintainable code. Personally I like to think of AngularJS as a framework for building your own framework. While it offers a lot of features out of the box, its real strengths lie in the ability to extend it.

Why Is It Important?

    • It's maintained by a large organization (Google) that is starting to use it in many of its own properties. This not only adds "credibility", but demonstrates that the framework can be used in large scale applications.
    • It is currently one of the most popular 'frameworks' rivaling BackboneJS and EmberJS.
    • It was open sourced in October of 2010. So while it is still a modern framework, it has had years to get "battle hardened".

What Makes It Unique?

  • One of AngularJS's great strengths is that is based on emerging standards in HTML 5. Many of concepts like directives and routing directly draw from the standards.
  • Testability was built in from the beginning.
  • Offers a lot of features out of the box instead of having to bring in a lot of different libraries, which may or may not work well together.
  • It includes a subset of jQuery called jQuery Lite. You can bring in the entire jQuery framework or keep the simplified version.

Where Can You Get It?

AngularJS is maintained at http://angularjs.org/ and its GitHub page https://github.com/angular/angular.js. It is currently under a rapid release cycle where new builds are made public about once a week.

Documentation has grown over time and is now fairly complete: http://docs.angularjs.org/. AngularJS uses an extension of jsDocs called ngDocs to build its documentation from the code. This means that every version can have its own versioned documentation. Developers can also make use of ngDocs in their own applications to achieve similar documentation.

How to Use

Include a link to the AngularJS script in your document. This can be a link to a local file or to an edge cached CDN:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>

To make use of certain features like routing, animations, or touch, you will need to add links to the relevant additional scripts such as:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-touch.min.js"></script>

Your page must be defined as an AngularJS application by adding the 'ng-app' attribute to the root <html> element. Using the html doctype <!doctype html> is also recommended:

<!doctype html>
 <html ng-app>

Now you can set up your controllers and start using AngularJS. Here is a simple example using just data binding. Notice the 'ng-model' attribute on the input element, which tells AngularJS to bind the input to the 'yourName' property in JavaScript. In the h1 element you will see the 'mustache' syntax around the 'yourName' property. This tells AngularJS to output the currently value of the property to HTML. As you change the value in the input box, the h1 element will be updated:

<body>
 <div>
 <label>Name:</label>
 <input type="text" ng-model="yourName"
placeholder="Enter a name here">
 <hr>
 <h1>Hello {{yourName}}!</h1>
 </div>
 </body>

About the Author:

Dan Rigsby is a Software Developer and Technical Architect in Indianapolis, IN, specializing in .NET, JavaScript, NodeJS, and web technologies. 


Tags: JavaScript, web application, AngularJS




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel