创建一个Angular js插件 [英] Creating a Angular js plugin

问题描述

当前，我们有一个Jquery插件，当用户在页面上包含.js和css文件时，该插件可以附加到div并将div转换为jquery控件.

Currently we have a Jquery plugin which when the user includes a .js and css file to their page can attach to a div and transforms the div into a jquery control.

最近我已经开始做很多有角度的JS，并用它建立了一个不错的网站.我想知道是否还可以构建有角JS来创建一个插件，该插件可以拖放到任何前端中，而不论技术如何，都类似于jquery插件.

Lately I have started doing a lot of angular JS, and built a nice site with it. I am wondering if angular JS can also be built to create a plugin which can be dropped into any frontend regardless of the technology similarly to the way a jquery plugin can.

即想法是，要求使用它包含angular.js，mycontrol.js，然后要求他们在要显示插件的页面上的任意位置包括一个1行指令，即

I.e the idea is something like ask the use to include angular.js, mycontrol.js and then ask them to include a 1 line directive to wherever on the page they want to display the plugin i.e

即，但也允许他们控制控件的默认设置并访问某些回调函数.

I.e but also allow them to control the default settings for the control and access certain callback functions.

我只是想知道这是否是对angular的正确使用，还是最好坚持使用jquery来实现此功能.

I am just wondering if this is right use of angular, or is best to stick with jquery for this functionality.

推荐答案

是的，您绝对可以构建一个可在任何地方集成的角度模块. 可以将其视为只做自己的事情的有角度的应用程序.

Yes you can definitely build an angular module to be integrated anywhere. Think of it as an angular app doing just your stuff.

我这样做:

1. 编写我的角度应用程序，例如"myModule"
2. 使用gulp/grunt对其进行编译"以获得一个唯一的脚本，理想情况下在$ templateCache中包括angularjs，我的.js代码和我的html模板
3. 在html的某处包含ng-app ="myModule"指令

4. 使用它

1. write my angular app, for example "myModule"
2. 'compile' it with gulp/grunt to obtain one unique script, ideally including angularjs, my .js code and my html templates in $templateCache
3. include the ng-app="myModule" directive somewhere on my html

4. use it

<script src="myApp.js"></script>
<div ng-app="myModule">
    <my-cool-directive></my-cool-directive>
</div>

您可以通过以下方式从外部世界"访问角度世界:

You can access the angular world from the 'outside world' by something like that :

var elem = angular.element(document.querySelector('[ng-app]'));
var injector = elem.injector();
var myService = injector.get('myService');
var usefulData = myService.getData();

这篇关于创建一个Angular js插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！