Dependency Management using BOWER - javascript

I have a angular application which requires like 20 different libraries:
<script src="/assets/plugins/jquery/jquery-2.1.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.1/masonry.pkgd.js"></script>
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="/assets/plugins/fushion/fusioncharts.js"></script>
<script src="/assets/plugins/pace-master/pace.min.js"></script>
<script src="/assets/plugins/jquery-blockui/jquery.blockui.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/assets/plugins/switchery/switchery.min.js"></script>
<script src="/assets/plugins/uniform/jquery.uniform.min.js"></script>
<script src="/assets/plugins/offcanvasmenueffects/js/classie.js"></script>
<script src="/assets/plugins/offcanvasmenueffects/js/main.js"></script>
<script src="/assets/plugins/waves/waves.min.js"></script>
<script src="/assets/plugins/3d-bold-navigation/js/main.js"></script>
<script src="/assets/plugins/ion.rangeslider/js/ion.rangeSlider.min.js"></script>
<script src="/assets/plugins/metrojs/MetroJs.min.js"></script>
<script src="/assets/js/modern.min.js"></script>
<script src="/assets/plugins/moment/moment.js"></script>
<script src="/assets/js/angular.js"></script>
<script src="http://passy.github.io/angular-masonry/angular-masonry.js"></script>
<script src="/assets/js/rz-slider.js"></script>
<script src="/assets/plugins/fushion/angular-fusioncharts.min.js"></script>
<script src="/assets/js/angular-translate.js"></script>
<script src="/assets/js/angular-translate-loader-static-files.js"></script>
<script src="/assets/js/tmhDynamicLocale.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-sanitize.js"></script>
<script src="/assets/js/calendar/calendar.js"></script>
<script src="/assets/plugins/fullcalendar/fullcalendar.min.js"></script>
<script src="/assets/js/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="/assets/js/ui-bootstrap-tpls-0.9.0.min.js"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.2.4"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.2.4"></script>
<script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.2.4"></script>
<script src="/assets/plugins/lightbox/js/lightbox.min.js"></script>
<script src="/assets/js/angular-ui-router.js"></script>
<script src="/assets/js/ocLazyLoad.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-storage-cookie/2.6.1/angular-translate-storage-cookie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-storage-local/2.6.1/angular-translate-storage-local.js"></script>
<script src="/assets/js/ng-infinite-scroll.min.js"></script>
<script src="//code.angularjs.org/1.2.28/angular-sanitize.js"></script>
<!-- Maps -->
<script src="/assets/js/lodash.js"></script>
<script src="/assets/js/angular-google-maps.js"></script>
<script src="/application-modules/app.js"></script>
Now I want to manage it in a better way. I was looking at bower and gulp as the candidates.
So I have a couple of questions:
How do I manage dependencies? In the list above many libraries requires angular version 2.1 but then a library masonry requires angular version 3.1. How do I fix such things?
how do i load my custom js files
Many plugins requires CSS as well. Bower has that covered?
What could be my best approach to implement bower setup on the above list. What I essentially want to do is : First implement bower keeping angular version as 1.2 so I would need all the dependencies to be resolved properly. And then, I would want to upgrade angular version and I would expect all the dependencies upgradation to be taken care of.
Please put some light on the above concerns.

Related

Jquery Plugin is not working when the source file is local

Maybe I am careless with sequencing the jquery plugins but I found it perplexing why is that the jquery plugin is not working when the source file is coming from local but when I try to use the cdn source it is working fine.
Here's the JS Plugin Structure [Non-working one]
<script src="./plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="http://www.fuelcdn.com/fuelux/3.13.0/js/fuelux.min.js"></script>
<script src="./plugins/datatables/dataTables.bootstrap.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="./plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="./plugins/fastclick/fastclick.js"></script>
<script src="./dist/js/app.min.js"></script>
<script src="./dist/js/demo.js"></script>
<script src="./plugins/fullcalendar/fullcalendar.min.js"></script>
When I try to use the datetimepicker it return a "Uncaught TypeError. datetimepicker is not a function".
When I use the cdn source file instead it works
<script src="./plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="http://www.fuelcdn.com/fuelux/3.13.0/js/fuelux.min.js"></script>
<script src="./plugins/datatables/dataTables.bootstrap.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="./plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="./plugins/fastclick/fastclick.js"></script>
<script src="./dist/js/app.min.js"></script>
<script src="./dist/js/demo.js"></script>
<script src="./plugins/fullcalendar/fullcalendar.min.js"></script>

Which jQuery libary should i include in my website?

In my website i have few jquery because i have a few funcions (sticky header, anchors and animations). I want to know is it neccessery to include all of it or i can include only one or two ?
Here is my included jquerys
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
You should include the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
This configuration will only support IE9+
If you need IE7 or IE8, use:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>

How to add angular-material into an existing plunker project?

I am following the README of angular-material where the last step of settup is:
Once you have all the necessary assets installed, add ngMaterial as a dependency for your app:
angular.module('myApp', ['ngMaterial']);
However...as soon as I added the ngMaterial dependency, my plunker stops running angular expressions:"script.js on plunker".
How can I use angular-material in plunker project? Or did I make a rookie mistake?
EDIT: I can retrieve angular-material with both http and https from my browser, but if I am using an online code sandbox...ie: I can't use angular-material using stackoverflow snippet
//I am using https...but following code does not work on stackoverflow
angular.module("myapp",['ngMaterial']).controller("controller",function($scope){$scope.angularexpression="controller is running";});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<link data-require="angular-material#1.0.0" data-semver="1.0.0" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" />
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular.min.js "></script>
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-route.min.js "></script>
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-messages.min.js "></script>
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-animate.min.js"></script>
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-aria.min.js"></script>
</head>
<body ng-controller="controller">
{{angularexpression}}
</body>
</html>
hmm...after I downloaded the zip file from plunker and debugged it locally, here is the fix:
instead of using the default external library loader of plunker, you need to replace it with the following:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" />
<script src="https://code.angularjs.org/1.4.9/angular.min.js "></script>
// order matters, plunker load material before angular, which will not work
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-route.min.js "></script>
<script src="https://code.angularjs.org/1.4.9/angular-messages.min.js "></script>
<script src="https://code.angularjs.org/1.4.9/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-aria.min.js"></script>

How can I make my JS script calls in Magento appear on one line?

I am doing various modifications to my NGINX Magento server and part of this is to do front end optimisations
I am currently using a CDN plugin to host my JS but Magento always calls JS lines (huge massive calls to JS libariries which looks ugly in the code view) that I want to combine to one line.
I know you can use Admin > Developer to merge JS files but I dont want to do this. I want to make this:
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/js.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/form.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/translate.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/product.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/configurable.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar-setup.js"></script>
Change to
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/prototype/validation.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/builder.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/effects.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/dragdrop.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/controls.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/slider.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/js.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/form.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/translate.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/cookies.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/product.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/configurable.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar-setup.js"></script>
I think is what you're looking for. I tested this with Magento 1.9.2.1.
In this file Mage_Page_Block_Html_Head, function getCssJsHtml() on line 210 character 112-119 you'll find this . "\n". Remove that from the function and your JS files will be rendered in one line as you requested.
Keep in mind not to modify core files but to extend the class and override only this function to maintain rest of functionality.

What is the correct sequence of including jquery files?

Today i wanted to add datepicker() to my page.So I downloaded jqueryui and added then in the sequence below.
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
It didn't work. It took me whole day to figure out what is wrong. it was the SEQUENCE of js files included!!! To work my code i had to include them like bellow.("jquery.js" position had to change)
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
Can some one explain this please. Please give me a Source so I wont make this mistake again.
Normal jQuery (core)
jQuery migrate if you have
jQuery UI
jQuery mobile
Scripts that need jQuery / scripts that are jQuery plugins
Other scripts like bootstrap
You own scripts depending which is needed first
First you have to include normal jQuery library.After that You have to include other jquery library like jquery ui and jquery mobile and all finally you have to include your own javascript files.
As mentioned in comments you have to mention the scripts in the order you use that.
Simply anything used Jquery will goes after jQuery, anything that depends on jQuery UI goes after jQuery UI etc.

Categories