AngularJS入门讲解1:angular基本概念

AngularJS应用程序主要有三个组成部分:

模板(Templates)

模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!

应用程序逻辑(Logic)和行为(Behavior)

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

模型数据(Data)

模型是从AngularJS作用域对象的属性引申的。模型中的数据可以是Javascript对象、数组或基本类型,他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。

举个例子:

<!doctype html>
<html ng-app>
    <head>
        <script src=""></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
    </body>
</html>

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

通过script标签载入angular.js脚本时,angular监听了DOMContentLoaded事件,当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本,angular.js脚本运行后将会寻找含有ng-app指令的HTML标签,该标签即定义了AngularJS应用的作用域。

输入框<input ng-model="yourname" />元素绑定到一个叫yourname的模型中。

双大括号标记将yourname模型添加到页面中。双大括号{{}}实现绑定的效果,告诉AngularJS需要运算其中的表达式并将结果插入DOM中。AngularJS表达式是一种类似于JavaScript的代码片段,AngularJS表达式仅在AngularJS的作用域中运行,而不是在整个DOM中运行。

现在你试着在输入框中键入您的名称,您键入的名称将立即更新显示在页面中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量(一个方向),模型变量的任何更改都会立即反映到页面中(另一方向)。

我们再来看一个稍微复杂点的例子:

<html ng-app>
<head>
  ...
  <script src="https://www.linuxidc.com/lib/angular/angular.js"></script>
  <script>
  function PhoneListCtrl($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."}
      ];
  }
 </script>
</head>
<body ng-controller="PhoneListCtrl">

<ul>
    <li ng-repeat="phone in phones">
      {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>
  </ul>
</body>
</html>

这里我们使用ngRepeat指令和两个双大括号包裹起来的AngularJS表达式——{{phone.name}}和{{phone.snippet}}。

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

包裹在phone.name和phone.snippet周围的双大括号标识着数据绑定。和常量计算不同的是,这里的表达式实际上是一个数据模型的引用,这些数据模型我们在PhoneListCtrl控制器里面定义就好了。

在PhoneListCtrl控制器里面初始化了数据模型,尽管控制器看起来并没有起到什么控制的作用,但是它在这里起到了至关重要的作用。通过给定我们数据模型的定义,控制器允许我们建立模型和视图之间的数据绑定。

我们是这样把表现层,数据模型联系在一起的:PhoneListCtrl——控制器方法的名字,和<body>标签里面的ngController指令的值相匹配。手机模型的数据此时与注入到我们控制器函数的作用域($scope)相关联。这个控制器的作用域对所有<body ng-controller="PhoneListCtrl">标记内部的数据绑定有效。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/c7ff144d7b5665aff87cf4f7caae0449.html