Experience the differences between jQuery and AngularJS and the charm of AngularJS _ AngularJS-js tutorial

Source: Internet
Author: User
AngualrJS is a very considerate web application framework. This article uses jQuery and Angular to implement the same instance, in this way, you can experience the differences between the two and the charm of AngularJS AngualrJS is a very considerate web application framework. It has good official documents and examples. After testing the famous TodoMVC project in the real environment, it stands out in a massive number of frameworks, and it is well demonstrated or displayed everywhere on the Internet. However, for developers who have never touched a framework similar to AngularJS and are still using JavaScript class libraries such as jQuery, it is a little difficult to change from jQuery to AngularJS. At least for me, so I want to share some study notes to help some developers.

This article uses jQuery and Angular to implement the same instance, so as to experience the differences between the two and the charm of AngularJS.

First of all, you must reference the jquery. js and angular. js files.

■ Use jQuery to write a simple click event

JQuery Button

I am jquery content

$(function(){$("#jquery-button").click(function(){$('#jquery-content').toggle();})})

What if we want more p to implement toggle through the same click event?

-- First, add p to the page, and then add the corresponding code in js.JQuery Button

I am jquery content

I am jquery content1

$ (Function () {$ ("# jquery-button "). click (function () {$ ('# jquery-content '). toggle (); $ ('# jquery-content1 '). toggle ();})})

What is the situation in AngularJS?

■ Use Angular to write a simple click event

Angular Button

Angular content

var app = angular.module("app",[]);app.controller("AppCtrl", function(){var app = this;app.isHidden = false;app.toggle = function(){app.isHidden = !app.isHidden;}})

What if we want more p to implement toggle through the same click event?

-- We only need to add a p to the page and declare it through the ng-hide attribute.

Angular Button

Angular content

Angular content1

We can use a simple example to compare the differences between jQuery and Angular. We can find that AngularJS responds to changes through declaration. Compared with jQuery, angularJS has lower and more flexible costs to cope with changes.

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.