Angular学习-指令入门

时间：2022-09-18 07:57:52

1.指令的定义

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

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

AngularJS内部指令都是ng-diretivename这种，以ng-开头。可以通过 https://docs.angularjs.org/api/ng/directive

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

ngApp

ngController

ngClass

ngClick

ngShow和ng-hide

ngRepeat

ngSubmit

3.第一个指令

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

index.html

<html ng-app="app">

<head>

<title>AngularJs First Diretive</title>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  <script src="https://code.angularjs.org/1.5.7/angular.js"></script>

  <script src="script.js"></script>

</head>

<body ng-controller="mainCtrl">

  <hello-world></hello-world>

</body>

</html>

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

  }

})

运行效果如下:

Angular学习-指令入门

4.总结

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

Angular学习-指令入门

参考网址

1.https://docs.angularjs.org/guide/directive

Angular学习-指令入门的更多相关文章

  1. Angular JS从入门基础 mvc三层架构 常用指令

    Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  2. angular学习笔记&lpar;三十&rpar;-指令&lpar;10&rpar;-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  3. angular学习笔记&lpar;三十&rpar;-指令&lpar;7&rpar;-compile和link&lpar;2&rpar;

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  4. angular学习笔记&lpar;三十&rpar;-指令&lpar;7&rpar;-compile和link&lpar;1&rpar;

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  5. angular学习笔记&lpar;三十&rpar;-指令&lpar;6&rpar;-transclude&lpar;&rpar;方法&lpar;又称linker&lpar;&rpar;方法&rpar;-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  6. angular学习笔记&lpar;三十&rpar;-指令&lpar;5&rpar;-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  7. angular学习笔记&lpar;三十&rpar;-指令&lpar;2&rpar;-restrice&comma;replace&comma;template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  8. angular学习笔记&lpar;三十&rpar;-指令&lpar;1&rpar;-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  9. angular学习-入门基础

    angular .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #00 ...

随机推荐

  1. OpenStack云计算快速入门之三：OpenStack镜像管理

    原文:http://blog.chinaunix.net/uid-22414998-id-3272059.html 第三部分 OpenStack镜像管理 一.简介 很多源都有为OpenStack已经编 ...

  2. 区别 Jquery对象和Dom对象

    在讨论之前,先约定好定义变量的风格. 如果获取的对象是jQuery对象,那么在变量前加上$,例如: var $variable = jQuery对象; 如果获取的是DOM对象,则定义如下: var v ...

  3. 错误描述：请求&OpenCurlyDoubleQuote;System&period;Data&period;SqlClient&period;SqlClientPermission&comma; System&period;Data&comma; Version&equals;2&period;0&period;0&period;0&comma; Culture&equals;neutral&comma; PublicKeyToken&equals;b77a5c561934e089”类型的权限已失败

    错误描述:请求“System.Data.SqlClient.SqlClientPermission, System.Data, Version=2.0.0.0, Culture=neutral, Pu ...

  4. 【Java】Java原生的序列化和反序列化

    写一个Java原生的序列化和反序列化的DEMO. 需序列化的类: package com.nicchagil.nativeserialize; import java.io.Serializable; ...

  5. URL与资源

    资源推荐 1.HTTP权威指南. <HTTP权威指南>由古尔利所著,<HTTP权威指南>详细解释了HTTP协议,包括HTTP是如何工作的,如何用HTTP来开发基于Web的应用程 ...

  6. html&plus;css布局小练习w3cfuns

    虽然花了很长时间,但是也知道了不少,这次也不像以前了,不知道怎么下手,虽然是照着图片做,不过也做出来了图片来自w3cfuns:网站图片url  看了w3cfuns的两天驾驭DIV+CSS 这个网站对新 ...

  7. 数塔（dp）

    数塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  8. 12&period;java&period;lang&period;NoSuchMethodException

    java.lang.NoSuchMethodException 方法不存在异常 当程序试图通过反射来创建对象,访问(修改或读取)某个方法,但是该方法不存在就会引发异常

  9. php设计模式七 ---组合模式

    1.介绍 组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结 ...

  10. go 并发编程&lpar;2&rpar;

    协程 执行体是个抽象的概念,在操作系统层面有很多个概念与之对应,如操作系统自己掌管的进程(process),进程内的线程(thread),以及进程内的协程(coroutine,也叫轻量级线程).与传统 ...

相关文章