在接下來學習angularjs中，我按照的就是之前 學習筆記-AngularJs（一）所講的目錄來搭建一個學習的項目，做一個互聯網大佬人物簡介的例子，當然也可以使用angualrjs上面提供的官方例子，phonecat，其實大同小異，都是差不多的，可以用git下載下這個學習環境 git clone https://github.com/angular/angular-phonecat ，然后
cd angular-phonecat
node scripts/web-server.js
記住不要關閉命令行，就可以測試了！
這里先寫hello world開始：
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>
就這樣hello world就簡單地寫好了，{{'world'}}這里面就是一個表達式，這里這個表達式是個字符串，但我們要把它改成Hello * ，World可以動態改變任意字符串，可以這樣寫：
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{ yourname ||'World'}}!
</body>
</html>
ng-model綁定了一個yourname的變量（雙向數據綁定），這樣'World'即可以改變成其他的字符串了！那我們還想說把它得到的字符串用alert彈出來，可以怎么做：
html：
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="example2" ng-controller="Cntl1">
<h1>{{init}}</h1>
Name: <input ng-model="name" type="text"/>
<button ng-click="greet()">Greet</button>
</div>
</body>
</html>
js:
function Cntl1($window, $scope){ $scope.name = 'World';//實現數據雙向綁定 $scope.init = 'Hello xiaobin'; $scope.greet = function() { ($window.mockWindow || $window).alert('Hello ' + $scope.name); } }
<!--補充：表達式計算是發生在作用域中的。Javascript默認是以window為作用域的。AngularJS要使用window作用域的話得用$window來指向全局window對象。 比如說，你使用window中定義的alert()方法，在AngularJS表達式中必須寫成$window.alert()才行。這是為了防止意外進入全局作用域（各種bug的來源）而設計的。 -->
這里可以看到html的模板里面ng-model綁定了一個變量name，js里面的Cntl1控制器在scope作用域中也定義了一個那么變量$scope.name，這里就可以很深刻體現出數據的雙向綁定了，兩處的值的改變都會影響另外一個的值變化。上面給button綁定了一個ng-click指令，沒錯，里面的greet（）函數正是我們在控制器文件里面定義的函數，通過這種方式我們實現了視圖和控制器的交互，至於誰是模板，誰是控制器，上面的代碼已經很詳細！
那么如果是有這樣的另外要求，需要在視圖遍歷某個數組，那可以這樣做：
html:
<!doctype html>
<html ng-app>
<head>
<meta charset='utf8'/>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Cntl2" class="expressions">
{{hello}}
<br>
Expression:
<input type='text' ng-model="expr" size="80"/>
<button ng-click="addExp(expr)">Evaluate</button>
<ul>
<li ng-repeat="exprd in exprs">
[ <a href="" ng-click="removeExp($index)">X</a> ]
<tt>{{exprd}}</tt> => <span ng-bind="$parent.$eval(exprd)"></span>
</li>
</ul>
</div>
</body>
</html>
js:
function Cntl2($scope) { //$scope注入的作用域 var exprs = $scope.exprs = []; //這是通過$scope.創建的數組 $scope.expr = '3*10|currency'; //添加默認模型屬性，對應模板的input框中相對應有模型變量的默認值 $scope.hello = '小斌開始學習angularJs拉！'; $scope.addExp = function(expr) { exprs.push(expr);//壓入數組(push) }; $scope.removeExp = function(index) { exprs.splice(index, 1); //刪除某個數組項(splice) }; } //模型和視圖分離，但是他們兩者確實是同步的
這里感覺會比之前兩個例子有些復雜，這是希望通過在input框填寫內容，點擊確定按鈕，下面列表會多增加一項內容！這里面綁定的addExp和removeExp函數是執行增加內容項和刪除內容項的作用，每增加一個就會往exprs壓入一個數組項，在視圖是這樣輸出來的，通過ng-repeat = "exprd in exprs "添加到li標簽下，然后遍歷出來的。
補充：ng-bind指得是綁定某個內容，輸出到span標簽里面，對應的還有ng-template-bind，之后詳學http://t.cn/RUbL4rP！
$parent.$eval(exprd)指得是執行exprd，可以看一下上面的代碼， ‘3*10|currency’其實加了貨幣過濾器（angular自帶），至於$parent不是很理解，有知道的人就告訴我一下呢！