I'm reading https://github.com/ExactTarget/fuelux in order to get familiar with the Fuelux wizard, and how I can integrate it with my AngularJS project.
In the non-AMD section it says :
Non-AMD
If you'd prefer not to use AMD, simply add the loader script to the head tag of your page:
<script src="http://www.fuelcdn.com/fuelux/2.6.1/loader.min.js" type="text/javascript"> </script>
but something in jquery is conflicting with my angular routes.
I'm also using this as a guide, and adding the necessary css links and requirejs links; however the wizard does not render properly (as if it were missing the css styling).
wizard
UPDATE:
In my latest attempt, after downloading from https://github.com/ExactTarget/fuelux/tree/3.0.0-wip , I'm still getting the non-formatted wizard. Please see screen shot :
FuelUX 2.x is AMD only. The loader.js is a polyfill of sorts (almond.js- a minimal AMD API implementation) that allows AMD, just so you don't have to load require.js yourself, but it's still there.
The latest version FuelUX 3 is a WIP branch and is UMD (Universal Module Definition) which means it can be used with/without AMD via tags with only Bootstrap and JQuery as dependencies. You might try it.
Related
I am trying to update jQuery for Drupal 7.87 to version 3.6.x. The jQuery_update module (7.x-3.0-alpha5)installed and the highest JQuery version I can pick from the dropdown list is 3.3.
Does anyone know if Drupal 7.87 support JQuery 3.6.x? If yes, how can I upgrade it properly?
Thanks
The module jquery_update allows to use "recent" versions of jQuery within Drupal but does not provide the latest versions because the changes tend to break Drupal 7 core JS.
A solution is to "side load" the newer version using the module jQuery Multi :
jQuery Multi allows you to load an extra version of the jQuery library
in parallel to Drupal's version, without conflicting with Drupal's
version.
For instance, if you're loading jQuery-3.6.0, the alias will be jq360, and you can use it in your scripts by wrapping your code as follows :
(function($){
// Code here
// ....
})(jq360)
I'm using ghcjs-0.2.0.9006030_ghc-7.10.3 with stack lts-6.30 to build a frontend app. Inspired by this post, I decided to use react-flux and material-ui. I added React's CDN link to my index.html, and configured GHCJSi to use a custom index-dev.html when working with the repl.(React's CDN link is also included in index-dev.html)
However, with material-ui-next, the official installation method is to use NPM. They provide no CDN link. So how to use this library in a GHCJS project? I think one of the following should work:
Use the CDN link provided by jsDelivr. (Though this link doesn't work)
Find some way to bundle material-ui-next and put it in js-sources field in cabal, so that it can be linked with our app at build time.
Any help is appreciated.
In the package.json of material-ui, scripts build:umd:prod and build:umd:dev can be used to build UMD bundles of the package. So you can use the CDN link provided by unpkg.
Even though material-ui doesn't declare a peer dependency on react-transition-group, it expects react-transition-group/TransitionGroup to be present. So we have to add the following code before the link to material-ui
<script crossorigin="anonymous" src="https://unpkg.com/react-transition-group#2.2.1/dist/react-transition-group.js"></script>
<script>
window["react-transition-group/TransitionGroup"] = ReactTransitionGroup.TransitionGroup;
</script>
I created a issue on material-ui's github repository, see that issue for more details.
I followed the angular-meteor tutorial for the Socially app in Angular2. It basically works (after a few manual steps to fix package dependencies, etc), however, I am unable to debug the client side code in Chrome Dev Tools. When I navigate to the sources for my *.ts files, all I see are things like
module.export("default",exports.default=("<div> <ul> <li *ngFor=\"let party of parties\"> {{party.name}} <p>{{party.description}}</p> <p>{{party.location}}</p> </li> </ul> </div>"));
Other strange things in dev tools: my app.ts is blank. I see html files with !raw suffixes.... (e.g. app.html!raw). What is the !raw suffix and what causes that?
How can I debug my typescript?
I may be able to help with some parts of your question.
You don't mention which version of meteor you're using, but I assume version 1.4 or 1.4.0.1. I have seen that these versions of Meteor seem to have issues with sourcemaps for Typescript files (probably as they have to go through multiple transpilation steps).
I don't yet know where exactly the bug lies (Meteor or the Typescript compiler package).
Here's one github issue for this: https://github.com/barbatus/typescript/issues/23
UPDATE: This issue has now been fixed.
For now, my suggestion would be to try reverting to a 1.3.x.x version of Meteor. For something like the Socially tutorial, the easiest option is to specify the Meteor release at creation time:
$ meteor create --release 1.3.5.1 Socially
(list of releases is at: https://github.com/meteor/meteor/releases)
The 'app.html' and 'app.html!raw' files are generated by the meteor angular compilers as a way of working around issues with using templateUrl and the meteor build process. My understanding is that the preferred approach is to have inline templates or import the templates like this:
// This import loads the content of the html file into 'template'
import template from './app.html';
#Component({
selector: 'app',
// Instead of templateUrl, use:
template, // <--- 'template,' is syntactic sugar for: 'template: template,'
directives ... etc.
The import statement is a bit unusual, and this magic is achieved by the meteor angular pre-compiler that converts every html and css file into a couple of js files. That's what strange app.html and app.html!raw are.
The funny characters in the first app folder seem to be a bug. Meteor tries to generate put in a computer emoji, but sometimes this gets handled incorrectly. I'm not sure if this is a bug Chrome, ChromeDevTools or Meteor. (Personally, I wish they'd ditch the emoji).
I am in and out of a project with Meteor, trying to wrap my head around this framework (documentation is comparable to Ruby... just terrible and fragmented), and I get this error :
While determining active plugins:
error: conflict: two packages included in the app (barbatus:angular2 and
templating) are both trying to handle *.html
And this is my installed packages :
autopublish 1.0.4 (For prototyping only) Publish the entire d...
blaze-html-templates 1.0.1 Compile HTML templates into reactive UI wit...
ecmascript 0.1.5 Compiler plugin that supports ES2015+ in al...
es5-shim 4.1.13 Shims and polyfills to improve ECMAScript ...
flemay:less-autoprefixer 1.1.0 The dynamic stylesheet language + Autoprefixer
insecure 1.0.4 (For prototyping only) Allow all database w...
jquery 1.11.4 Manipulate the DOM using CSS selectors
meteor-base 1.0.1 Packages that every Meteor app needs
mobile-experience 1.0.1 Packages for a great mobile user experience
mongo 1.1.2 Adaptor for using MongoDB and Minimongo ove...
semantic:ui 2.1.4 Official Semantic UI Integration for Meteor
session 1.1.1 Session variable
standard-minifiers 1.0.1 Standard minifiers used with Meteor apps by...
tracker 1.0.9 Dependency tracker to allow reactive callbacks
urigo:angular2-meteor 0.2.0+ Angular2 and Meteor integration
Now, I know that barbatus:angular2 is used by urigo:angular2-meteor, but I'm unsure why it would conflict with templating (which is obviously required by something else... if not meteor-base itself.
How do I fix this?
** Edit **
This is my only .html file :
<head>
<title>larpdb</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
Basically, this is a brand new empty project; how can I avoid getting this error? Do I have to strictly not use <template> tags in my project?
In Meteor 1.2.0.2 you can use
> meteor remove blaze-html-templates
Changes to your project's package version selections:
blaze-html-templates removed from your project
caching-compiler removed from your project
caching-html-compiler removed from your project
templating removed from your project
templating-tools removed from your project
Then add the urigo:angular2-meteor package (must download from GitHub)
> meteor add urigo:angular2-meteor
In meteor .html file have templates only. If you are creating angular templates and giving same extension then at that time it will throw error. because in meteor only master file have html tag and if you adding different html file not having template tag then it will treat it as HTML file and add html tag in it while building.
so if you are creating templates for angular just rename it somefile.ng.html.
so that while meteor build it will don't have conflict.
meteor remove blaze-html-templates
meteor remove ecmascript
Run the following commands to remove meteor's default ecmascript package .
Now the app should run fine .
I have been trying to wire up AngularUI to Bootstrap 3 to no avail. I grabbed the appropriate AngularUI code from the bootstrap 3 branch here:
https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2
I picked the AngularUI tooltip directive as an easy "test-case" to see if I can get it all wired up.
There error I am receiving is:
Uncaught Error: No module: ui.bootstrap
I've shared a dropbox link with src code below.
Views/Home/index.cshtml contains the markup with references to angularjs and bootstrap
js/directives contains the only directive I am currently testing out which is the "tooltip" directive.
Dropbox link with src code
https://www.dropbox.com/sh/elwn0su5qwnqa27/zetaMxAa4Q
Instead of my having to download the bootstrap 3 directives and place them manually in my project, is there now a CDN available for AngularUI-Bootstrap3 directives like there is for AngularUI-Bootstrap2?
Thanks for any help,
V/R
Chris
It's because you try to extract only one part of AngularUI sources, not compiled version.
So you lack the module declaration for 'ui.bootstrap' (and surely other pieces).
As Bootstrap 3 compatibility is not done, there is no compiled version (and no more CDN) for this AngularUI version.
You have to get all sources from branch bootstrap3_bis2, and build them with grunt. It's explain in project README (Contributing to the project > Build).
It will generate 2 JS files (one is minified and the other is not) you have to include one of them to your page and it will works correctly.