i am using angularJS 1.6.4 but when we view the page in IE8 we are getting the below errors
Message: 'angular' is undefined
As others mentioned, IE8 is not supported by AngularJS, but there is a npm package called angularjs-ie8-build which can be used, however they also not guarantee that everything will work.
In order to use this package, you need :
es5-shim
jQuery 1.*
AngularJS 1.4.* build from this repo (some poly-fills are baked in and minor fixes to enable IE8 support)
You need to add this in your head tag before loading angular :
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.ng-hide {
display: none !important;
}
</style>
<![endif]-->
For more information read the package description :
https://www.npmjs.com/package/angularjs-ie8-build
Related
Why kendo load before Jquery in angular routing template with Kendo grid.
I have ordered the scripts, while clicking any event through angular routing templates getting this error in console.
Note: In page refresh, scripts loaded properly, the application works fine, not getting any error.
Only occurred in event routing. kendo load before jquery why.
order scripts :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://code.angularjs.org/1.3.8/angular.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="https://code.angularjs.org/1.3.8/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
I had the same issue: I was loading jQuery twice.
Had the same issue. Resolved it by using the jQuery and angular that comes bundled with kendo
I went to the Angular Strap and took the scripts right off of the website
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/v2.3.2/angular-strap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/v2.3.2/angular-strap.tpl.min.js"></script>
I added https: since I am running these without a server. However, I am getting 404's. Not sure why? I am using angular 1.4.6 which seems to be what is modeled.
That's because the urls are:
https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.2/angular-strap.min.js
And
https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.2/angular-strap.tpl.min.js
See: http://cdnjs.com/libraries/angular-strap
I tried working on the following plunker example which works fine with angular version 1.2.x.
But when the angular version is updated from 1.2.x to 1.3.x.
It does not seem to work.
The views does not seem to change when I click on the other tab.
http://plnkr.co/edit/nmTggEdWIcMW5bMRKiok?p=preview
The following change was made to the plunker.
<script data-require="angular.js#1.3.x" src="http://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script data-require="angular-animate#*" data-semver="1.3.15" src="http://code.angularjs.org/1.3.15/angular-animate.js"></script>
When tried on the chrome, there were no errors generated on the browser console but the views did not change when clicked on the second tab. Browser used Chrome-latest-version.
Might be a duplicate of
AngularJS, animations with ui router which versions work?
PS: I tried different combination of the bootstrap versions and angular-ui-router versions with angular 1.3.x. Was not able to find a successful combination. I use angular-material-design which requires angularjs version to be 1.3.x. Any help on this issue would be appreciated.
I have created an MFP project with the MFP CLI
After creating the project, I ran "yo mobileangularui" in the project root to install Mobile Angular UI
This scaffolds out a Mobile Angular UI project with AngularJS and Gulp
I am minifying all the js and css files, including the MFP javascript files and putting them in the MFP common folder with gulp
Everything loads fine when I view it in the MFP console, but not on localhost.
My problem is that the sidebars do not work when I click on them. I am not getting any errors. I log a message console.log when I click the menu button and it comes through fine, but it doesn't open the side bar.
If I build this project with out MFP everything works fine.
Not sure whats going on as everything with MFP seems to load fine in the console.
Some images:
https://drive.google.com/file/d/0B48-zmJJTxrYamgtcEtiNi1OMmc/view?usp=sharing
https://drive.google.com/file/d/0B48-zmJJTxrYeG1NUHNpbHA0ZUE/view?usp=sharing
I have never used AngularJS Mobile UI tooling, but the WL is undefined error (that is discussed in the comments) is occurring because of the way you are injecting source to the index.html.
This is how the resulting (part of the) HTML should look:
...
...
<script src="worklight/cordova.js"></script>
<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>
<script src="worklight/checksum.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="js/app.min.js"></script>
But this is how it's actually looking:
...
...
<script src="worklight/cordova.js"></script>
<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>
<script src="worklight/checksum.js"></script>
<script src="cordova.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="js/app.min.js"></script>
As you can see there are two Cordova references, one correct (worklight/cordova.js) and one incorrect (cordova.js)
The extra cordova.js is apparently coming from gulpfile.js at line #148 where it inject.push (path-to-cordova.js). This injection should be removed or handled differently because MFP already uses Cordova and injects it. Use MFP's.
You can also fix the header. It seems to happen because of the following in app.min.css:
.app-body, .app-content {
height: 100%;
overflow: hidden;
display: block;
padding: 0;
}
Change padding: 0 to padding-top: 25px;. But that may be iOS-specific... meaning you will not see it when previewing the app in the MFP console, because there is no status bar there unlike in the iOS Simulator/device.
The problem with angular mobile ui was my manual bootstraping of angular for MFP
i was using
angular.element(document).ready(function(){
angular.bootstrap(document, ['yoMAUI']);
location.hash = '/';
});
When I need to bind to that body and not the document like so
var body = document.getElementsByClassName("body") ;
angular.element(document).ready(function(){
angular.bootstrap(body, ['yoMAUI']);
location.hash = '/';
});
Is this going to mess with MFP at all, it all? seems to be running fine in the console
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.