今天看视频学习了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)模板的双向传递,