[Javascript] “在AngularJS中思考”如果我有一個jQuery背景?



Answers

命令式→聲明式

在jQuery中, 選擇器用於查找DOM元素,然後綁定/註冊事件處理程序。 當事件觸發時,該(必要的)代碼將執行以更新/更改DOM。

在AngularJS中,您想要考慮視圖而不是DOM元素。 視圖是包含AngularJS 指令的 (聲明式)HTML。 指令為我們在幕後設置事件處理程序,並為我們提供動態數據綁定。 選擇器很少使用,因此對ID(以及某些類的類型)的需求大大減少。 視圖與模型綁定(通過範圍)。 視圖是模型的投影。 事件更改模型(即數據,範圍屬性),以及投影這些模型的視圖“自動”更新。

在AngularJS中,考慮一下模型,而不是jQuery選擇的DOM元素來保存你的數據。 將視圖看作是對這些模型的預測,而不是註冊回調來操縱用戶看到的內容。

關注點分離

jQuery使用不顯眼的JavaScript - 行為(JavaScript)與結構(HTML)分離。

AngularJS使用控制器和指令(每個控制器和指令都可以擁有自己的控制器,和/或編譯和鏈接函數)來從視圖/結構(HTML)中移除行為。 Angular還提供服務過濾器來幫助分離/組織您的應用程序。

另請參閱https://stackoverflow.com/a/14346528/215945

應用設計

設計AngularJS應用程序的一種方法:

  1. 想想你的模型。 為這些模型創建服務或您自己的JavaScript對象。
  2. 想想你想如何展示你的模型 - 你的觀點。 為每個視圖創建HTML模板,使用必要的指令獲取動態數據綁定。
  3. 將控制器連接到每個視圖(使用ng-view和routing或ng-controller)。 讓控制器僅查找/獲取視圖需要完成其工作的任何模型數據。 盡可能使控制器變薄。

原型繼承

不用了解JavaScript原型繼承如何工作,就可以用jQuery做很多事情。 在開發AngularJS應用程序時,如果你對JavaScript繼承有很好的理解,你將避免一些常見的陷阱。 推薦閱讀: AngularJS中範圍原型/原型繼承的細微差別是什麼?

Question

假設我熟悉在jQuery開發客戶端應用程序,但現在我想開始使用AngularJS 。 你能描述一下必要的範式轉變嗎? 這裡有幾個問題可以幫助你構建一個答案:

  • 我如何構建和設計不同的客戶端Web應用程序? 最大的區別是什麼?
  • 我應該停止做什麼/使用什麼; 我應該開始做什麼/使用什麼?
  • 有沒有服務器端考慮/限制?

我沒有在jQueryAngularJS之間尋找詳細的比較。




jQuery is a DOM manipulation library.

AngularJS is an MV* framework.

In fact, AngularJS is one of the few JavaScript MV* frameworks (many JavaScript MVC tools still fall under the category library).

Being a framework, it hosts your code and takes ownership of decisions about what to call and when!

AngularJS itself includes a jQuery-lite edition within it. So for some basic DOM selection/manipulation, you really don't have to include the jQuery library (it saves many bytes to run on the network.)

AngularJS has the concept of "Directives" for DOM manipulation and designing reusable UI components, so you should use it whenever you feel the need of doing DOM manipulation related stuff (directives are only place where you should write jQuery code while using AngularJS).

AngularJS involves some learning curve (more than jQuery :-).

-->For any developer coming from jQuery background, my first advice would be to "learn JavaScript as a first class language before jumping onto a rich framework like AngularJS!" I learned the above fact the hard way.

祝你好運。




I find this question interesting, because my first serious exposure to JavaScript programming was Node.js and AngularJS. I never learned jQuery, and I guess that's a good thing, because I don't have to unlearn anything. In fact, I actively avoid jQuery solutions to my problems, and instead, solely look for an "AngularJS way" to solve them. So, I guess my answer to this question would essentially boil down to, "think like someone who never learned jQuery" and avoid any temptation to incorporate jQuery directly (obviously AngularJS uses it to some extent behind the scenes).




They're apples and oranges. You don't want to compare them. They're two different things. AngularJs has already jQuery lite built in which allows you to perform basic DOM manipulation without even including the full blown jQuery version.

jQuery is all about DOM manipulation. It solves all the cross browser pain otherwise you will have to deal with but it's not a framework that allows you to divide your app into components like AngularJS.

A nice thing about AngularJs is that it allows you to separate/isolate the DOM manipulation in the directives. There are built-in directives ready for you to use such as ng-click. You can create your own custom directives that will contain all your view logic or DOM manipulation so you don't end up mingle DOM manipulation code in the controllers or services that should take care of the business logic.

Angular breaks down your app into - Controllers - Services - Views - etc.

and there is one more thing, that's the directive. It's an attribute you can attach to any DOM element and you can go nuts with jQuery within it without worrying about your jQuery ever conflicts with AngularJs components or messes up with its architecture.

I heard from a meetup I attended, one of the founders of Angular said they worked really hard to separate out the DOM manipulation so do not try to include them back in.




jQuery的

jQuery makes ridiculously long JavaScript commands like getElementByHerpDerp shorter and cross-browser.

AngularJS

AngularJS allows you to make your own HTML tags/attributes that do things which work well with dynamic web applications (since HTML was designed for static pages).

編輯:

Saying "I have a jQuery background how do I think in AngularJS?" is like saying "I have an HTML background how do I think in JavaScript?" The fact that you're asking the question shows you most likely don't understand the fundamental purposes of these two resources. This is why I chose to answer the question by simply pointing out the fundamental difference rather than going through the list saying "AngularJS makes use of directives whereas jQuery uses CSS selectors to make a jQuery object which does this and that etc....". This question does not require a lengthy answer.

jQuery is a way to make programming JavaScript in the browser easier. Shorter, cross-browser commands, etc.

AngularJS extends HTML, so you don't have to put <div> all over the place just to make an application. It makes HTML actually work for applications rather than what it was designed for, which is static, educational web pages. It accomplishes this in a roundabout way using JavaScript, but fundamentally it is an extension of HTML, not JavaScript.




As a JavaScript MV* beginner and purely focusing on the application architecture (not the server/client-side matters), I would certainly recommend the following resource (which I am surprised wasn't mentioned yet): JavaScript Design Patterns , by Addy Osmani, as an introduction to different JavaScript Design Patterns . The terms used in this answer are taken from the linked document above. I'm not going to repeat what was worded really well in the accepted answer. Instead, this answer links back to the theoretical backgrounds which power AngularJS (and other libraries).

Like me, you will quickly realize that AngularJS (or Ember.js , Durandal, & other MV* frameworks for that matter) is one complex framework assembling many of the different JavaScript design patterns.

I found it easier also, to test (1) native JavaScript code and (2) smaller libraries for each one of these patterns separately before diving into one global framework. This allowed me to better understand which crucial issues a framework adresses (because you are personally faced with the problem).

例如:

  • JavaScript Object-oriented Programming (this is a Google search link). It is not a library, but certainly a prerequisite to any application programming. It taught me the native implementations of the prototype, constructor, singleton & decorator patterns
  • jQuery / Underscore for the facade pattern (like WYSIWYG's for manipulating the DOM)
  • Prototype.js for the prototype/ constructor/ mixin pattern
  • RequireJS / Curl.js for the module pattern/ AMD
  • KnockoutJS for the observable, publish/subscribe pattern

NB: This list is not complete, nor 'the best libraries'; they just happen to be the libraries I used. These libraries also include more patterns, the ones mentioned are just their main focuses or original intents. If you feel something is missing from this list, please do mention it in the comments, and I will be glad to add it.




Can you describe the paradigm shift that is necessary?

Imperative vs Declarative

With jQuery you tell the DOM what needs to happen, step by step. With AngularJS you describe what results you want but not how to do it. More on this here . Also, check out Mark Rajcok's answer.

How do I architect and design client-side web apps differently?

AngularJS is an entire client-side framework that uses the MVC pattern (check out their graphical representation ). It greatly focuses on separation of concerns.

What is the biggest difference? What should I stop doing/using; what should I start doing/using instead?

jQuery is a library

AngularJS is a beautiful client-side framework, highly testable, that combines tons of cool stuff such as MVC, dependency injection , data binding and much more.

It focuses on separation of concerns and testing ( unit testing and end-to-end testing), which facilitates test-driven development.

The best way to start is going through their awesome tutorial . You can go through the steps in a couple of hours; however, in case you want to master the concepts behind the scenes, they include a myriad of reference for further reading.

Are there any server-side considerations/restrictions?

You may use it on existing applications where you are already using pure jQuery. However, if you want to fully take advantage of the AngularJS features you may consider coding the server side using a RESTful approach.

Doing so will allow you to leverage their resource factory , which creates an abstraction of your server side RESTful API and makes server-side calls (get, save, delete, etc.) incredibly easy.






Links