AngularJS, a JavaScript framework developed by a Googler and supported by Google has become quite a buzz word in past few months. More and more developers are using it and thus the community has grown significantly. How much you can do with few lines of code in Angular is mind-boggling. Any one with basic JavaScript, HTML background can start working in AngularJS without any hassle.
HTML works well when used to describe static documents, but it falls short when used to describe the "views" of a rich web application. This is just not something it was ever designed to support.Most JavaScript frameworks address this limitation by either abstracting away the HTML or requiring a large dose of hand-crafted DOM manipulation JavaScript code. AngularJS takes a different approach. Instead of hiding HTML and CSS, it embraces their strengths and extends them to make them suitable for describing dynamic views. The result is a workflow that should feel very familiar to any web developer and a JavaScript programming style that is surprisingly concise, clear, and focused.
Code for AngularJS applications is always organized into models, views, controllers, and (optionally) services.
Models are JavaScript objects that represent the data your application can access. Models are also used to represent the application's current state.
Views play two important roles. First, they are responsible for presenting the data from your models to the user in a visual and useful format. Second, they intercept generic user interactions–including clicks and option list selections–and translate them into application-specific actions. Views in AngularJS are defined declaratively using HTML and CSS.
Controllers define the actual behavior of your application (also called "application logic") and play a key role in connecting the right models to the right views.
Services are specialized objects that perform work on behalf of other objects. Services have many uses, from fetching remote data to providing an implementation of a useful algorithm. Services are intended to be highly reusable and are designed to be swapped easily with other similar services.
All this talk of philosophy and architectural elements probably seems pretty abstract at this point. But now that you know a bit more about the theory, you’re ready to start putting it into practice by building a real application.
Hello World!
Before we get into any theory, let us get our hands dirty with some actual Angular code. That way would learn a great deal of whats happening.
In order to write a hello world application in Angular, all we have to do is it include Angular JS JavaScript in our HTML document.
Next you need to signal the framework that it should treat your page as an AngularJS application.
Add the ng-app directive to the "body" tag like this:
Online Demo
Hello World, AngularJS - achchuthan.org
Write some text in textbox:
Hello! {{ sometext }}
ng-app
directive tells AngularJS that the "div" element is the "owner" of an AngularJS application.ng-model
directive binds the value of the input field to the application variable name.ng-bind
directive binds the innerHTML of the "p" element to the application variable name.{{ sometext }}
Note how we wrap our model value in double curly braces. This tell Angular to bind the value of model sometext in place of {{ sometext }}. Thus any change in sometext me model value changes the text inside "h1" tag
Post a Comment
Thank you for vising