AngularJS Modules

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

讀, 查 : AngularJS Modules  //https://angular.io/docs/ts/latest/guide/ngmodule.html

maxthonsnap20170210113617

@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
Declarations
Providers
Imports
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 // https://material.angular.io/
Ionic // http://ionicframework.com/
AngularFire2 // https://github.com/angular/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.

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

 

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.

參: https://en.wikipedia.org/wiki/DWR_(Java)


  • 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

參: http://www.dojotoolkit.org

http://dojotoolkit.org/reference-guide/1.10/

4G

Web app 框架

20151210_pcdesk_compressed2

11款, 我只看Django. 學習中

http://goo.gl/4gVfsC

Django

是一个由Python写成的开源的Web应用框架

用MVC

主要目标是使开发复杂、数据库驱动的网站变得简单

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

代码:https://github.com/django/django

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

框架越來越多,學都學不完.

我能力,時間所及,有興趣的部分:

  • TouchStone.js
  • SCHEMAWORDPRESS PLUGIN BOILERPLATEENYO

    MOOTOR

  • THEMOSIS

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

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

%d 位部落客按了讚: