简介:AngularJS 是一个 JavaScript 框架,通过 <script> 标签添加到 HTML 页面
例如:
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
通过表达式绑定数据到 HTML
AngularJS 指令:
(参考网址:http://www.runoob.com/angularjs/angularjs-reference.html)
以 ng 作为前缀的 HTML 属性:
(1)ng-directives 扩展了 HTML
(2)ng-app 指令定义一个 AngularJS 应用程序的根元素,一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序,在网页加载完毕时会自动引导(自动初始化)应用程序
(3)ng-model 指令把html元素(比如输入域的值)绑定到应用程序
(扩展)ng-model 指令作用:
①为应用程序数据提供类型验证(number、email、required)
②为应用程序数据提供状态(invalid、dirty、touched、error)
③为 HTML 元素提供 CSS 类
④绑定 HTML 元素到 HTML 表单
(4)ng-bind 指令把应用程序数据绑定到 HTML 视图
(5)ng-init 指令初始化AngularJS应用程序变量,为应用程序定义了初始值.通常情况下,不使用 ng-init,使用一个控制器或模块来代替它
(6)ng-controller 定义了控制器
(7)ng-bind绑定HTML元素到应用程序数据,
<element ng-bind="expression"></element> // 或作为 CSS 类: <element class="ng-bind: expression"></element>
(8)ng-repeat 指令会重复一个HTML元素,遍历数组对象
(9)创建自定义的指令,使用 .directive 函数来添加自定义的指令,要调用自定义指令,HTML 元素上需要添加自定义指令名
使用驼峰法来命名一个指令, 例如runoobDirective, 但在使用它时需要以 - 分割.可以通过以下方式来调用指令:元素名,属性,类名,注释
(10)ng-if 指令用于在表达式为 false 时移除 HTML 元素,若为true,会添加移除元素,并显示.语法<div ng-if="expression"></div>
(11) ng-hide 隐藏元素,而ng-if 是从 DOM 中移除元素
(AngularJS 模块(Module) 定义了 AngularJS 应用
AngularJS 控制器(Controller) 用于控制 AngularJS 应用
ng-app指令定义了应用, ng-controller 定义了控制器)
angularjs作用:
把应用程序数据绑定到 HTML 元素
克隆和重复 HTML 元素
隐藏和显示 HTML 元素
在 HTML 元素"背后"添加代码
支持输入验证
AngularJS表达式可以包含字母,操作符,变量;可以写在 HTML 中;不支持条件判断,循环及异常;支持过滤器
数据绑定:
{{ firstName }} 表达式是一个 AngularJS 数据绑定表达式
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据
{{ firstName }} 是通过 ng-model="firstName" 进行同步
相关推荐
Angular 常用指令 已经用了angular很久积累了一些很实用的指令,需要的话直接拿走用,有问题大家一起交流 1.focus时,input:text内容全选 angular.module('my.directives').directive('autoselect', [function () ...
主要给大家总结了一些关于Angular4 中入门常用的指令,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来跟着小编一起学习学习吧。
前端项目-angular-charts,有关使用d3的常用图表的角度指令,请访问
在使用 ui-router 的应用程序的状态更改期间,用于简单角度加载微调器的自定义指令。 安装: bower install angular-simple-spinner 将 /angular_simple_spinner.js 和 /angular-simple-spinner.css 添加到您的 ...
是这三种指令中最常用的,我们会编写大量的组件来构建application。 属性型指令 属性型指令会修改元素的外观或者行为。 e.g. NgStyle可以修改元素的好几个样式。 结构型指令 结构型指令通过添加和删除 DOM 元素来...
NG中的指令,到底是什么(what)?为什么会有(why)?以及怎样使用(how)?What:在NG中,指令扩展HTML功能,为DOM元素调用方法、...简单看一下一些常用的指令。ng-app指令用来设定一个AngularJS应用程序的作用范围的根对象
Angular 中常用的指令有用来遍历的 *ngFor 、控制元素显示隐藏的 *ngIf,今天学习一下 *ngIf 这个常用的指令。 ngIf 指令用于根据表达式的值,在指定位置渲染then 或 else 模板的内容。 then 模板除非绑定到不同...
angular-directives自定义指令插件Tips:项目中一些常用的自定义指令组件类似jquery插件的东西,那么一些思想也是通用的有些完成了,有些没完成...指令文件名,模块名,指令模版文件名,样式文件名都是对应的如何查看...
特征具有可配置默认值的所有可用命令选项的概述可重用的脚本,可轻松访问常用选项具有修改模板功能的多个原理图具有共享选项界面的自定义命令和对项目默认值的访问激活将为Angular CLI项目激活扩展名(如果项目根...
斯堪尼亚角选择2 用于AngularJS指令Scania-angular-select2指令为您提供可自定义的选择框,并支持搜索,标记,ng-model,ng-repeat,本机HTML选择和选项标签,无限滚动以及许多其他常用选项。 请参阅select2 API文档...
模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule、HttpModule、RouterModule。 NgModule的主要属性如下: declarations...
Angular-PHP-Slim 我自己的Webapp支架,使用AngularJS作为前端,使用PHP Slim作为后端。...Bower 作曲家发展一些常用的命令: # install new ...angular:controller myControlleryo angular:di
一、指令 v-model 多用于表单元素实现双向数据绑定(同angular中的ng-model) v-for 格式: v-for=”字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index v-
赞助商从个人项目开始,现在已成为客户端存储最常用的Angular库之一,每周下载超过10,000次。 这是很多免费的工作。 因此,如果您的公司通过使用该lib的项目赚钱,那么考虑成为很不错。由同一作者(Angular CLI命令...
改善性能的常用方法是仅呈现一小部分数据集对用户可见。 用户看不见的其他数据集元素将使用向上和向下的空白填充元素虚拟化,这些元素应提供具有一致滚动条参数的一致视口。 * uiScroll是一个结构指令,其作用类似...
路由是AngularJS很重要的一环,它可以把你项目的页面串联起来,构成一个项目,常用的路由有ngRoute和ui-route,我这里先讲ngRoute。ngRoute是一个Module,提供路由和深层链接所需的服务和指令。 注意一点,和之前的...
vue.js相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。下面通过本文给大家分享vue.js语法及常用指令,希望对大家有所帮助
AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板,以及对常用工具的封装,例如$http、$cookies、$location等。