在接下来学习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不是很理解，有知道的人就告诉我一下呢！