AngularJS

来源：互联网发布：淘宝客服不理人编辑：程序博客网时间：2024/06/07 07:26

今天看视频学习了AngularJS部分，了解最基础的知识，下面是简单的复习知识点。

AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

MVC
Model模型：一般用来处理数据（读取/设置），一般指操作数据库。
View视觉：一般用来展示数据，比如通过HTML展示。
Controller控制器：一般用做连接模型和视图的桥梁。

定义模块
AugularJS提供一个全局对象angular,在此对象下有N种方法
其中module方法可以帮我们创建一个模块。

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

定义控制器

app.controller('appController',['$scope',function($scope){}]);

需要两个参数，第一个参数表示控制器名称，第二个参数是一个数组，这个数组除最后1个单元是函数外，其余都是字符串，标明此控制器的依赖关系。
通过为HTML标签添加ng-controller属性并赋值相应的控制器（Controller）的名称，就确立了关联关系。

内置指令
ng-app
用于告诉 AngularJS 应用当前这个元素是根元素。
所有 AngularJS 应用都必须要要一个根元素。
HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。

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

<element ng-controller="expression"></element>

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

<div ng-app="myApp" ng-controller="myCtrl">    <input ng-model="name"></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.name = "John Doe";});</script>

ng-repeat
用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。

<body ng-app="myApp" ng-controller="myCtrl"><h1 ng-repeat="x in records">{{x}}</h1><script>var app = angular.module("myApp", []);app.controller("myCtrl", function($scope) {    $scope.records = [        "教程1",        "教程2",        "教程3",        "教程4",    ]});</script></body>

ng-switch
根据表达式显示或隐藏对应的部分。
对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。
你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

    <div ng-controller="DemoController">        <ul>            <li ng-repeat="item in items" ng-switch="item">                <span ng-switch-when="css">{{item}}</span>            </li>        </ul>    </div>    <script>        var App = angular.module('App', []);        App.controller('DemoController', ['$scope', function ($scope) {        $scope.items = ['html', 'css', 'js'];        }]);    </script>

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

<button ng-click="count = count + 1" ng-init="count=0">OK</button>

ng-show
在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。

<element ng-show="expression"></element>

ng-hide
在表达式为 true 时隐藏 HTML 元素。ng-hide 是 AngularJS 的预定义类，设置元素的 display 为 none。

<element ng-hide="expression"></element>

ng-if
用于在表达式为 false 时移除 HTML 元素。
如果 if 语句执行的结果为 true，会添加移除元素，并显示。
ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

<element ng-if="expression"></element>

ng-src
覆盖了元素的 src 属性。
如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。
ng-src 指令确保的 AngularJS 代码执行前不显示图片。

<img ng-src="string"></img>

ng-href
覆盖了原生的元素 href 属性。
如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 而不是 href。
ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。

<a ng-href="string"></a>

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

<div ng-class="home">    <h1>Welcome Home!</h1>    <p>I like it!</p></div>

ng-class 指令的值可以是字符串，对象，或一个数组。
如果是字符串，多个类名使用空格分隔。
如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。
如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

ng-include
用于包含外部的 HTML 文件。

<div ng-include="'myFile.htm'"></div>

包含的内容将作为指定元素的子节点。
ng-include 属性的值可以是一个表达式，返回一个文件名。
默认情况下，包含的文件需要包含在同一个域名下。

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

<input type="checkbox" ng-model="all"><br><input type="text" ng-disabled="all">

ng-readonly
用于设置表单域(input 或 textarea) 的 readonly 属性。
如果 ng-readonly 属性的表达式返回 true 则表单域为只读。

<input type="checkbox" ng-model="all"><br><input type="text" ng-readonly="all">

ng-checked
用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

<input type="checkbox" ng-model="all"> Check all<br><br><input type="checkbox" ng-checked="all">Volvo<br>

ng-selected
用于设置 option 元素的 selected 属性。
ng-selected 属性的表达式返回 true 则选项被选中。

<option ng-selected="expression"></option>

ng-cloak
用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。
AngularJS 应用在加载时，文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果， ng-cloak 指令是为了防止该问题的发生。

<div ng-app=""><p ng-cloak>{{ 5 + 5 }}</p></div>

在AngularJS中通过“{{}}”和ng-bind指令来实现模型（Model）数据向视图模板（View）的绑定，模型数据通过一个内置服务scope来提供，这个scope是一个空对象，通过为这个对象添加属性或者方法便可以在相应的视图（View）模板里被访问。
注：“{{}}”是ng-bind的简写形式，其区别在于通过“{{}}”绑定数据时会有“闪烁”现象，添加ng-cloak也可以解决“闪烁”现象，通过ng-bind-template可以绑定多个数据。

数据绑定

1.单向绑定

单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，如之前所学的artTemplate 模板引擎的工作方式。

2.双向绑定

双向绑定则可以实现模型（Model）数据和视图（View）模板的双向传递，

阅读全文

0 0