I have been using svg-pan-zoom library successfully with my javascript app but I now need to refactor it to use requireJS.
My util.js is:
define([
'baja!',
'jquery',
'/file/WebWidgets/js/libraries/svg-pan-zoom.js'
], function (
baja,
$,
svgPanZoom) {
'use strict';
const updateInitializeDiv = () => {
const svgDocument = $('#svgObjectElementFromBinding')[0].contentDocument;
const svgDocumentElement = svgDocument.documentElement;
console.log(svgDocumentElement);
console.log(svgDocumentElement.tagName);//svg
let panZoomSVG = svgPanZoom(svgDocumentElement, {
zoomEnabled: true,
controlIconsEnabled: true
});
}
const util = {};
util.updateInitializeDiv = updateInitializeDiv;
return util;
});
I am getting "Uncaught TypeError: svgPanZoom is not a function".
Can anyone suggest what I am doing wrong?
I had to reference the svg-pan-zoom library in the RequireJS config to get this to work.
I have some code that I want to read some json from a file into a string , and then use it inside a AngularJS application.
right now the below code gives me the error, any idea how i would do this?
angular.js:11594 TypeError: Cannot read property 'get' of undefined
at Object.<anonymous> (index.html:14)
at Object.e [as invoke] (angular.js:4182)
at z.instance (angular.js:8441)
at angular.js:7693
at s (angular.js:331)
at v (angular.js:7692)
at g (angular.js:7075)
at angular.js:6954
at angular.js:1451
at l.$eval (angular.js:14384)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPtAHujMTGlcHKbuwjDU4tx666iZICTXg"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
var fs ;
this.http.get("./points.json").subscribe(data => {
console.log('data', data.text());
})
$scope.Markers = data.text(); //fs.readFileSync('./points.json').toString().split("\n");
//Setting the Map options.
app.controller('MyController',['$scope', '$http', function ($scope , $http) {
$http.get("./points.json").success(data => {
console.log('data', data);
})
}])
try this
I have been following a video tutorial which apparently using JSBin to show its code, when I tried out the code locally then it does not work for me. Could someone please help me to figure out what is the issue.
Below is the code
<!DOCTYPE html>
<html>
<head>
<title>Redux basic example</title>
<script src="https://unpkg.com/redux#latest/dist/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.min.js" type = "text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.min.js" type = "text/babel"></script>
</head>
<body>
<div id='root'>
</div>
<script>
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
};
const Counter = ({ value}) => (<div>{value}</div>);
const { createStore } = Redux;
var store = createStore(counter);
const render = () => {
ReactDOM.render(
<Counter value={store.getState()} onIncrement = {
() => store.dispatch({type: 'INCREMENT'})
}
onDecrement = {
() => store.dispatch({type: 'DECREMENT'})
} />,
document.getElementById('root')
);
};
store.subscribe(render);
render();
</script>
</body>
</html>
You are using JSX in your code, which needs to be transpiled into standard javascript before executing it in the browser.
const Counter = ({ value}) => (<div>{value}</div>);
Look into Babel
The browser is complaining about the JSX code. You should transpile it to regular Javascript before including it in your page. There are several ways to do: Webpack, Babel...
Have a look to create-react-app npm package to get started fast: https://github.com/facebookincubator/create-react-app
I'm having issues with the monostate pattern in Firefox 35, using Polymer 0.5.2. My element looks like this:
<polymer-element name="tracer-globals">
<script>
(function() {
var store = document.createElement('tracer-store');
Polymer({
publish: {
store: null
},
ready: function() {
this.store = store;
}
});
})();
</script>
</polymer-element>
In Chrome at the point of ready I can see the various attributes of the store object, but on Firefox, the attributes are never defined (even long after the app has finished loading).
Any ideas why?
Things I've tried:
Ensure tracer-store is imported before tracer-globals.
Found a workaround:
Lazy-load the global object in the created callback:
<polymer-element name="tracer-globals">
<script>
(function() {
var store = null;
var getStore = function() {
if (store === null) {
store = document.createElement('tracer-store');
}
return store;
};
Polymer({
publish: {
store: null
},
created: function() {
this.store = getStore();
}
});
})();
</script>
</polymer-element>
Would appreciate comments as to why this works.
I want to do something like this (but obviously not this exactly, because this function doesn't work this way)
angular.bootstrap( $("#myelement"), ['myModule'], {foo: bar} );
I want to pass in a configuration object, since we may want to have more than one instance of the app on a page, with different settings, etc. All I can think of are ugly workarounds. I'm thinking the best thing would be to override an "Options" service of my own making, but I still can't figure out the proper way to do that (tersely).
Thanks in advance!
How about you try something like this:
angular.module('configFoo', []).run(function() {});
angular.module('configBar', []).run(function() {});
angular.bootstrap(myEl, ['myModule', 'configFoo']);
angular.bootstrap(myOtherEl, ['myModule', 'configBar']);
http://docs.angularjs.org/api/angular.Module for all available module methods (you're probably only interested in .run() and .config())
Here is a working code:
http://jsfiddle.net/x060aph7/
angular.module('myModule', [])
.controller('myController', function($scope,myConfig) {
$scope.name = 'inst '+myConfig.foo;
})
;
var aConfig = [{foo:1},{foo:2},{foo:3}];
aConfig.forEach(function(config){
angular.module('fooConfig',[]).value('myConfig', config);
angular.bootstrap(getDiv(), ['myModule','fooConfig']);
});
function getDiv(){
var mDiv = document.createElement('div');
mDiv.setAttribute('ng-controller','myController');
mDiv.innerHTML = '<span>{{name}}</span>';
document.body.appendChild(mDiv);
return mDiv;
}
The following example helped us out bootstrapping a widget to a page. First a div is made - with a bit of jQuery - for the widget to load a template with an ng-include, it is controlled by WidgetLogoController. Next a module WidgetConfig is created that holds the widget's configuration.
$('#pageWidget').html(`<ng-include src="'/dist/templates/widgetLogo.html'"></ng-include>`)
.attr('ng-controller','WidgetLogoController');
var widgetConfig = {
'widgetId': data.pageWidgetId,
'areaId': data.area,
'pageId': data.pageId
};
angular.module('WidgetConfig', []).value('WidgetConfig', widgetConfig);
angular.bootstrap(document.getElementById('pageWidget'), ['Widget', 'WidgetConfig']);
Widget module includes the WidgetConfig configuration but also has a spot for it own in CONFIG:
(function (window, angular) {
'use strict';
window.app = angular.module('Widget', ['ngFileUpload', 'WidgetConfig'])
.constant('CONFIG', {
BASE_URL: 'http://osage.brandportal.com/'
});
})(window, angular);
WidgetController can access CONFIG and WidgetConfig.
(function (app) {
'use strict';
app.controller('WidgetLogoController', ['CONFIG', 'WidgetConfig',
function(CONFIG, WidgetConfig){
console.log('---WidgetLogoController');
console.log('CONFIG', CONFIG);
console.log('WidgetConfig', WidgetConfig);
}]);
}(app));
What about:
Load config and than load angular:
angular.element(document).ready(() => {
$.get('config', // url to my configuration
{},
function (data) {
window.config = data;
angular.bootstrap(document, ['myApp']);
}
);
});
Access the config:
angular.module('myApp').run(myAppRun);
function myAppRun($window) {
$window.config; // here I have config
}