Angular基础（一）

AngularJS有五个主要核心特性，如下介绍：

双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。
模板 —— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。
MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。
依赖注入 —— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
指令 —— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。

指令介绍：

AngularJS通过称为指令的新属性来扩展的HTML，带有前缀ng-，我们也可以称之为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。

Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

ng-app：用于告诉 AngularJS 应用当前这个元素是根元素。

ng-model：绑定了 HTML 表单元素到 scope 变量中。如果 scope 中不存在变量, 将会创建它。

ng-controller：用于为你的应用添加控制器。在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。

ng-change：告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

ng-class：用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-click：告诉了 AngularJS HTML 元素被点击后需要执行的操作。

<div ng-app="" ng-init="click=false">

    <button ng-click="click= !click">隐藏/显示</button>

     <div ng-hide="click">

         请输入一个名字：<input type="text" ng-model="name" />

        Hello <span ng-bind="name"></span>

     </div>

 </div>

ng-disabled：设置表单输入字段的 disabled 属性(input, select, 或 textarea)。如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

ng-init：初始化应用程序数据，也就是为AngularJS应用程序定义初始值。

ng-bind：告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。

AngularJS表达式

AngularJS框架的核心功能之一 —— 数据绑定，由两个花括号{{}}组成，可以把数据绑定到HTML，类似Javascript代码片段，可以包含文字、运算符和变量，通常在绑定数据中用到，表达式可以绑定数字、字符串、对象、数组，写在双大括号内：{{ expression }}。

可以看看代码：

<div ng-app="" ng-init="name='Hello World'">

  {{ name }}

</div>
指令ng-bind和AngularJS表达式{{}}有异曲同工之妙，但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。

<div ng-app="">

    请输入一个名字：<input type="text" ng-model="name" />

    Hello <span ng-bind="name"></span>

</div>

控制器

现在我们就用ng-controller指令来创建一个简单的控制器定义，如下所示：

<div ng-app="" ng-controller="MyController">

请输入一个名字：<input type="text" ng-model="person.name"> 

Hello <span ng-bind="person.name"></span> 

</div>    

<script>

function MyController($scope) {

   $scope.person = {

      name: "World"

   };

}

</script>

如上所述，我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性，那参数$scope是什么呢，代表什么意思呢。

现在我们就来解答MyController对象参数 —— $scope。

$scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。作用域呢，就是作为$scope的数据属性关联到DOM上的，并且能在需要调试的时候被获取到。

要明确创建一个$scope对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性。

所有$scope都遵循原型继承，这意味着它们都能访问父$scope们,对任何属性和方法，如果AngularJS在当前$scope上找不到，就会到父$scope上去找，如果在父$scope上也没找到，就会继续向上回溯，一直到$rootScope上，这个$rootScope是最顶级的$scope，它对应着含有 ng-app指令属性的那个DOM元素，也就是说根作用域关联的DOM就是ng-app指令定义的地方。

也就是说，拥有了$scope，我们就可以操作作用域内任何我们想要获取的对象数据。

巴特西

Angular基础（一）

AngularJS表达式

控制器

最新文章

热门文章