AngularJS Modules

之前有寫 AngularJS(NGJS) 有8個block

讀, 查 : AngularJS Modules  //


@NgModule // It identifies the module’s own components, directives and pipes, making some of them public so external components can use them

1) The Root Module: guide introduced Angular Modules and the essentials of creating and maintaining a single root AppModule for the entire application.

Modules: 一個一個查,看,

Angular modularity (NGmodules)
The application root module
Bootstrap the root module
Resolve conflicts
Feature modules
Lazy loaded modules with the Router
Shared modules
The Core module
Configure core services with forRoot
Prevent reimport of the CoreModule
NgModule metadata properties

Angular Modularity

  • Angular modules library:

用: Material Design //
Ionic //
AngularFire2 //

Angular modules consolidate components, directives and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

至少要有一個 root module. AppModule in a file named app.module.ts.



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


用 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.

  • 架構:






(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.)


Ajax的2個開發框架 : DWR, Dojo

  • DWR-Direct web remoting

a Java open source library that helps developers write web sites that include Ajax technology. // 用ajax 寫網站

It allows code in a web browser to use Java functions running on a web server as if those functions were within the browser. //用 web server 上 java 的功能

It consists of two main parts:

1) Code to allow JavaScript to retrieve data from a servlet-based web server using Ajax principles. // 從 server 端取出資料

2) A JavaScript library that makes it easier for the web site developer to dynamically update the web page with the retrieved data. //易於更新網頁

DWR takes a novel approach to Ajax by dynamically generating JavaScript code based on Java classes.  // 用java 類別產生javascript

Thus the web developer can use Java code from JavaScript as if it were local to the web browser;

whereas in reality the Java code runs in the web server and has full access to web server resources.

For security reasons the web developer must configure exactly which Java classes are safe to export (which is often called web.xml or dwr.xml).

This method of remoting functions from Java to JavaScript gives DWR users a feel much like conventional RPC mechanisms like RMI or SOAP, with the benefit that it runs over the web without requiring web browser plug-ins.

DWR does not consider the web browser / web server protocol to be important, and prefers to ensure that the programmer’s interface is natural.

The greatest challenge to this is to marry the asynchronous nature of Ajax with the synchronous nature of normal Java method calls.

In the asynchronous model, result data is only available some time after the initial call is made. DWR solves this problem by allowing the web developer to specify a function to be called when the data is returned using an extra method parameter. This extra method is called CallBack Method. The value returned from the java function will be passed to the callback method.


  • Dojo tool kit:

an open source modular JavaScript library (or more specifically JavaScript toolkit) designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites



Web app 框架


11款, 我只看Django. 學習中





Django注重组件的重用性和“可插拔性”,敏捷开发和DRY(Don’t Repeat Yourself)法则


Tool: 2015年 12個超實用開發框架



  • TouchStone.js



大陸在網路技術上學得很快,  我常讀他們的網站.

多觀摩學習. 把時間用在有價值的事上.

%d 位部落客按了讚: