Comments (12)
Hello!
i did make a beta version on > https://github.com/mendhak/angular-intro.js/releases/tag/v4.0.0-beta
changing the name of the module.
hope this helps 😄
from angular-intro.js.
It was done as part of an AMD Loading pull request, see here: #49
You shouldn't have to manually install intro.js, if you did a bower install you'd get it along with.
from angular-intro.js.
I think the main issue was the name of intro.js. It was looking for a package named intro
as opposed to intro.js
, and couldn't find it.
from angular-intro.js.
After change intro -> intro.js, loading using requirejs is dead.
from angular-intro.js.
@banny310 can you make a quick demo showcasing this?
from angular-intro.js.
BTW, @banny310 was right. This doesn't work with requirejs.
Today I tried to wireup angular-intro and intro into my requirejs SPA.
One solution for me was to change the amd section from "intro.js" to "intro". This worked for me after I took the normal step of configuring a path for the "intro" module id. Though this does force me to use the module id of "intro" (which is fine).
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(["angular", "intro"], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('angular'), require('intro.js'));
} else {
root.angularIntroJs = factory(root.angular, root.introJs);
}
}(this, function (angular, introJs) {
I traced deep into where you had define(["angular", "intro.js"], factory). It leads to a requirejs assumption that if the .js is on the end of the dependency name, it uses it verbatim as the url (the filename). Normally with requirejs, I would add the paths as I want, using the module id as a reference to the actual path (filename). For example {'intro': '../thirdparty/js/intro'}
which lets me require 'intro' as the module id, and it uses my configured path ("../thirdparty/js/intro.js"). All that works great, but your define forces the module id to be "intro.js" and if I define a path with that module id (one with the ".js" extension) gets ignored.
This is in require.js (v 2.3.2, line 1637. Note the "ends with .js" comment):
//If a colon is in the URL, it indicates a protocol is used and it is just
//an URL to a file, or if it starts with a slash, contains a query arg (i.e. ?)
//or ends with .js, then assume the user meant to use an url and not a module id.
//The slash is important for protocol-less URLs as well as full paths.
if (req.jsExtRegExp.test(moduleName)) {
//Just a plain path, not module name lookup, so just return it.
//Add extension if it is included. This is a bit wonky, only non-.js things pass
//an extension, this method probably needs to be reworked.
url = moduleName + (ext || '');
} else {
I hope that's helpful. I haven't found another way around this in the few hours I've put in.
I don't know the etiquette around posting to a closed thread... but I hope you find this helpful.
Thanks for the great module!
from angular-intro.js.
I had it closed, because I thought it was resolved, I'll check your solution and get a environment using requirejs, thanks for the feedback :)
from angular-intro.js.
BTW, I copy the full & min files I need from node_modules into a "thirdparty" directory for deployment. Note that I modify the angular-intro JS files during the copy. So I'm happy with my hack, but I'm sure you'll find a real solution in the meantime :-)
gulp.src([
'node_modules/angular-intro.js/build/angular-intro*.js',
'node_modules/angular-intro.js/src/angular-intro*.js',
])
.pipe(replace(/define\(\["angular",\s*"intro\.js"\]/, 'define(["angular","intro"]'))
.pipe(gulp.dest('thirdparty/js'));
Glad to provide the feedback. Thanks for the help.
from angular-intro.js.
@aadhoc i'm currently making some tests on requirejs.
now i fully understand what you were talking about.
i'm feeling strange change the name from "intro.js" to "intro". i feel more comfortable to "introJs" as it's the same as the object that we use, what do you think about it?
from angular-intro.js.
Yes, module names are a bit inconsistent, with dashs, dots and even "js", ".js", "-js" suffixes.
With my experience, authors forego the strange directory names and use filenames which make generally sense for the core project name.
These are examples of a few of the stranger directory names, but the filenames are still pretty standard:
- xml2js/lib/xml2js.js
- ipaddr.js/ipaddr.min.js
- requirejs/require.js
- big.js/big.js
- big.js/big.min.js
- intro.js/intro.js
- intro.js/minified/intro.min.js
The emergent standard across these and the modules without strange suffixes would be <module_plus_suffix>/src/<module>.js
and <module_plus_suffix>/dist/<module>.min.js
.
Since you are trying to decide on what to call the module you're including, you can choose anything, but you'll need to make it obvious to the developers since they will need to (or already have) included it in their requirejs "paths". I currently have mine defined as 'intro', but you can call yours whatever you want.
In the end it definitely doesn't matter, but don't include the dot.
from angular-intro.js.
Hi!
Is it gonna be on npm soon?
Thanks
from angular-intro.js.
+1
from angular-intro.js.
Related Issues (20)
- Angular Example Problem HOT 1
- Append tour html to DOM element different than body.
- 1st time I am not able to load modal ui proper
- Change state and URL without closing Intro
- Commercial use? HOT 2
- Angular 1.6.9 HOT 1
- Can we get rid of bower? It's 2018 HOT 3
- Issue with loading from webpack
- Question: Install warnings and how to build the intro.js
- Sample code for using hints
- How to call anther tour after completing first tour
- Purchase license for commercial use? HOT 2
- Intro.js v2.9.3, onExit duplicate calls
- How to use with Typescript in Angularjs?
- How include in webpack?
- introJs is not a function using webpack
- Add new custom button
- IntroJs helper is black on ios HOT 1
- Intro.js not working with jquerymodal
- IntroJS element selection does not work with angular components
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-intro.js.