AngularJS AppModule (the Root module)

Setup 完之後, app 最少要有一個Appmodule, 也稱 the root module.

可以直接copy 這段程式碼 (pic1)

https://angular.io/docs/ts/latest/guide/appmodule.html

maxthonsnap20170219141715

(pic1)

  • @NgModule

    takes a metadata object that tells Angular how to compile and launch the application. //告知Abgular 如何編,如何啟動

@NgModule 下有3個陣列

    • imports — the BrowserModule that this and every application needs to run in a browser.
    • declarations — the application’s lone component, which is also …
    • bootstrap — the root component that Angular creates and inserts into the index.html host web page.
  • The imports array

Angular modules 能把不同的功能集合起來,

Add a module to the imports array when the application requires its features. // 需要什麼功能就加到 the imports array.

Browser module  放進  rootAppModule‘s imports array  如此 app 各功能才能瀏覽.

  • Only NgModule classes go in the imports array. Do not put any other kind of class in imports.

The import statements at the top of the file and the Angular module’s imports array are unrelated and have completely different jobs. // import 是在最上面,  imports array 是在NG module 下 , 別搞錯了

  • The declarations array

components, directives and pipes,   一定要宣告 (declarations),

  • The bootstrap array

啟動 app :  bootstrapping the root AppModule

  • Bootstrap in main.ts // 啟動

There are many ways to bootstrap an application. The variations depend upon how you want to compile the application and where you want to run it.

In the beginning, you will compile the application dynamically with the Just-in-Time (JIT) compiler and you’ll run it in a browser.

The recommended place to bootstrap a JIT-compiled browser application is in a separate file in the src folder namedsrc/main.ts

Copy 這段 (pic2)

maxthonsnap20170219151656

(pic2)

The AppComponent selector =my-app

so  在首頁(index.html)裡就是這個標籤 :<my-app>

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

 

 

Stanford CoreNLP – a suite of core NLP tools

這是一個 Sentiment Analysis 的工具.

  • a set of natural language analysis tools. It can give the base forms of words, their parts of speech, whether they are names of companies, people, etc., normalize dates, times, and numeric quantities, mark up the structure of sentences in terms of phrases and word dependencies, indicate which noun phrases refer to the same entities, indicate sentiment, extract particular or open-class relations between entity mentions, get quotes people said, etc.

語言,句子是可以分解,分析,分類 找出情緒傾向(人 時,地, 事件)

maxthonsnap20170219114627

用途

  • An integrated toolkit with a good range of grammatical analysis tools //語法分析工具
  • Fast, reliable analysis of arbitrary texts //文本分析
  • The overall highest quality text analytics
  • Support for a number of major (human) languages
  • Available interfaces for most major modern programming languages
  • Ability to run as a simple web service

這對人文,社會學科會有些影響吧.  文本分析都有工具可以處理了, 分析文本的情緒意向, 是愛是恨? 是贊成是反對? 是同意是不同意? 是支持或不支持?  高盛已有在用這工具了.

這工具是開源, 但注意若要轉用商用或用在自己軟件裡要申請授權(note1),

這工具,廣告公司,民調中心, 經濟政策研究單位會用的到.

  • Download at http://stanfordnlp.github.io/CoreNLP/download.html
  • 或 http://search.maven.org/#search%7Cga%7C1%7Ca%3A%22stanford-corenlp%22

 

(note1: Stanford CoreNLP is licensed under the GNU General Public License (v3 or later; in general Stanford NLP code is GPL v2+, but CoreNLP uses several Apache-licensed libraries, and so the composite is v3+). Note that the license is the full GPL, which allows many free uses, but not its use in proprietary software which is distributed to others.)

AngularJS setup for local development

1 要 install : Angular QuickStart seed , 這樣開發比較快

2 Setup a local development environment

2.1 要先install : node and npm (note1)
2.2 然後,

-Create a project folder (you can call it quickstart and rename it later).

-Clone or download the QuickStart seed (note4) into your project folder.

-Install npm packages. (note3)

-Run npm start to launch the sample application.

(note2)

Focus on the following three TypeScript (.ts) files in the /src folder.

  • Files outside src/ concern building, deploying, and testing your app. They include configuration files and external dependencies. // src/外的 是作app 部署測試用
  • Files inside src/ “belong" to your app. Add new Typescript, HTML and CSS files inside the src/ directory, most of them inside src/app, unless told to do otherwise. //所以 src/ 內的都是自己的app

src/ 裡有 3 files:

1.app/app.component.ts : 定義AppComponent, 這是root component.
2.app/app.module.ts : 定義 AppModule, the root module that tells Angular how to assemble the application.
3.main.ts : Compiles the application with the JIT compiler and bootstraps the application’s main module (AppModule) to run in the browser

  • 檔案結構看起來會像是這樣: (pic1)

maxthonsnap20170219085429

(pic1)

然後, 讀 : https://angular.io/docs/ts/latest/guide/learning-angular.html

 

(note1:Installing Node.js and updating npm //

https://docs.npmjs.com/getting-started/installing-node)

Node.js Download at https://nodejs.org/en/download/ )

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

(note3:  Node.js and npm are essential to modern web development with Angular and other platforms. Node powers client development and build tools. The npm package manager, itself a node application, installs JavaScript libraries.)

(note4:"the QuickStart seed" : 目的是作為本地開發的基礎, project folder 內有很多files.)

Apache Flink

這是個計算引擎, 號稱" 4G of Big Data" (note1), 快, 易用,開源, 效能佳, 但沒有儲存系統

  • Batch Processing
  • Interactive processing
  • Real-time stream processing
  • Graph Processing
  • Iterative Processing
  • In-memory processing

Flink is an alternative of Mapreduce, it processes data more than 100 times faster than MapReduce.

Flink is independant from hadoop but it can use hdfs to read, write, store, process the data. Flink does not provide its own data storage system.it takes data from distributed storage.

Flink  ecosystem:   (note2)

apache-flink-ecosystem-components

 Storage: 讀寫別家的資料庫大概都沒什麼問題

  • HDFS – Hadoop Distributed File System
  • Local-FS – Local File System
  • S3 – Simple Storage Service from Amazon
  • HBase – NoSQL Database in Hadoop ecosystem
  • MongoDB – NoSQL Database
  • RBDBMs – Any relational database
  • Kafka – Distributed messaging Queue
  • RabbitMQ – Messaging Queue
  • Flume – Data Collection and Aggregation Tool

以上都可

Deploy: 能分配部署資源 :

  • Local mode – On single node, in single JVM
  • Cluster – On multi-node cluster, with following resource manager
    • Standalone – This is the default resource manager which is shipped with Flink
    • YARN – This is very popular resource manager, it is part of Hadoop, introduced in Hadoop 2.x
    • Mesos – This is a generalized resource manager.
  • Cloud – on Amazon or Google cloud

Runtime :

the Distributed Streaming Dataflow, which is also called as kernel of Apache Flink. This is the core layer of flink which provides distributed processing, fault tolerance, reliability, native iterative processing capability, etc.

主從架構:

maxthonsnap20170216092524

 

特色:

  • Streaming – Flink is a true stream processing engine.
  • High performance – Flink’s data streaming Runtime provides very high throughput
  • Low latency – Flink can process the data in sub-second range without any delay
  • Event Time and Out-of-Order Events – Flink supports stream processing and windowing where events arrive delayed or out of order
  • Lightning fast speed – Flink processes data at lightning fast speed (hence also called as 4G of Big Data)
  • Fault Tolerance – Failure of hardware, node, software or a process doesn’t affect the cluster
  • Memory management – Flink works in managed memory and never get out of memory exception
  • Broad integration – Flink can be integrated with various storage system to process their data, it can be deployed with various resource management tools. It can also be integrated with several BI tools for reporting
  • Stream processing – Flink is a true streaming engine, can process live streams in sub-second interval
  • Program optimizer – Flink is shipped with an optimizer, before execution of a program it is optimized
  • Scalable – Flink is highly scalable. With increasing requirements we can scale flink cluster
  • Rich set of operators – Flink has lots of pre-defined operators to process the data. All the common operations can be done using these operators
  • Exactly-once Semantics – It can maintain custom state during computation
  • Highly flexible Streaming Windows – In flink we can customize windows by triggering conditions flexibly, to get required streaming patterns. We can create window according to time t1 to t5 and data driven windows.
  • Continuous streaming model with backpressure – Data streaming applications are executed with continuous (long lived) operators. Flink’s streaming engine naturally handles backpressure.
  • One Runtime for Streaming and Batch Processing – Batch processing and data streaming both have common runtime in flink
  • Easy and understandable Programmable APIs – Flink’s APIs are developed in a way to cover all the common operations, so programmers can use it efficiently.
  • Little tuning required – Requires no memory, network, serializer to configure

初看這Apache Flink, 電視台轉型需用到,以往直播用SNG車, 上衛星, 現在改串流技術,  光這樣成本就不知省多少,用途滿廣, 也可處理髒資料,推薦產品用, 作預測.

 

(note1: http://data-flair.training/blogs/apache-flink-production-fortune-500-companies-top-real-world-use-cases/)

(note2: data-flair.training/blogs/apache-flink-comprehensive-guide-tutorial-for-beginners/)

(Installation:

)

 

 

 

TensorFlowonSpark system architecure

teosorflow

不知哪些台企在用?

(Yahoo supercharges TensorFlow with Apache Spark)

 

Data Centers Without Borders: Hybrid Cloud And New Intelligence Transform The Modern Enterprise

Data Centers Without Borders: Hybrid Cloud And New Intelligence Transform The Modern Enterprise

converged and hyper-converged systems are and will continue to play an important role in simplifying and accelerating the building and operating of clouds."

‘A hybrid cloud strategy’ ,要掌握公有雲 私有雲的各優缺點, 往往" its internal IT infrastructure is not agile enough to meet its needs." ,

“leverage strengths of both public and private cloud – a hybrid cloud strategy – to best benefit their business and customers."

所以是企業的IT策略.

“the way the actual application workloads are being constructed." 這應該常讀洪教授的PO文應該清楚, 我blog也寫過, 遊戲業早就有這樣的負載平衡,分散式技術.

資源的充分使用, 應該有個類似的 utilization ratio, IT 應該有一系列的Matrix,

“software-defined infrastructures (SDI)"

“there is a tremendous opportunity to leverage specific software that is written as intellectual property and used to differentiate how organizations interact with their customers."

軟體,程式化, 客制化 有智財權 是企業差異化的關鍵,就是要靠這個.

讀完好像等於沒講,

但對於企業不見得資訊長對未來企業的資訊藍圖心中都很清楚,特別是很多後段的企業,因漏就簡的很多.

這篇文章目的是觀念,  用什麼雲 什麼data center都是企業的策略手段,能夠提生生產力,提升獲利,降低成本,提升用戶滿意度才是是目的. 要用哪一招, 這裡面有很多評估技術,

總而言之,"要有夠大的應用直接面對用戶’這些優化技術才有用武之地.

另外, 補充一篇文章:

混合雲計算的9大關鍵趨勢 (但我不太喜歡這文章的文筆), 私有雲有缺點 有限制,不夠靈活敏捷, 仍是有安全性問題,  公有雲以"容器"裝進私有雲的服務, 讓服務"可遷移化",  之前有寫過 Docker, OpenStake 即是雲服務的"平台化", “容器化". 未來漸漸都會混用,就是混合雲. 重點是"如何得到數據"  " 如何處理" “如何產生應用價值", 這也是企業資訊策略的一部份, 概念上是一貫的,但操作上細節很多.

競爭態勢也會曾過去價值鏈變成平台化的競爭型態.

“資安" 要小心.

 

 

 

 

 

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.

JavaScript

寫的不錯, 原來 node.js 發展有這麼多故事 (note1)

2011 ES5(JavaScript 語言標準──ECMAScript 第 5 版)

2011 Node.js/npm 出現 ES5 解決了很多關鍵問題,是 JavaScript 邁向成熟語言的分水嶺

2015 ES6(ECMAScript 第 6 版),  民主多了, 群眾智慧. 有些語法特色. 注意 “寫法" 和"重要特性".

  • “對 JavaScript 語言的掌握", 要熟,要細心

從npm挖寶, 技術死磕無效, 要會評估

有些工具:

  • JavaScript 程式碼檢查工具 : ESLint
  • JavaScript 單元測試框架: Jasmine 與 Mocha。
    更簡單、更模組化的單元測試框架 : Tape 與 AVA (由 Tape 演變而來、加入平行執行能力(因此能大幅縮短單元測試執行時間)

了解每樣工具, npm 及 GitHub 有超過 20 幾萬種 JavaScript 套件與各種工具, 需要一個KM 來管理這些工具,用太多也不好,太依賴, 要會評估用途和必要性. 用什麼就會要學什麼, 應用拉動學習.

(note1: https://buzzorange.com/techorange/2016/09/30/legend-of-javascript/)

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

 

團隊分工心智圖

maxthonsnap20170206112933

軟體產品大致是如此

%d 位部落客按了讚: