一、什麼是angularJS
angularJS是基于javascript的架構，所謂架構，自然就是封裝了很多功能，舉個例子，使用原生javascript，如果你要寫一個網頁幻燈片，你可能需要幾十行代碼，甚至為了不同浏覽器的相容性，你可能要上百行代碼，但是如果使用angularJS，你僅僅需要調用幾個函數就能完成。這些功能。也就是說angularJS封裝了很多套路。
如果你學過JQuery或你在糾結學JQuery還是Angular，那麼你一定和以前的我一樣，很想知道angular和jquery有什麼差別？我想說不論是他們的内部機制還是使用方法，他們都不是同一種東西。JQuery更多的像是一個函數庫，你使用它的感覺應該是是以對象，然後調用各種函數。angularjs不同，它有很多概念，比如：子產品、資料綁定、路由等。你以後會慢慢了解到，這裡我隻想強調，如果你學過JQuery，那麼在學angularJS的時候請不要用jquery和angular比較！，再不考慮基于jquery的其他架構的情況下，個人認為angularjs比jquery強大太多。個人認為如果學好了js，那麼jquery會比比angularjs好學，但是如果已經學了jquery，向angular的思維方式轉變會有困難，但不是不可克服，且一旦克服了思想轉變的困難，你會對angular的了解更深入，使用時，更信手拈來。
如果你是新手，你也知道jquery，那麼你可能會疑問，jquery和angularjs哪個好學？哪個有前景？這種問題千萬不要拿去問那些工作經驗豐富的大牛，因為你這麼比較就像在問，貓和狗哪個比較好養？這是不同的東西，不同的人各有所好，你沒辦法下定論。我隻能告訴你如果你希望你的代碼漂亮易維護，且你希望學了以後能堅挺相當長的一段時間，且你還是個web初學者，那麼我推薦你angularJS，至于jquery就讓他作為你閑暇時像看報紙一樣的去了解一下就好了。
二、我們需要先學會什麼？
你需要熟練javascript、HTML、CSS。不需要精通(也就是不需要你去摳細節用法)，但是要掌握基本用法。比如javascript如何定義變量、函數、以及基本運算符、對象等，最重要的就是DOM程式設計；HTML常見标簽的基本用法，這些标簽能有怎樣的顯示效果？CSS的屬性、選擇器等。你可以購買書籍，也可以查詢網站，這裡我不再提供相關資料，百度有很多。
三、所需開發環境
1.使用IDE
如果你程式設計經驗不豐富，英語不好，我推薦你使用國産的IDE——HBuilder。他使用簡單，功能方面中規中矩，不說很棒，但是至少對初學者而言它很容易上手，而且由于是國産，他的文檔都是中文的，非常詳細。安利一下他的官網連結http://www.dcloud.io/
如果你有豐富的程式設計經驗，你是其他方向的程式員準備向這個方向轉，那麼我推薦你使用JetBrains公司的WebStorm，他的界面非常漂亮，互動非常友好，唯一的缺點是沒有中文文檔。如果你做過安卓開發，用過谷歌官方的AndroidStudio，那麼你應該會很容易接受它，因為AndroidStudio就是基于該公司的IntelliJ IDEA的，而該公司的各個IDE界面基本統一。值得注意的是，如果你是學校老師或學生，你可以申請認證，他們免費為學生和老師提供他們的所有産品，這樣你就不需要去考慮怎麼破解的問題啦！！~~安利一下JetBrains的官網https://www.jetbrains.com/,學生和教師認證激活入口https://www.jetbrains.com/student/，學生和教師認證激活教程https://imlonghao.com/32.html
2.安裝AngularJS
開發工具選好了，接下來就是添加angularJS了，我首推使用CDN為你的項目引入angularJS你隻需要在head标簽内添加如下一行東西即可
<script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
這是又拍雲的CDN，也就是說你的項目不需要下在angular的js檔案，隻需要這樣子引入，那麼浏覽器在加載的時候會自動去這個連接配接加載angularjs的庫，友善快捷，實際生産中還能降低伺服器流量，缺點是電腦沒有聯網或這引用的伺服器找不到這個資源的話，你的網頁就用不了ng
當然你也可以下載下傳angularjs的檔案,缺點與上面相對，優點是離線也能在本機上運作
四、我的第一個angularjs應用
1.不使用angularJS的HTML界面
這裡我po出一些代碼，如果你看不懂沒關系，以後你會慢慢了解的。
首先我們不使用AngularJS（以後簡稱ng），編輯以下代碼，運作檢視效果
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>程式1</title>
</head>
<body>
<div>
name:<input placeholder="inputyourname" />
<br />
你的名字是 -
</div>
</body>
</html>
運作效果應該如下
2.使用了AngularJS的HTML界面
接着我們添加,ng子產品 ，使用ng的app元件和定義變量
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>程式1</title>
<!-- 引入angularJS -->
<script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="inputName='Funco_小風'"><!-- 定義變量inputName初始值為字元串'Funco_小風' -->
name:<input type="text" placeholder="inputyourname" ng-model="inputName" /><!-- 通過ng-model将該input标簽與變量inputName綁定 -->
<br />
你的名字是 -{{inputName}}<!-- 顯示變量inputName -->
</div>
</body>
</html>
顯示效果應該如下
同時，如果你修改輸入框内的字元，你應該會發現，下方顯示的字元串會同步改變
如果你學過jquery，通過上面的例子就應該已經發現ng與jquery在使用上最明顯的不同
你可以通過上方的代碼和注釋嘗試能否了解這個最簡單的ng程式，如果你完全無法了解，别着急，通過後面的學習你會慢慢了解。
但是，你應該至少能看懂代碼中的HTML标簽和标簽屬性是什麼，否則，你需要考慮回過頭深入學習HTML/CSS/JS