学习笔记-AngularJs（二）

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

posted @ 2015-09-15 14:51 24k-小清新阅读(3411) 评论(6) 编辑收藏举报

刷新页面返回顶部

态度决定一切

学习笔记-AngularJs（二）

公告