对于Angular表达式以及重要指令的研究心得前端实战Angular框架
Posted 黎燃黎燃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对于Angular表达式以及重要指令的研究心得前端实战Angular框架相关的知识，希望对你有一定的参考价值。
Angularjs表达式
Angularjs使用表达式将数据绑定到html
Angularjs表达式使用双括号编写：｛表达式｝。
angularjs表达式将数据绑定到HTML，类似于ng bind指令。
Angularjs将在写入表达式的位置“输出”数据。
Angularjs表达式与javascript表达式非常相似：它们可以包含文本、运算符和变量。
实例｛5+5｝或｛firstname+“”+LastName｝｝
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>黎燃表达式 5 + 5 </p>
</div>
</body>
</html>
Angularjs数字类似于JavaScript数字：
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： quantity * cost </p>
</div>
使用相同的NG bind实例：
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： <span ng-bind="quantity * cost"></span></p>
</div>Angularjs表达式和JavaScript表达式
与JavaScript表达式类似，angularjs表达式可以包含字母、运算符和变量。
与JavaScript表达式不同，angularjs表达式可以用HTML编写。
与JavaScript表达式不同，angularjs表达式不支持条件判断、循环和异常。
与JavaScript表达式不同，angularjs表达式支持过滤器。
Angularjs指令
Angularjs使用称为指令的新属性扩展HTML。
Angularjs通过内置指令向应用程序添加函数。
Angularjs允许自定义指令。
angularjs指令是一个扩展的HTML属性，前缀为ng-。
ng app指令初始化angularjs应用程序。
ng init指令初始化应用程序数据。
ng模型指令将元素值（例如输入字段的值）绑定到应用程序。
<div ng-app="" ng-init="firstName=John">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： firstName </p>
</div>
ng-app指令告诉angularjs＜div＞元素是angularjs应用程序的“所有者”。
数据绑定
上面示例中的firstname表达式是angularjs数据绑定表达式。
angularjs中的数据绑定将angularjs表达式与angularjs数据同步。
｛｛firstname｝｝通过ng model=“firstname”同步。
在下一个示例中，两个文本字段由两个ng模型指令同步：
<div ng-app="" ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> quantity * price </p>
</div>
ng-repeat 指令用在一个对象数组上：
Ng应用程序指令
ng app指令定义angularjs应用程序的根元素。
加载网页时，ng app指令将自动引导（自动初始化）应用程序。
稍后，将了解ng app如何通过值（例如ng app=“mymodule”）连接到代码模块。
<div ng-app="" ng-init="names=[
name:Jani,country:Norway,
name:Hege,country:Sweden,
name:Kai,country:Denmark]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
x.name + , + x.country
</li>
</ul>
</div>Ng初始化指令
ng init指令定义angularjs应用程序的初始值。
通常，不使用ng init。将用控制器或模块替换它。
Ng模型教学
ng模型指令将HTML元素绑定到应用程序数据。
ng模型指令还可以：
为应用程序数据（数字、电子邮件、必填项）提供类型验证。
为应用程序数据提供状态（无效、脏、触摸、错误）。
为HTML元素提供CSS类。
将HTML元素绑定到HTML表单。
Ng重复指令
ng repeat指令为集合（数组）中的每个项克隆一次HTML元素。
创建自定义指令
除了angularjs的内置指令外，我们还可以创建自定义指令。
可以使用。用于添加自定义指令的指令函数。
要调用自定义指令，需要向HTML元素添加自定义指令名称。
驼峰方法用于将指令命名为runoobdirective，但在使用它时需要将其拆分为“-”。Runoob指令：
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function()
return
template : "自定义指令!"
;
);
</script>
</body>
可以通过以下方式调用指令：
素名
属性
类名
笔记
<runoob-directive></runoob-directive><div runoob-directive></div><div class="runoob-directive"></div><!-- directive: runoob-directive -->通过添加restrict属性并将值设置为“a”，可以设置指令只能通过属性调用：
var app = angular.module("myApp", []);
app.directive("runoobDirective", function()
return
restrict : "A",
template : "自定义指令!"
;
);极限值可以是以下值：
E用作元素名称
A用作属性
C用作类名
M用作注释
restrict的默认值是ea，也就是说，可以通过元素名和属性名调用指令。
以上是关于对于Angular表达式以及重要指令的研究心得前端实战Angular框架的主要内容，如果未能解决你的问题，请参考以下文章