Yeoman创建angular项目中的指令demo

我不是女神ヾ 2022-05-29 05:27 215阅读 0赞

本文主要介绍如何通过Yeoman的方式快速的建立angular中的directive（指令）。

本文主要参考《angularjs 高级编程》

好，下面上货。

先介绍一下指令。在angualrjs中有三种组件，分别是服务、控制器和指定。这三个组件的功能和特点不同。

*  服务是单例的，用于从服务器端取值
 *  控制器是业务相关，具体的也会会在这里进行实现
 *  指定将直接作用于dom，从而和页面上的元素进行交互。

下面说一下，如何创建一个简单的指令。

1、yo angular:directive first-directive

![Image 1][]

2、编写js程序，实现指令的主要功能。

'use strict';
    
    /**
     * @ngdoc directive
     * @name demottApp.directive:firstDirective
     * @description
     * # firstDirective
     */
    angular.module('demottApp')
      .directive('firstDirective', function () {
        return {
          templateUrl: 'views/templates/first-directive.html',
          restrict: 'E',
          scope: true,
          controller: function ($scope) {
            $scope.abc = 'abcdefg';
            $scope.firstdirectiveclick = function () {
              alert(123);
            }
          }
        };
      });

3、把对应的指令界面进行设计。

<div>
      <h1>{
       {abc}}</h1>
      <button class="btn btn-lg btn-success" ng-click="firstdirectiveclick()">点击</button>
    </div>

4、这个是这个项目的例子程序。

![Image 1][]

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular6 手动创建指令

指令用于演示如何利用 `HostBinding` 装饰器，设置元素的 `innerText` 属性。 ![20190916153855653.png][] **gre...

阳光穿透心脏的1/2处/ 2024年04月19日 09:15/ 0 赞/ 76 阅读

相关 Angular2 + Webpack项目搭建Demo

本文将从头开始编写实际的代码来完成一个angular2的demo。题外话是其实angular2官网的快速开始项目已经很酷炫了，但其侧重快速二字，只够拿来练习玩耍，倒是git

逃离我推掉我的手/ 2022年06月16日 03:09/ 0 赞/ 236 阅读

相关 Angular中的内置指令

Angular提供了若干内置指令。因为内置指令是已经导入过的，故可以直接在组件中直接使用它们。 ngIf 如果你希望根据一个条件来决定显示或隐藏一个元素，可以使用ngI

比眉伴天荒/ 2022年06月13日 13:52/ 0 赞/ 266 阅读

相关 Yeoman创建angular项目中的指令demo

本文主要介绍如何通过Yeoman的方式快速的建立angular中的directive（指令）。本文主要参考《angularjs 高级编程》好，下面上货。先介绍一下指

我不是女神ヾ/ 2022年05月29日 05:27/ 0 赞/ 216 阅读

相关 Yeoman创建angularjs项目——添加新页面和路由

本文主要参考：《angularjs高级编程》本文主要介绍如何通过Yeoman进行新模块的添加。上一篇文章我们讲述了如何通过Yeoman进行angularjs项目的创建。现在

比眉伴天荒/ 2022年05月29日 05:10/ 0 赞/ 735 阅读

相关 Yeoman创建angularjs应用

本文主要介绍如何利用Yeoman进行angularjs应用的搭建。本文主要参考：《Angularjs高级编程》 https://www.ibm.com/developer

电玩女神/ 2022年05月29日 04:38/ 0 赞/ 251 阅读

相关 angular&创建指令&指令对象

创建指令指令也是一种服务，只是这种服务的定义有几个特殊要求：必须使用模块的directive（）方法注册服务对象工厂必须返回一个指令定义的对象

痛定思痛。/ 2022年05月24日 09:50/ 0 赞/ 238 阅读

相关 angular命令创建项目

目录更换成淘宝的源安装angular 卸载清除缓存安装指定版本检查版本号创建项目开启服务访问页面编译错误解决 -----------

朱雀/ 2022年03月31日 04:52/ 0 赞/ 362 阅读

相关创建Angular项目

1、使用命令ng new project-name 来创建一个angular的项目 ![20190216145652201.png][] 2、由于国外的一些node.

ゞ浴缸里的玫瑰/ 2022年03月19日 10:18/ 0 赞/ 862 阅读

相关【初始angular 】angular项目创建过程中需要注意的细节

【初始angular 】angular项目创建过程中需要注意的细节安装angular-cli工具 `yarn global add @angular/cli`

忘是亡心i/ 2022年03月06日 19:59/ 0 赞/ 312 阅读