Welcome to Java4u

A Single Place for all Java Resources

Looking for something?

Subscribe to this blog!

Receive the latest posts by email.

.Just enter your email below if you want to subscribe!

Email

Tuesday, September 30, 2014

AngularJS : Introduction and Hello example





Angular JS is a JavaScript MVC framework created by Google that lets you build well structured, easily testable, and maintainable front-end applications that makes it easier to implement RIA web applications.

What is AngularJS?
AngularJS is based on the MVC pattern (Model View Control). Therefore AngularJS separates your RIA application into models, views and controllers.
The views are specified using HTML + AngularJS's own template language.
The models and controllers are specified via JavaScript objects and JavaScript functions.
Thus, the views are specified declaratively, as HTML normally , and the models and controllers are specified imperatively, as JavaScript normally is.
If you don't know the difference between declarative and imperative programming, don't worry. It is not important to know before learning AngularJS. Besides, it is pretty simple to find the definition on the web.

And Why Should I Use It?

  • If you haven’t tried AngularJS yet, you’re missing out. The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.
  • AngularJS extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates. You can also create your own directives, crafting reusable components that fill your needs and abstracting away all the DOM manipulation logic.
  • It also implements two-way data binding, connecting your HTML (views) to your JavaScript objects (models) seamlessly. In simple terms, this means that any update on your model will be immediately reflected in your view without the need for any DOM manipulation or event handling (e.g., with jQuery).
  • Angular provides services on top of XHR that dramatically simplify your code and allow you to abstract API calls into reusable services. With that, you can move your model and business logic to the front-end and build back-end agnostic web apps.
  • Finally, I love Angular because of its flexibility regarding server communication. Like most JavaScript MVC frameworks, it lets you work with any server-side technology as long as it can serve your app through a RESTful web API. But Angular also provides services on top of XHR that dramatically simplify your code and allow you to abstract API calls into reusable services. As a result, you can move your model and business logic to the front-end and build back-end agnostic web apps. In this post, we’ll do just that, one step at a time. 
Example : Hello , AngularJS 
 













Note  : The {{  }} are a declarative way of specifying data binding locations in the HTML. AngularJS will automatically update this text whenever the yourName property changes.

Watch another example


0 comments: