We have UI-Grid components loaded from http://ui-grid.info like below :
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css"></link>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
And all these are failing to load today as of 18-May-2016, Is this site down ??
How can i get all these files back again as we are not supposed to have downtime for our apps.
Also is it suggested to load these files locally and have a reference for the same ??
Any help would be much appreciated.
Yeah looks like it is down, the Domain name has been canceled.
When you link to external libraries you are always at the mercy of the publishers, they could decide to block remote linking whenever they want to or close the site down.
Anyways your source files luckily still available on GIT: https://github.com/angular-ui/ui-grid
Me too waiting to see something on it's documentation:
BTW, to your problem , replace those broken urls with followings:
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.css
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.js
https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid-csv-export.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/pdfmake.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/vfs_fonts.js
I am not sure about ng-grid-csv-export.js but others should be OK.
Related
Up until now I was using links to minified AngularJS files in my code, but now there is a requirement because of which I have to use complete AngularJS file. I have downloaded it from the official site, and:
<script src="../Angular/angular.js"> </script>
<script src="../Angular/angular-animate.js"></script>
<script src="../Angular/angular-aria.js"></script>
<script src="../Angular/angular-cookies.js"></script>
<script src="Angular/angular-loader.js"></script>
<script src="../Angular/angular-message-format.js"></script>
<script src="../Angular/angular-messages.js"></script>
<script src="../Angular/angular-mocks.js"></script>
<script src="../Angular/angular-resource.js"></script>
<script src="../Angular/angular-route.js"></script>
<script src="../Angular/angular-sanitize.js"></script>
<script src="../Angular/angula-scenario.js"></script>
<script src="../Angular/angular-touch.js"></script>
and this is how I added all these files in my code, but it is not working, please let me know what is the correct way of using complete AngularJS file.
Your path for angular-loader is different from the rest of your paths. I'm not sure if any of them are correct. I'd recommend starting the Chrome developer tools and then going to the Network tab to see if all of your resources are loading correctly.
Looking at your codepen it appears that you are reloading the Angular libraries later in your HTML. That is probably causing Angular to reinstantiate and therefore destroying whatever you've done in your code in between. Try deleting or commenting out the lines where you load Angular from cloudflare.
In my angular project, I am planning to have a separate .js file for each page and a separate .js file for each service.
However, as I begin to code, I realized that I have a lot of import statement in my index.html. This would cause user having to load all the .js file even if they might not need it.
An example of the .js for my index.html
<!-- JS -->
<script src="js/vendor/angular.js"></script>
<script src="js/app/app.js" ></script>
<!-- controllers -->
<script src="js/app/controllers/roomController.js"></script>
<script src="js/app/controllers/dashBoardController.js"></script>
<!-- services -->
<script src="js/app/services/dashBoardService.js"></script>
<script src="js/app/services/roomService.js"></script>
<script src="js/app/services/chatService.js"></script>
<script src="js/app/services/videoService.js"></script>
Is there any solution to this?
It's really a best practice to have each controller, each service, each directive… in a separate file, so you're doing it in the right way.
However, as you notice, it's better for the user (and for the server!) to download a minimal number of files. Your index.html is fine for development, but in production, you must compress all your files in in one, typically with a tool like UglifyJS or YUI Compressor.
This is a known issue, especially with large projects. A viable solution is using RequireJs . You can find plenty of resources on the web about that, for instance you can try this.
I had exactly the same problem so decided to use RequireJS to allow on-demand loading of my angularJS scripts. I created a wrapper called angularAMD that hopefully can help you integrate RequireJS and AngularJS:
http://marcoslin.github.io/angularAMD/
Yeoman built out my first angular app, and in the index.html, it placed the following code that I'm guessing will be consumed by some build process (I don't know what that process is yet.)
But in the index.html, it broke up the scripts between these 3 comment groups. The last one seems to be where my code goes, but the first 2 are somewhat arbitrary in their distinctions. I'm trying to figure out what they mean, so I know where to insert these pieces that I need to add to make the app usable:
<script src="bower_components/angular-ui-calendar/calendar.js"></script>
<script src="bower_components/ng-grid/ng-grid-2.0.7.min.js"></script>
Do they belong in the first group (build:js scripts/plugins.js) or the second (build:js scripts/modules.js)? And why are jquery and angular outside both of those groups. Feels like I need some kind of handle on what those directives do, but googling for build:js doesn't produce results that seem to be relevant.
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
An explanation or pointers to the relevant docs would be very helpful.
Yeoman built out my first angular app, and in the index.html, it
placed the following code that I'm guessing will be consumed by some
build process (I don't know what that process is yet.)
The "build process" is grunt, but more specifically the grunt-usemin plugin is what will be using the directives inside the comment blocks in the index.html.
Do they belong in the first group (build:js scripts/plugins.js) or the
second (build:js scripts/modules.js)?
That's a decision for you to make. Keep in mind that all the scripts included within each block will get concatenated and minified into a single script include in the built version of the index.html file. The "build:js scripts/plugins.js" instruction is telling the grunt build system that this is a javascript block and to create a plugins.js from the result of concatenating and minifying the contents of the block.
And why are jquery and angular outside both of those groups?
You can group and categorize your scripts however you want, but there are some best practices. For instance, you may want to place all the scripts that are owned by you in one block since they may change frequently. This may help improve caching performance on the client since changes to your scripts should probably not cause all scripts to be re-downloaded. You probably wouldn't want to include jQuery and Angular scripts in the same block as your code because it would build a very large (monolithic) script that would have to be reloaded every time you update your code.
I typically organize my groups either by categories, such as 3rd party plugins, libraries, or modules. Sometimes, if performance is key, I may think about my groups in terms of how frequently I expect the scripts in each category to be updated, that way the user isn't being forced to download code that hasn't really changed.
Feels like I need some kind of handle on what those directives do, but
googling for build:js doesn't produce results that seem to be
relevant.
Read the docs at the grunt-usemin plugin page to learn all about how to use the "directives" you are seeing.
I think jQuery and Angular are outside because by default, grunt cdnify changes those paths to use Google's CDN.
Working with yeoman generator-angular, it assumes that you want to put your css and scripts files in the same server as your index.html file. It generates a dist/index.html file that looks like:
<link rel="stylesheet" href="styles/7d151330.main.css">
<script src="scripts/6f9c9a13.scripts.js"></script>
<script src="scripts/bd6ce9e3.plugins.js"></script>
<script src="scripts/ec88f033.modules.js"></script>
However, I'd like to host the CSS/JS files on a different server and prepended with the URL:
<link rel="stylesheet" href="//mycdn.com/styles/7d151330.main.css">
<script src="//mycdn.com/scripts/6f9c9a13.scripts.js"></script>
<script src="//mycdn.com/scripts/bd6ce9e3.plugins.js"></script>
<script src="//mycdn.com/scripts/ec88f033.modules.js"></script>
I believe this is the YSLOW best practice and is in fact being used by the stackoverflow page you are currently looking at (view source to see their note on https://cdn.sstatic.net/) Having different CDNs doesn't seem to be possible yet with the grunt-google-cdn plugin
My current thought is to perform a search and insert on:
<script src="[INSERTHERE]scripts/
<link rel="stylesheet" href="[INSERTHERE]styles/
UPDATE: There are several grunt plugins that perform a search/replace so this may be the best route.
Any additional suggestions to get a CDN url prepended during a grunt build?
I was looking for the same functionality and it seems like this package would do the job:
https://github.com/tactivos/grunt-cdn
This does the job
https://www.npmjs.org/package/grunt-cdnify
For the standard use case, just set a base string for your URLs – eg, '//cdn.example.com/'. The cdnify task will automatically search for all local URLs in your files, and prefix them with this string. (It will automatically avoid adding double-slashes.)
For more general purpose than just "CDNize" you could use the grunt-preprocess module that allows you to preprocess your source files (html and else).
With this you can build source files depending on any variable.. like different URL by environment, DEBUG code adds, etc ...
More information here : https://github.com/jsoverson/grunt-preprocess
ps: see an another related answer of mine here : How to set AngularjJS base URL dynamically based on fetched environment variable?
I'm trying to modify an example in this website. I run this example on GoogleChrome, But the compiler or whatever it is, gives me the following error
"Uncaught ReferenceError: store1 is not defined".
in my browser, I type the following: localhost/helloext/index.html and I expected to see the result is, RadarFillExample as in the above mentioned website.
index.html Contains the following:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app2.js"></script>
</head>
<body></body>
</html>
app2.js Contains the sourceCode available in the above mentioned website.
And the files(index.html, app2.js and extjs directory) are located inside D:\xampp\htdocs\helloext\
Can anyone tell me how to fix this error, so that i can modify the code?
your help is appreciated
From the error message, its clear that your store named store1 is not defined.
The data store for the example comes from another file namely: example-data.js. Your application should have access to this file or you should define a store with proper data for plotting the graph.
It's been year but I faced this problem today and would like to share a solution.
Yes, you are missing the example-data.js file which is to be referenced from the HTML page. This .js file creates the data that is populated in the chart.
example-data.js can be found under extjs/examples/example-data.js. Note: extjs is the unzipped folder which you downloaded from sencha.com.