jQuery to big for me even minified and zipped. So I want to ask is it possible to switch Backbone.$ to http://minifiedjs.com/ I have tryed with manual https://github.com/jashkenas/backbone/wiki/Using-Backbone-without-jQuery but Backbone.$ becomes empty
Related
I have a requirement that I want to add namespaces in requires conditionally.
e.g. In below example I want to add 'views.popupgrid' name space on specific condition. Currently it's always loaded.
requires: ['Ext.window.MessageBox','views.popupgrid','user.MyUser' ]
Conditional dependencies are not supported by the Sencha toolchain. While you would be able to write in a text editor of your choice
requires:[
(location.hash=='#test')?'testpopup':'normalpopup'
]
and this would work in the uncompiled version, Sencha Cmd would not be able to compile it correctly, and would throw errors.
Therefore, Sencha Architect does not support this syntax.
What you can do, while staying Standards-compliant: you can use Ext.Loader.loadScript, e.g. like this:
Ext.define('MyForm',{
extend: 'Ext.form.Panel'
initComponent:function() {
var me = this;
me.callParent(arguments);
if(x==3) Ext.Loader.loadScript({
url:'MyCustomFormComponent.js',
onLoad:function(){
me.add({
xtype:'mycustomformcomponent'
});
})
});
}
})
Please note that in this case you will always have to deliver MyCustomFormComponent.js alongside the minified app.js, because the dependency cannot be resolved by the toolchain. Also, depending on the connection, there may be a visible delay before the resource is loaded and the component is added to the form.
It is usually faster and smoother to always load the dependency, especially if you intend to deliver the app as a single minified javascript file (e.g. using Sencha Cmd).
so i have a situation where in i'm creating html using jquery. I have no choice in this matter since I'm forced to use an old jquery plugin and integrate the created html in angular and the only way to do that is $compile. basically the flow is
var createbody = function(htmlcontents,scope){
$compile(htmlcontents)(scope);
}
the company internal jquery plugin is some sort of endless scroll for a table where it destroys and recreates a chunk of the tr's depending on the scroll position. so everytime you scroll, if the plugin needs to destroy and add tr's, createbody gets called.
the problem is that the scroll gets really laggy whenever it does the destroy and create part because of the compile. a directive is not an option at this point.
question: is there a way to cache the previously compiled chunk and use that later on whenever the plugin decides it needs to use that chunk again.? thanks
You can reuse compiled template:
var compiledTemplate = $compile(html);
compiledTemplate($scope1);
compiledTemplate($scope2);
compiledTemplate($scope3);
You can also see how ngRepeat reuses elements: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js#L469, but it's a bit more complicated.
I love it when multiple technologies come together to produce a doozy...
The following AngularJS template squawks an error in the IDE ("can't resolve file"). I find the inspection wildly convenient and I don't simply want to turn it off.
/my_project/www/templates/logo.html
...
<img src="img/logo.png"/> <<< file at /my_project/www/img/logo.png
...
Question:
How can we allow an IDE like IntelliJ IDEA or WebStorm to play nice with Ionic/AngularJS/Cordova in this situation?
NOTE: I cannot simply mark the www folder as a "resources root" and use absolute references because ionic needs relative refs...
Or does it? Is there a way to fix this on the cordova side of things to allow absolute refs? i.e., so it doesn't break when deploying to Android (because we need the prefix file://android_asset/www/)
Inspired by this answer, I ended up creating a recursive search/replace script in the build process. I made a cordova hook for "after_prepare" and used node with the replace package. Now I can use absolute refs and get the full benefit of the IDE... and then at build-time they get converted to relative.
Here is a sample hook file to get you started. Don't forget to add refs for css files or things like templateUrl in your app.js if you're using angular/ionic. And of course don't forget to modify the platform specifics to your needs.
#!/usr/bin/env node
var replace = require("replace");
var wwwDir = process.argv[2] + '\\platforms\\android\\assets\\www';
// convert all src and href tags to relative in index.html + components\*
replace({
regex: '(src|href)=([\'"])/+',
replacement: '$1=$2',
paths: [
wwwDir + '\\components',
wwwDir + '\\index.html'
],
recursive: true,
silent: false
});
Terminology
#foo: slashless scheme
#/foo: slashy scheme
Background
There are certain legacy parts of the application which use (and rely on) the slashless scheme. I would like to introduce Angular routing (probably with ui-router) in a non-destructive way, such that doesn't interfere with the legacy routing so that part of the application could be gracefully phased out over time. Once that happens the all-angular app could switch to the slashy scheme all at once.
So far
I tried setting $locationProvider.hashPrefix('') to an empty string, but it seems you can only set the string between # and /, so that didn't work.
Options
It seems I can either
rewrite legacy parts of the app, or
rewrite Angular's $locationProvider.hashPrefix to include '/' by default. Therefore setting it to '' would become meaningful.
Both of these options seem very time-consuming.
Do you know about a better way to make Angular recognize the slashless scheme?
You can try using redirects!
With ui-router:
app.config(function ($urlRouterProvider) {
// when there is an 'old' route, redirect to new one
$urlRouterProvider.when('foo', '/foo');
// You can also use regex for the match parameter
$urlRouterProvider.when(/(\w+)/i, '/$1'); // UNTESTED!!!!!!
})
Reference about ui-router wiki
I'm sorry but hashtags are quite hard to test in plunkers/fiddles, so i'm not providing one for now...
Can I disable these fellas? I am using angular.js in asp.net mvc app, and I don't need angular to control anything related to address bar or the links...
Right now in html5 mode disabled ($locationProvider.html5Mode(false)) it adds hash and action method's name to the address-bar, for example: you go to \Home\index, it navigates and then address bar text changes into Home\index#\index. ain't that's annoying?
if I enable html5 mode it stops loading pages at all (except the initial). I try going from initialy loaded page to another - it changes the address-bar's text (without adding hashtag thing this time) but won't load the page itself. ain't that frustrating?
A makeshift solution exists here AngularJS 1.1.5 - automatically adding hash tag to URLs
The answer explains the first step (as explained above, with the addition of the new hash-prefix)
yourApp.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
The first bit handles Angular interfering with your address-bar visually, but now clicking on any links doesn't function properly as (read: history.pushState)
So, the workaround, as pointed out by user #Kevin Beal is some variation of setting the target of the <a> to _self
$('a[href]').attr({'target':'_self'})
or on a case-by-case basis:
Foo
Bar
Although, for the sake of convenience and sanity, I think it's combination of these.
Markup sans target
Foo
Bar
JS
// If `http` protocol present, assume external link
$('a[href^="http://"]').attr({'target':'_blank'});
// Otherwise, assume internal link
$('a:not([href^="http://"])').attr({'target':'_self'});
Worth noting that the above selectors do required jQuery proper.