AngularJS

It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

The framework adapts and extends traditional HTML to present dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS de-emphasizes explicit DOM manipulation with the goal of improving testability and performance.

目標:

  • to decouple DOM (note1)manipulation from application logic. The difficulty of this is dramatically affected by the way the code is structured.
  • to decouple the client side of an application from the server side. This allows development work to progress in parallel, and allows for reuse of both sides.
  • to provide structure for the journey of building an application: from designing the UI, through writing the business logic, to testing

Angular

用 the MVC pattern,  presentation, data, and logic components 分離

dependency injection, 減少 server side 負荷,  像用 view-dependent controllers, to client-side web applications.

  • Scope = binding 這算是最重要的特色吧

(Scope in computer science describes when in the program a particular binding is valid)

“MVC" architecture, the scope forms the “Model", and all variables defined in the scope can be accessed by the “View" as well as the “Controller". The scope behaves as a glue and binds the “View" and the “Controller".

  • Two-way data binding
  • largely relieving the server backend of templating responsibilities.

Instead, templates are rendered in plain HTML according to data contained in a scope defined in the model.

  • The $scope service in Angular detects changes to the model section and modifies HTML expressions in the view via a controller.

Likewise, any alterations to the view are reflected in the model.

This circumvents the need to actively manipulate the DOM and encourages bootstrapping and rapid prototyping of web applications.

AngularJS detects changes in models by comparing the current values with values stored earlier in a process of dirty-checking, unlike Ember.js and Backbone.js that trigger listeners when the model values are changed.

  • 架構:

angular-js-architechture

這架構中有8個blocks

 

(https://en.wikipedia.org/wiki/AngularJS)

(https://angular.io/docs/ts/latest/guide/architecture.html)

(note1: The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.)

 

廣告
新文章
發表留言

1 則迴響

  1. AngularJS Modules | Joe

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: