AngularJS 2.0 學習手冊

• Angularjs 1.x 升級到 Angularjs 2.x 中間的轉變

AngularJS 簡介

AngularJS 安裝

• angular-cli 工具介紹

起手式

• Hello World. Angularjs 2
• 手工 Hello World! 範例

Angularjs 基本觀念介紹

• Module
• Components
• Templates
• Metadata
• Data Binding
• Directives
  • ng-repeat 介紹
  • TESTING ANGULAR DIRECTIVES WITH CUSTOM MATCHERS
• Services
• Dependency Injection
• Pipes
• Interface
• Router
  • An Introduction to Component Routing with Angular Router

網路

• $http 網路資料攫取

Routing

FORM

• select、select-multiple 元件說明

表單驗證

• 數字部分：

<input name=“mobileNumber" ng-model="Number"
       ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/"
       required/>
<div ng-messages=“myForm.mobileNumber.$error">
  <div ng-message="required">This field is required</div>
  <div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>

網頁UI控制

• 回到網頁最上方

MAP

• Google Maps And Local Storage In Angular 2

資料庫＆CRUD

• Creating a Grocery List Manager Using Angular, Part 1: Add & Display Items
• MEAN Stack: Developing an app with Angular 2+ and the Angular CLI

認證

• Angular Facebook User Authentication
• Angular 4 Authentication With Auth0
• Simple Login and Registration in a NativeScript with Angular Mobile App
• Angular Authentication With OpenID Connect and Okta in 20 Minutes

訊息提示

• Display Local Notifications in a NativeScript Application with Angular
• https://pushjs.org/#

測試

• Writing Unit Tests in Angular 2

效能校調

• MAKING YOUR ANGULAR APPS FAST

相關工具

網站建置工具

• 分頁Directives

編輯工具

• Angular Augury

打包工具

• webpack
• 使用Docker建立AngularJS應用程式

CSS

• Material Design Lite

npm install material-design-lite --save

<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">

<!-- MDL JavaScript library  -->
<script src="/node_modules/material-design-lite/material.min.js"></script>

<!-- Material Design Icons  -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

• How to Add Bootstrap to an Angular CLI project

常見問題與解法

• nb-bind-html 內含 ng-click

參考資料

• Create a MEAN app with Angular 2 and Docker Compose
• 10 Angular and TypeScript Projects to Take You From Zero to Hero
• Learn Angular in 10 days