AngularJs-Javascript MVC Framework

Source: Internet
Author: User

In June, google released AngularJs 1.0 stable version,
 

And declared: AngularJS allows you to expand the HTML syntax to clearly and concisely represent components in the application, and allows you to use standard HTML as your template language, angularJS can automatically synchronize data from the UI (View) with JavaScript (model) through bidirectional data binding.
I started to contact AngularJs and came to the new project team in March. At this time, AngularJs is still in the 0.8 unstable version, which has already been used in the project and this framework has been applied to the entire UI end of the project, the server is also an unstable web api. I really admire the team's courage and enthusiasm for the new technology. Fortunately, everyone can control it well. This is the first time I tried a project full of unstable technologies.
Go back to the topic and check out an official instance:
<! Doctype html>
<Html ng-app>
<Head>
<Script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
</Head>
<Body>
Your name: <input type = "text" ng-model = "yourname" placeholder = "World">
<Hr>
Hello {yourname | 'World '}}!
</Body>
</Html>
Demo:
Your name:
Hello {yourname | 'World '}}!
Note: any character entered in the input box will be immediately bound to the Update page.
The ng-model command (directive) is used to bind yourname to the model scope attribute.
Use an expression to bind yourname to text information.
Here, we only need to listen to any dom time, because AngularJs is built in.
The AngularJs program is divided into three parts: Template, presentation layer logic, and data (model ).
Template: the ui view code written in html and css contains AngularJs commands and expressions, which are eventually compiled and appended to the dom tree by AngularJs compilation mechanism. The directive of AngularJs can be freely expanded by us.
Presentation Layer logic: includes application logic and behavior. Use javascript to define the View Controller logic. As the MCV framework in AngularJs, we do not need to add dom-level event listening in the Controller. These are already built in AngularJs. AngularJs automatically redirects an Action logic on the scope after the dom Event of the ui node occurs.
Data: viewobject needs to be referenced by AngularJs Scope (as a service in 1.0), so that any type of javascript Object, array, basic type, and object can be used. AngularJs will automatically update the Model asynchronously, that is, when the ui changes, it will automatically refresh the model (mode), and vice versa, it will automatically refresh the ui when the model changes. Here we do not need to define some column methods, such as getter and setter.
The following is an official view:

At the same time, AngularJs provides us with some useful services for columns, and allows us to add services for our specific businesses, providing underlying ajax, caching, URL routing, and browser abstraction services, and we can use AngularJs injection mechanisms for any combination of these services. AngularJs is also a highly testable javascript framework. You can see that in the official example, there is a testing program that provides the BDD (behavior-driven) development framework.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.