I have included the following scripts in my web application. But I get the error Backbone is undefined when I browse the page.
<script src="Scripts/modernizr-2.6.2.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/backbone.js"></script>
<script src="Scripts/underscore.js"></script>
<script src="Scripts/index.js"></script>
What is the problem?
The error “Backbone is undefined” suggests that somewhere in the JavaScript on the page, you’ve attempted to access the global variable Backbone before it’s defined.
Presumably, index.js is the file that contains the JavaScript you‘ve written, and contains the references to Backbone. As it’s included on the page after backbone.js, Backbone should be defined.
The Backbone documentation does describe underscore.js as a “hard dependency”, and the example application there includes underscore.js before backbone.js. So maybe it’ll work if you reverse the order of underscore.js and backbone.js:
<script src="Scripts/underscore.js"></script>
<script src="Scripts/backbone.js"></script>
Related
I have an application that uses AngularJS v1.2.12 but we aren't the people that created. I've searched everywhere how to upgrade v1.2.12 to v1.7.0 but it seems that in installed in a different way.
All I've seen is "update bower.json file" or "update package.json file" but the angular folders are in "app\libs\frameworks\angular" and doesn't has any of those files...
So I don't know if I should change the version manually or run some commands, but I've installed NodeJS and Angular CLI and it throws the same error when I try "ng -update" it says that it wasn't found the package.json file.
Even in the official page I didn't found anything.
Do you have any clue about this?
I've a ViewBag.IsDebug == false that use a XXXFramework.js that seems to be inner of the solution, but in case is ViewBag.IsDebug == true it uses
<script src="app/libs/frameworks/angular/angular.min.js"></script>
<script src="app/libs/frameworks/angular/angular-animate.js"></script>
<script src="app/libs/frameworks/angular/angular-cookies.min.js"></script>
<script src="app/libs/frameworks/angular/angular-route.min.js"></script>
<script src="app/libs/frameworks/moment/angular-moment.js"></script>
<script src="//unpkg.com/angular/angular.min.js"></script>
<script src="//unpkg.com/angular-animate/angular-animate.js"></script>
<script src="//unpkg.com/angular-cookies/angular-cookies.min.js"></script>
<script src="//unpkg.com/angular-route/angular-route.min.js"></script>
<script src="//unpkg.com/angular-moment/angular-moment.js"></script>
Also be sure to read AngularJS Developer Guide - Migrating from Previous Versions.
Also
angularjs 1.6.0 (latest now) routes not working
Error with $http.get in angularJS -- Success not a Function
Why are AngularJS $http success/error methods deprecated? Removed from v1.6?
In the meantime i'm trying to start using angularjs 1.3
In that case use:
<script src="//unpkg.com/angular#1.3/angular.js"></script>
<script src="//unpkg.com/angular-animate#1.3/angular-animate.js"></script>
<script src="//unpkg.com/angular-cookies#1.3/angular-cookies.js"></script>
<script src="//unpkg.com/angular-route#1.3/angular-route.js"></script>
<script src="//unpkg.com/angular-moment/angular-moment.js"></script>
Also use angular.js instead of angular.min.js. It will enable Data Debug and provide better error messages.
I'm new to angular 2.0. Actually I'm blocked by referencing the angular related resources.
As a beginner, I would like to know which js file to reference (compiled TypeScript) in Index.html to start manipulating with Angular Js 2.0.
In the tutorial of http://angular.io I noticed several references below but I'm not sure which one shall I use in my own project. Seems none of the reference below related with Angular by looking at the names. I'm really confused now.
<script src="https://npmcdn.com/zone.js#0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata#0.1.3"></script>
<script src="https://npmcdn.com/systemjs#0.19.27/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
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.
Hello I am using UI Bootstrap for displaying datepicker in my app.
this is my reference order:
<!--ANGULAR CORE-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<!--APPLICATION INIT-->
<script src="app/js/app.js"></script>
<!--JQUERY-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--BOOTSRAP UI-->
<script src="app/js/libs/ui-bootstrap-tpls-0.11.0.min.js"></script>
I use the tpls version because it supposes to include the templates.
I inject the dependency like that:
angular.module('globapp', ['ngRoute', 'ui.bootstrap'])
when I try to popup the datepicker it doesn't show. In the chrome developer I can see that the code searches for template folder, and I recieve 404 error (datepicker.html, popup.html).
I searched about that in the internet, and everyone tells the same thing: if I use the tpls version, it should provide me the default templates.
thanks
Your app.js has your app init -so that's where your creating your angular module and are hoping to inject bootstrap-ui as a dependency but that script hasn't been loaded yet as it's last in the list.
This would be the first thing to check. Load your scripts in order of least dependent first so jquery first then your core angular, then your plugin libraries and then your app scripts.
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/