【體驗jQuery和AngularJS的不同點及AngularJS的迷人之處】人們體驗中的痛點

來源:建站 發布時間:2018-09-09 03:55:08 點擊:

AngualrJS是一個很貼心的web應用框架。它有很不錯的官方文檔和示例;經過在現實環境中的測試著名的TodoMVC project,它在海量的框架中脫穎而出;而且網上到處都是很不錯演示或者展示。但是對于一個沒有接觸過和AngularJS相似的框架而且還是幾乎都在使用像jQuery這樣的JavaScript類庫的開發者來講,要從jQuery的思想轉變成AngularJS的思想是有點困難的。至少對于我來說是這樣的,所以我想要分享一些學習筆記希望幫到一些開發者。

本篇通過jQuery和Angular兩種方式來實現同一個實例,從而體驗兩者的不同點以及AngularJS的迷人之處。

首先當然需要引用jquery.js和angular.js文件。

■ 使用jQuery讓寫一個簡單的click事件

JQuery Button

I am jquery content

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

如果我們想讓更多的div通過同一個點擊事件實現toggle呢?

--首先要在頁面中添加div,然后在js中添加相應的代碼 JQuery Button

I am jquery content

I am jquery content1

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

在AngularJS中又是怎樣的一種情況呢?

■ 使用Angular來寫一個簡單的click事件

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; } })

如果我們想讓更多的div通過同一個點擊事件實現toggle呢?

--我們只要在頁面中添加一個div,通過ng-hide屬性來聲明

Angular Button

Angular content

Angular content1

以上,通過簡單的例子,來比較jQuery和Angular的不同之處,我們可以發現:AngularJS中通過聲明的方式來應對變化,相比jQuery,AngularJS應對變化的成本更低也更靈活。

推薦訪問:不同點 之處 迷人 體驗jQuery和AngularJS的不同點及AngularJS的迷人之處 js和jquery的區別
上一篇:汽車后市場的成功模式之本地一體化自營 自營配送模式
下一篇:最后一頁

Copyright @ 2013 - 2018 易啊教育網_免費學習教育網_自學.勵志.成長! All Rights Reserved

易啊教育網_免費學習教育網_自學.勵志.成長! 版權所有 湘ICP備11019447號-75

幸运赛车前三稳赚技巧