<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="Hello" ng-controller="helloCtrl">
<input type="text" ng-model="name"/>
<p> {{name}}</p>
</body>
<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>學習angularJS一段時間了，也將angular成功的引入了兩個項目，今天，我就將我使用angular這半年的經驗，通過博客慢慢的記錄下。
一、什麼是angular?
AngularJS 重新定義了前端應用的開發方式。面對HTML和JavaScript之間的界線，它非但不畏縮不前，反而正面出擊，提出了有效的解決方案。
很多前端應用的開發框架，比如Backbone、EmberJS等，都要求開發者繼承此框架特有的一些JavaScript對象。這種方式有其長處，但它不必要地污染了開發者自己代碼的對象空間，還要求開發者去了解內存裏那些抽象對象。儘管如此我們還是接受了這種方式，因爲網絡最初的設計無法提供我們今天所需的交互性，於是我們需要框架，來幫我們填補JavaScript和HTML之間的鴻溝。
AngularJS 填上了這條鴻溝。
而且有了它，你不用再“直接”操控DOM，只要給你的DOM註上metadata（即AngularJS裏的directive們），然後讓AngularJS來幫你操縱DOM。
同時，AngularJS不依賴（也不妨礙）任何其他的框架。你甚至可以基於其它的框架來開發AngularJS應用。
它就這麼好用。聽着挺厲害？是挺厲害的。通過這個七步系列，我們會帶着你開始用AngularJS寫厲害的應用——不管你之前有沒有接觸過。跟着我們，我們會教你成爲一個專家級的AngularJS開發者。
不過首先我們得搞清楚：什麼時候該用AngularJS？
AngularJS是一個 MV* 框架，最適於開發客戶端的單頁面應用。它不是個功能庫，而是用來開發動態網頁的框架。它專注於擴展HTML的功能，提供動態數據綁定（data binding），而且它能跟其它框架（如jQuery）合作融洽。
如果你要開發的是單頁應用，AngularJS就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應用，都很能發揮AngularJS的長處。但是像遊戲開發之類對DOM進行大量操縱、又或者單純需要極高運行速度的應用，就不是AngularJS的用武之地了。
以上來此互聯網二、搭建angular環境
npm
npm install angular --savebower
bower install angular --save三、我們開始編寫一個簡單的angularAPP吧
<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>打開app.js寫入
var app = angular.module('Hello', []); //新建一個app模塊 叫hello ,[]後面的數組爲引入的其他模塊名，我們沒有其他模塊，爲空數組打開controller.js寫入
app.controller('helloCtrl', function ($scope) {
$scope.name = "菲爾";
});打開index.html 改變內容爲
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="Hello" ng-controller="helloCtrl"> <!--ng-app 指向你的app名 ng-controller指向你的controller名-->
<input type="text" ng-model="name"/> <!--ng-model定義或指向一個$scope變量，-->
<p> {{name}}</p> <!--與{{name}}ng-model中 name綁定，ng-model的值的取代{{name}}-->
</body>
<script src="bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
<script src="src/controller.js"></script>
</html>
嘗試改變一下input中的值
