angularjs基础

dk05408

浏览: 167046 次
性别:
来自: 上海

最近访客更多访客>>

xinhezai

changan258

飞天奔月

tuche

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

angularjs

1.ng-app

<html lang="en" ng-app>

ng-app指令标记了AngularJS脚本的作用域，在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。

2.AngularJS模板的核心功能——绑定

<p>Nothing here {{'yet' + '!'}}</p>

这个绑定由双大括号{{}}和表达式'yet' + '!'组成。

这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中，接下来的步骤我们将看到，DOM可以随着表达式运算结果的改变而实时更新。

AngularJS表达式Angular expression是一种类似于JavaScript的代码片段，AngularJS表达式仅在AngularJS的作用域中运行，而不是在整个DOM中运行。

3.视图与模板

<html ng-app>

<head>

  ...

  <script src="lib/angular/angular.js"></script>

  <script src="js/controllers.js"></script>

</head>

<body ng-controller="PhoneListCtrl">  
   <ul>

    <li ng-repeat="phone in phones">

      {{phone.name}}

     {{phone.snippet}} 

    </li>

  </ul>

</body>

</html>

ng-controller="PhoneListCtrl"

ng-repeat="phone in phones"是一个AngularJS迭代器。这个迭代器告诉AngularJS用第一个<li>标签作为模板为列表中的每一部手机创建一个<li>元素

js/controllers.js--->模型与控制器

'use strict';

/* Controllers */

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

控制器函数的作用域（$scope）

AngularJS的作用域理论非常重要：一个作用域可以视作模板、模型和控制器协同工作的粘接器。AngularJS使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分离，但是他们两者确实是同步的！任何对于模型的更改都会即时反映在视图上；任何在视图上的更改都会被立刻体现在模型中

3.ng-model/filter

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->

      Search: <input ng-model="query">

    </div>
    <div class="span10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query">
          {{phone.name}}
        <p>{{phone.snippet}}</p>
        </li>
      </ul>

       </div>
  </div>
</div>

数据绑定：这是AngularJS的一个核心特性。当页面加载的时候，AngularJS会根据输入框的属性值名字，将其与数据模型中相同名字的变量绑定在一起，以确保两者的同步性。

在这段代码中，用户在输入框中输入的数据名字称作query，会立刻作为列表迭代器（phone in phones | filter:query`）其过滤器的输入。当数据模型引起迭代器输入变化的时候，迭代器可以高效得更新DOM将数据模型最新的状态反映出来

使用filter过滤器：filter函数使用query的值来创建一个只包含匹配query记录的新数组。

ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。

3.Directives/Expressions

<!-- html -->

<ul>

    <li ng-click="hide_child = !hide_child">

        Item 1

        <ul ng-hide="hide_child">

            <li>Item child 1</li>

        </ul>

    </li>

</ul>

ng-click和ng-hide都是框架自带的Directives（指令），前者相当于给li标签提供了一个Event Handler，在该HTML元素（li）被点击的时候，会执行hide_child = !hide_child这个Expression（表达式）。我们先看一下ng-hide这个指令，它会根据赋值的表达式结果（布尔值）来控制该HTML元素是否要显示（通过CSS实现）。也就是说，如果hide_child这个变量如果是true，那么ul就会被隐藏，否则结果相反。

这里hide_child其实是$scope上的一个变量，对它的值的变更，也可以用controller控制器包装一个方法来实现，只不过现在的语句比较简单，直接写在了指令的赋值里面。

通过以上简单的代码分析，我们可以看到AngularJS两个比较明显的特点：

1.通过指令和表达式对DOM的操作进行了封转，只需简单的代码便可省去额外的JavaScript代码
2.指令和表达式的应用，只直接嵌套在HTML中的，这和jQuery推从的Unobtrusive JavaScript的代码风格有些背道而驰

分享到：

windows AngularJS引导程序angular-phonec ... | 项目中用Yeoman构建AngularJS

2015-04-10 14:32
浏览 454
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论