1.指令定义
从用户的角度来看,指令是在应用程序模板中使用的自定义 HTML 标记。说明可以简单也可以复杂。 HTML 编译器解析指令,增强模板的功能。也是未来组件化的发展趋势。目前,HTML5 中添加了许多新的标签。但是在实际的业务开发过程中,复用的模板很多,加上复用的交互效果,可以写成指令开发工程师可以在同一个项目中使用,也可以在多个项目中使用,达到一次开发的目的并在任何地方使用。
2.内置指令和自定义指令
内部指令都是ng-,以ng-开头。可以查看的命令
。在实际开发中,常用的有以下几种:
ngApp
和 ng -hide
3.第一个命令
编写输出 Hello 的第一个命令。
index.html
AngularJs First Diretive
![图片[2]-Angular学习-指令入门-唐朝资源网](http://www.51wendang.com/pic/1149d56fd0387edffe61113b/2-810-jpg_6-1080-0-0-1080.jpg)
![图片[3]-Angular学习-指令入门-唐朝资源网](http://file.zhuangpeitu.com/fileroot1/2019-12/26/c2fbad44-fc39-40c4-b644-1e04e897b395/c2fbad44-fc39-40c4-b644-1e04e897b3953.gif)
.js
var app=angular.module('app',[]);
app.controller('mainCtrl',function($scope){
$scope.message="Learning Angularjs";
![图片[4]-Angular学习-指令入门-唐朝资源网](http://file1.renrendoc.com/fileroot_temp2/2020-4/2/adc4c31c-e604-4dd7-bc07-7fa13ba415bc/adc4c31c-e604-4dd7-bc07-7fa13ba415bc2.gif)
});
angular.module('app').directive('userInfoCard',function(){
return {
template:"Hello World. I am an Angularjs Diretive.",
restrict:"EA",
replace:true
![图片[5]-Angular学习-指令入门-唐朝资源网](http://file.zhuangpeitu.com/fileroot1/2020-8/13/16733e71-52ff-48ac-b278-e05ee14d14a9/16733e71-52ff-48ac-b278-e05ee14d14a93.gif)
}
})
运行效果如下:
4.总结
在中文中,说明非常重要。指令是与大多数其他客户端框架的区别,也是未来 Web 开发的组件化趋势。使用指令,无需编辑一大段代码来定义模型;使用指令构建模型和视图,使开发人员能够快速高效地开发强大的应用程序。
参考网址
1.
© 版权声明
本站下载的源码均来自公开网络收集转发二次开发而来,
若侵犯了您的合法权益,请来信通知我们1413333033@qq.com,
我们会及时删除,给您带来的不便,我们深表歉意。
下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,访问及下载者下载默认同意本站声明的免责申明,请合理使用切勿商用。
THE END
暂无评论内容