AngularJS简介

AngularJS简介AngularJS简介AngularJS是一个JavaScript矿建,他是一个JavaSscript编写的库。可以通过<script>标签添加到HTML页面。AngularJS是通过指令扩展了HTML,且通过表达式绑定数据到HTML。地址:<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angul…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

AngularJS简介

AngularJS是一个JavaScript矿建,他是一个JavaSscript编写的库。可以通过<script>标签添加到HTML页面。

AngularJS是通过指令扩展了HTML,且通过表达式绑定数据到HTML。

地址:<script src=”http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js”></script>

各个 angular.js 版本下载: https://github.com/angular/angular.js/releases

 

AngularJS通过ng-directives扩展了HTML。

ng-app指令定义一个AngularJS应用程序。

ng-model指令把元素之(比如输入域的值)绑定到应用程序。

ng-model 指令也可以:

  为应用程序数据提供类型验证(number、email、required)。

  为应用程序数据提供状态(invalid、dirty、touched、error)。

  为 HTML 元素提供 CSS 类。

  绑定 HTML 元素到 HTML 表单

ng-bind 指令把应用程序数据绑定到 HTML 视图。

ng-init 指令初始化 AngularJS 应用程序变量。

ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。

HTML5允许扩展的(自制的)属性,以data-开头。

AngularJS属性以ng-开头,但是您可以使用data-ng-来让网页对HTML5有效。

 

什么是AngularJS?

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。

AngularJS 可以克隆和重复 HTML 元素。

AngularJS 可以隐藏和显示 HTML 元素。

AngularJS 可以在 HTML 元素”背后”添加代码。

AngularJS 支持输入验证。

 

AngularJS 表达式

AngularJS 表达式写在双大括号内:{
{ expression }}。

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置”输出”数据。

AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

实例 {
{ 5 + 5 }} 或 {
{ firstName + ” ” + lastName }}

 

AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

 

AngularJS 表达式 与 JavaScript 表达式

类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。

与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。

与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

 

创建自定义的指令

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令,HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 – 分割, runoob-directive:

<body ng-app=”myApp”>

<runoob-directive></runoob-directive>

<script>

var app = angular.module(“myApp”, []);

app.directive(“runoobDirective”, function() {

    return {

        template : “<h1>自定义指令!</h1>”

    };

});

</script>

</body>

可以通过以下方式来调用指令:元素名、属性、类名、注释

restrict 属性设置指令只能通过某些方式来调用

var app = angular.module(“myApp”, []);

app.directive(“runoobDirective”, function() {

    return {

        restrict : “A”,

        template : “<h1>自定义指令!</h1>”

    };

});

restrict 值可以是:E 作为元素名使用、A 作为属性使用、C 作为类名使用、M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

 

CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:ng-empty、ng-not-empty、ng-touched、ng-untouched、ng-valid、

ng-invalid、ng-dirty、ng-pending、ng-pristine

 

AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象,有可用的方法和属性。

Scope 可应用在视图和控制器上。

 

AngularJS 应用组成如下:

 View(视图), 即 HTML。

 Model(模型), 当前视图中可用的数据。

 Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

所有的应用都有一个 $rootScope(根作用域),它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

 

AngularJS  过滤器

过滤器可以使用一个管道字符(|)添加到表达式和指令中。

AngularJS 过滤器可用于转换数据:

currency 格式化数字为货币格式。

filter 从数组项中选择一个子集。

lowercase 格式化字符串为小写。

orderBy 根据某个表达式排列数组。

uppercase 格式化字符串为大写。

 

向指令添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组:

<div ng-app=”myApp” ng-controller=”namesCtrl”>

<ul>

  <li ng-repeat=”x in names | orderBy:’country'”>

    {
{ x.name + ‘, ‘ + x.country }}

  </li>

</ul>

<div>

 

过滤输入

输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集:

<div ng-app=”myApp” ng-controller=”namesCtrl”>

<p><input type=”text” ng-model=”test”></p>

<ul>

  <li ng-repeat=”x in names | filter:test | orderBy:’country'”>

    {
{ (x.name | uppercase) + ‘, ‘ + x.country }}

  </li>

</ul>

</div>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164212.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 电赛校赛-三相逆变电源设计(单片机部分–C52仿真测频+串口发送机与串口接收机)

    电赛校赛-三相逆变电源设计(单片机部分–C52仿真测频+串口发送机与串口接收机)本文主要介绍C52符合题目测量指标的测量方案

  • javascript中function用法_年终总结反思不足之处

    javascript中function用法_年终总结反思不足之处整理了JavaScript中函数Function的各种,感觉函数就是一大对象啊,各种知识点都能牵扯进来,不单单是 Function 这个本身原生的引用类型的各种用法,还包含执行环境

  • 外汇区块链内容平台_组建外汇交易工作室

    外汇区块链内容平台_组建外汇交易工作室在过去几年中,由区块链驱动的比特币对全球财务,特别是外汇行业产生了重大影响。这种创新的加密货币在全球范围内大肆挥霍,并成为头条新闻,很快就能感受到它的存在。虽然比特币很可能继续对外汇行业产生影响,但它实际上是锁定链,这种货币背后的技术,将对外汇行业产生更显着和不可逆转的影响。外汇产业的当前景观外汇市场是全球最大,最具流动性的市场。该行业每周五天,每天24小时开放,主要位于伦敦,而纽约市的每日营…

  • 原创小说:城与兽 第一篇章在线阅读_有兽星七十二城的小说

    原创小说:城与兽 第一篇章在线阅读_有兽星七十二城的小说一名身材健壮的男子走在黄昏的海滩上。伴随着夕阳,和阵阵吹拂的海风,男子边双手抱头走边想:“这下完了呀,这是个什么地方呀,我要怎么回家呀,爸妈要怎么办呀。”他无聊的边走边踢着海滩上的石子,时不时往着被夕阳映射得泛红的天空,时不时又看看一望无际的大海,这海平面让它觉得很绝望。踢着踢着,踢到了一颗他踢不动的。“好痛呀。”男子坐在地上揉起了自己的脚。“真是衰到透顶了。衰起来连石子都…

  • 万字长文告诉新手如何学习Python图像处理(上篇完结 四十四) | 「Python」有奖征文

    万字长文告诉新手如何学习Python图像处理(上篇完结 四十四) | 「Python」有奖征文这篇文章是图像处理的最后一篇文章,后面我们将进入新的章节。图像处理文章主要讲解的图像处理方法包括图像几何运算、图像量化采样、图像点运算、图像形态学处理、图像增强、图像平滑、图像锐化、图像特效、图像分割、傅里叶变换与霍夫变换、图像分类等。个人感觉如果你是编程初学者、Python初学者或图像处理爱好者,这个系列真心适合你学习,并且这篇文章算是Python图像处理的学习路线,希望您喜欢。

    2022年10月14日
  • f1 score 代码_在pytorch 中计算精度、回归率、F1 score等指标的实例「建议收藏」

    f1 score 代码_在pytorch 中计算精度、回归率、F1 score等指标的实例「建议收藏」pytorch中训练完网络后,需要对学习的结果进行测试。官网上例程用的方法统统都是正确率,使用的是torch.eq()这个函数。但是为了更精细的评价结果,我们还需要计算其他各个指标。在把官网API翻了一遍之后发现并没有用于计算TP,TN,FP,FN的函数。。。在动了无数歪脑筋之后,心想pytorch完全支持numpy,那能不能直接进行判断,试了一下果然可以,上代码:#TPpredict和l…

    2022年10月14日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号