博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular学习-指令入门
阅读量:6884 次
发布时间:2019-06-27

本文共 936 字,大约阅读时间需要 3 分钟。

1.指令的定义

从用户的角度来看,指令就是在应用的模板中使用的自定义HTML标签。指令可以很简单,也可以很复杂。AngularJS的HTML编译器会解析指令,增强模板的功能。也是组件化未来的发展趋势,目前HTML5中也加入了很多新标签,但是在实际业务开发过程中,有很多复用的模板,加上复用的交互效果,可以将其编写为AngularJS的指令,开发工程师可以在同一个项目,或多个项目中使用,实现开发一次,到处使用的目标。

2.内置指令和自定义指令

AngularJS内部指令都是ng-diretivename这种,以ng-开头。可以通过

查看AngularJS的指令。在实际开发中,常用的有以下几个:

ngApp

ngController

ngClass

ngClick

ngShow和ng-hide

ngRepeat

ngSubmit

3.第一个指令

编写一个第一个指令,输出Hello AngularJS Diretive.

index.html

AngularJs First Diretive  

script.js

var app=angular.module('app',[]);app.controller('mainCtrl',function($scope){  $scope.message="Learning Angularjs";});angular.module('app').directive('userInfoCard',function(){  return {    template:"Hello World. I am an Angularjs Diretive.",    restrict:"EA",    replace:true  }})

运行效果如下:

59618-20160723144838122-1870697782.png

4.总结

在AngularJS中,指令非常的重要。指令是AngularJS和其他大多数JavaScript客户端框架的区别所在,也是未来Web开发组件化趋势所在。有了指令,无需编辑一大段代码定义模型;有了指令,AngularJS的模型和视图得到了建好,从而让开发者可以快速高效的开发强大的应用。

59618-20160708090522811-599592837.png

参考网址

1.

转载地址:http://qxnbl.baihongyu.com/

你可能感兴趣的文章
TLE之前,没有一个节点叫失败!!!
查看>>
机器学习入门之二:一个故事说明什么是机器学习(转载)
查看>>
利用MySQL存储过程分割字符串
查看>>
Webkit statistics of Android
查看>>
哥德巴赫猜想
查看>>
动态规划3--Help Jimmy
查看>>
Java常用英语汇总(面试必备)
查看>>
负载均衡的认识
查看>>
Swing-选项卡面板JTabbedPane-入门
查看>>
(21/24) webpack实战技巧:webpack对三方类库的优化操作
查看>>
复利完结观看评价
查看>>
service 需要注意的地方
查看>>
【并查集】Gym - 101128B - Black Vienna
查看>>
【模拟】洛谷 P1328 NOIP2014提高组 day1 T1 生活大爆炸版石头剪刀布
查看>>
JavaScript中的forEach
查看>>
【BZOJ】3039: 玉蟾宫 悬线法
查看>>
Clash Detection
查看>>
从CAP理论中分析Eureka与zookeeper的区别
查看>>
20172318 2018-2019-1 《程序设计与数据结构》第2周学习总结
查看>>
文件操作
查看>>