標籤：

新手小白想系統性學習angular2，不知從何學起，求大神指點？

01-21

angular2

  • TypeScript：

    • 介紹 | TypeScript Handbook（中文版）
    • Quick start · TypeScript
  • ECMAScript6:

    • ECMAScript 6入門
  • Angular2:

    • 一套框架，多種平台
  • Webpack:

    • Introduction · Webpack
    • 介紹 | Webpack 中文指南
    • GitHub - ruanyf/webpack-demos: a collection of simple demos of Webpack
    • 詳解前端模塊化工具-Webpack
  • Starter:

    • GitHub - angular/quickstart: Angular 2 QuickStart
    • GitHub - AngularClass/retain-app: Free Angular 2 Fundamentals Course by @AngularClass
    • GitHub - AngularShowcase/angular2-sample-app: Sample application built with Angular 2
    • GitHub - AngularClass/angular2-webpack-starter: An Angular 2 Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod, HMR, Async/Lazy Routes), Material Design, Karma, Protractor, Jasmine, Istanbul, TypeScript 2, TsLint, Codelyzer, Hot Module Replacement, @types, and Webpack 2 by @AngularClass
    • GitHub - topheman/angular2-sandbox: Mixing Angular2 and RxJS, using @ngrx/store for state management and Webpack for bundling
    • GitHub - akveo/ng2-admin: Angular 2 admin dashboard framework
  • Electron/NWjs:

    • Electron - Build cross platform desktop apps with JavaScript, HTML, and CSS.
    • NW.js
    • GitHub - steve-perkins/MediaGallery-electron: A media viewer desktop application, written to explore Electron and TypeScript development.
    • GitHub - DenisKolodin/tsng2: Minimal TypeScript + Angular 2 (RC4) + Electron (optional) Project
    • GitHub - joaogarin/angular2-electron: Electron app running with angular2 and webpack
    • GitHub - bsanth/electron-angular2: Electron starter app with Angular 2
    • GitHub - auth0-blog/angular2-electron
    • GitHub - c4wrd/angular2-electron-boilerplate: Simple boilerplate for electron, with an easy to use development flow.
    • GitHub - rajayogan/angular2-desktop: A simple application demonstrating how to make desktop apps using Angular 2 and electron.
    • GitHub - kisPocok/nw-angular-example

花一周通讀一遍官網上 https://angular.cn 的教程，對各章內容有個大致印象，不用全記住。

然後做個開源項目，帶路由、表單的Master/Detail結構的最簡需求就可以了。

最後如果公司有非關鍵業務上的小型項目就拿來試驗，邊寫邊學。不過關鍵問題是盡量別自己學，帶動別人一起。特別是爭取Java/c#等資深的後端程序員一起，你會發現他們在ng2領域能給你很多幫助。

遇到實在解決不了的問題到微信公眾號 Angular中文社區 來留言提問。

回復另一個問題時看到這個問題，順帶回復。

排名靠前的答案不適合小白新手，也不是一個學習路徑。

點贊的還不少。（連Electron都出來了，不做跨平台桌面應用，新手學習這個做啥？）

前端新手一上來就Angular 2，單就入門的TypeScript的OO（面向對象）思想就夠你累的。

---

建議

如果你：

是C#，Java 等有OO經驗的開發人員，已經熟悉前端基礎的，是可以考慮直接系統學習的，參考另一答案【 如何選擇正確的angular2學習曲線？ - 吳鹽以兌的回答 】

不然的話：

1. 先學好 HTML，CSS， Javascript，英語

這是基礎，小平學生水平，但路要一步步走，要想當科學家，先作為夢想。

不打算學英語的，建議不要從事軟體開發。

2. 然後再學習一些優秀的庫，Jquery, Lodash 等 | 同時把工具使用溜了

這個也重要，Jquery沒過時，Lodash沒過時，這些很簡單，但有利於紮實基礎，理解DOM，理解函數。

工具包括： 科學上網，google，Atom, VS code, Chrome 的 Development tools等。

3. 然後再學習使用一些框架，如 Bootstrap， jQuery UI，Dojo

學習這些，你可以明白模塊化，事件，非同步Ajax等等內容。

當然還有ExtJS, YUI, Kissy什麼的不建議去看了，前端的趨勢是組件化，你的目標應該瞄前，其中，Dojo已經很複雜了，適合企業級應用。

4. 然後，了解組件化思想，再學習Angular 2.

然後再看這個 【 如何選擇正確的angular2學習曲線？ - 吳鹽以兌的回答 】

總之，新手不要先學 Angular 2, 欲速則不達。 不要著急，穩紮穩打才有可能成為高手。

如果實在想試試，學完1，2後，哪怕你先試下 尤神 寫的 Vue.js 也寫可以，因為Vue.js 重點在View，其涉及的概念量遠遠小於Angular 2，同時還可以理解下啥叫 MVVC。同時，輕易不要去學React，那是另外的路與坑。

----

臨時寫的，細節不一定精準與完善，但大體方向與主要內容沒問題，如有必要再細寫。

最近開始學習 ng2 新建了一個 Angular2 興趣小組的微信群 加了一些知乎相關領域的活躍分子 有興趣的同學私信我

雪狼 老師也在群里哦!

可以看看我寫的教程，自以為比官網的適合作為教程

http://www.jianshu.com/p/9af9f203e0b1

2017.8.2更新：

本人主講的 Angular 慕課上線，有一定 Angular 基礎的同學可以來圍觀一下

Angular進階技術打造企業協作平台-慕課網實戰

作為一個CS方向純粹的小白（連CSS,HTML都剛看完教程的那種），進公司實習被要求用Angular4.0寫界面。經歷了兩周的掙扎後，發現大多數網站都對純新人不是很友好。幸好發現了兩個比較友好的網站，分享一下。

關於前面的各位提到的很多，比如官方文檔，我第一次看他們官方文檔真的看的一臉懵逼，各種模塊，組件，裝飾器，這都是啥東西啊。。完全不清楚他們每一步是什麼意思，代碼中各個文件之間是什麼關係，import，export的到底是啥。反正我是掙扎著看了三遍都沒看太懂，只能每次看懂多一點點。。很痛苦。

另一位答主說的挺好的，但是要學jquery，bootstrap，Typescript，ES6之類的，還不能略懂。。我在菜鳥教程裡面把他們都過了一遍，但是還是挺懵逼的，可能光看那個沒啥用吧。

另外我把網上的視頻資料也看過了，大漠窮秋老師的講的好簡略。。可能是針對學過AngularJS的人的吧，經常會省略一部分，我看了一些沒看太懂。另外youku上有個po主也是講angular2的，我看了下覺得講的不是特別的好，不太詳細。英文有一些網站有視頻資源，我沒細看。

還有各種各樣的分享與博客，看過有收穫，但是更多的是看不懂。。。

最後分享我覺得比較好的兩個網站。一個是匯智網的angualr2課程，它裡面把每個文件的關係講的很清楚，反正我看完後能看懂很多的代碼了，不像以前不知道寫這一段是為什麼。不過看到form之後感覺太難了就粗略的看了下。。

另一個是udemy上的Angular4課程。（udemy我感覺要掛VPN才能緩衝的動視頻，不知道為什麼）這個課程好像也是知乎是某位知友介紹的，reddit上面評價很高，我感覺講的真的很詳細，特別詳細。不過是全英文無字幕的，語速嘛公開課語速都不會快，大多數都很容易聽懂。

上面是我為真正的零基礎的孩子提供的學習思路，轉專業的孩子傷不起啊，好多教程說的話都默認你是會了啥啥啥的，但是我什麼都不會。。這段時間也是跳了很多坑，幸好最後逼著自己還是入了門。以上~

官網http://angular.io

中文官網http://angular.cn

不會的問題就stackoverflow

別人的例子項目可能都已經過時了，所以跟著官網學比較好^_^

1、快速起步 - ts

2、教程: 英雄指南

3、《邁向Angular 2：基於TypeScript的高性能SPA框架》([保]明科·基徹（Minko Gechev）)【摘要 書評 試讀】

PS：NG2 比 NG1 少了很多概念，是一門非常值得投入精力學習的技術，參考：如何評價 Angular 2.0 Final Release 的發布？ - Trotyl Yu 的回答

另 DI 那塊不用太糾結，會用就行。

很多免費的內容，官網、angularjs論壇、個人博客，如果這些東西你還搞不定，那我建議你看我寫的這個吧：

零起步學習angular2_angularjs教程_匯智網

新手小白想學習任何框架都是耍流氓，剛何況angular學習曲線這麼抖的玩意。

新手們先去學習js。。。求求你們了

  1. 學習ES6，可以看阮一峰老師的ECMAScript 6入門
  2. 概覽https://angular.cn，不必精讀，遇到問題時知道去哪兒找就行了
  3. 跟隨我的入門教程敲一遍代碼，跟其他教程不一樣的是，我是一邊寫示例代碼一邊總結教程，每一行代碼都是我親手敲的，我也不知道下面會踩到什麼坑，遇到的每一個坑都會說一下，每一步都有對應版本的示例代碼，自我感覺還是比較接地氣的。。。 Angular 2從零開始 - 00.概述amp;HelloWorld Angular 2從零開始 - 01.模板引擎和樣式預處理器 Angular從零開始 - 02. live reloading amp; webpack dev server ....

;-)

先到 youtube 找幾個Angular的視頻看看，比如Mosh的，這樣對A2會有直觀的認識。

然後再看看官方的tutorial（quickstart），git clone下來，跟著步驟試一遍，對視頻曾經提到的概念有更多的理解。

如果不是SPA，其實不用精通A2啥的，Yii2/http://Asp.Net MVC寫網站方便的很。

以上是我這兩天的經驗：）

nothing is impossible

推薦閱讀：

※如何了解Angular（非Angular.js）的實現原理？
※angular2中數據狀態管理方案有哪些？
※PC 前端是不是沒希望了？
※Angular和React哪個更有前景？

TAG:Angular? |