2小時讓你愛上前端

By  JasonXDDD

在開始前...

跟你說個小秘密

在場的你，可以說話

但是聊天傻笑最好不要讓我聽到

在場的你，請你說話

歡迎你隨時舉手問問題

在場的你，拜託

在結束之後，能帶走一點知識

不要每次都不帶走~我還要自己收拾乾淨XD

那麼，大家好

我是

罐罐XDD

JasonXDDD

跟大家一樣，我也是大學生

只不過入坑的比較早...

上大學我的第一個工作

接手畢業學長的網頁程式

於是我就這樣入坑了

主要專攻對象

  • framework UX
  • css template / js lib
  • angular 2
  • 碰過各種多媒體

什麼是前端??

前端還包括

  • 版面配置
  • 資料傳輸
  • UI / UX
  • SPA
  • RWD
  • ...

我們來聊聊，

前端人一定會碰到最頭痛的

坑

這麼多套件我該選甚麼??

假的

這麼多前端的套件

真的

只有學習是

今天，我就是要來帶你

重新認識 現代趨勢的JS套件

Angular 2

參考資料: Angular 2 開發框架介紹

ng2到底哪裡好?

  • 速度更快
    • 偵測變更: 比ng1還快10倍
    • render: 比ng1快5倍
    • 比ng1更小，載入更快
    • 支持async、server render
  • 支援多平台
    • browser、nodeJs、React Native、NativeScript 
  • 學習曲線更低
    • angular-cli

畫面上每個東西都是元件

LIVE DEMO

Install angular-cli

  1. 去安裝node.js
    • cmd裡有npm
    • npm -v 看版本
  2. cmd: npm install -g angular-cli
    • 打ng看有沒有說明
    • 打 ng -v 看版本
  3. cmd: ng new project
  4. cmd: cd projrct
  5. cmd: ng serve
  6. project run in 4200 port
    • localhost:4200

元件位置

放資源地方(Img、CSS、Fonts...)

環境變數

根元件，起始位置

根頁面，index

元件單元測試設定位置

模組位置

NG2 Project Structure

接著，就是LIVE DEMO了

以下來自保哥在今年Modern Web Conf 2016時演講的Slide，

就因為寫太好了，就拿來用了XD

 

Link: 快快樂樂學會 Angular 2 網站開發框架

我們來快快樂樂

學Angular2

npm install -g angular-cli

用指令來建學校的助手

首先，我夢幻中的教室長這樣

所以~我要建一個專案

ng new project_name

教室名稱

可是建出來卻是這樣

WTF? 人呢?

別急~我們來認識教室

別急~我們來認識教室

這是桌椅

這是黑板

你當我~白癡阿

不~因為這些都是模組

module

模組是幫助我們去建立環境的功能

像是要有桌椅、黑板~才能讓老師學生使用

接著，把教室的樣子丟進來吧

把靜態網頁放進去

那麼人到底在哪??

還記的大一學的JAVA、C+嗎??

慘不忍睹的過去...

我們要做一個class，

才能實作(new)一個物件

這邊也是如此，

我們要做一個class (學生產生器)

只需要

ng g c component_name

元件名稱，學生產生器的名稱

別忘了，我說過用指令建學校

就會產生一個物件了

我叫作小明

我的樣子放在 html 裡

我的資料放在 ts 裡

<- 他能幹嘛??

=>

小明

幫小明寫名牌

在html裡接ts資料

{{ name }}

用{{ }}取得物件的欄位

=>

小明想做動作

在html增加物件的事件

onclick  =>  (click)=""

去掉on，加( )，來改變ts裡的資料

小明還可以做...

  • [attr]=""  -> 改高矮胖瘦、衣服外觀...

 

  • [( prop )]=""  -> 小明可以讓你改外觀

tag的屬性，可以抓物件的資料

使用者輸入直接改變資料，直接改變樣式

所以，你現在有一個多功能的小明了XD

小明

教室一個人不夠阿，

我需要更多的小明。

for( int i=0; i < 5; i++)

forEach(var item in data)

for( let item of data)

*ngFor="let item of data"

要呼叫angular2的功能，加*

所以，

我只需要把不同的資料，

用ngFor分給不同的小明

小明

小名

小萌

曉明

看起來還不錯?

可是小明也想跟大家一樣

在底下滑手機XD

他需要連網，

你必須提供這模組給他

HttpModule

一樣，你要在產生小明之前，一起給他一支手機

constructor( http: Http )

他還需要看FB、Twitch、Youtube...

你要幫他準備好要抓資料的網址

http . get ( ' url ' )

恩，這影片不錯XD

我要訂閱他，

變成我的資料

訂閱??

http.get('url')

.subscribe( value => { ... })

於是，小明就會變得不一樣XD

=>

就會變成現在這樣的教室了

恭喜你，

你已經完成一個基本的Angular2作品了!!

當然這只是基本而已，

想知道更多嗎?? 點擊以下連結，開啟更多內容

https://www.facebook.com/jasonliu1022

所以我說，

前端是不是很吸引人??

假的

可是，你學會了，

你就可以掌握全世界的眼睛

XD

延伸資料~

偉哉保哥~讚嘆保哥~

 

我的連絡資訊~

有任何想入坑的人歡迎找我聯絡XDD

P.s因為Blog目前正在建置，可能會有問題

QA

歡迎加入前端行列吧XD

THE END

2小時讓你愛上前端

By Jason Liu (罐罐)

Made with Slides.com

2小時讓你愛上前端

  • 503

More from Jason Liu (罐罐)