Angular JS ui-router on Internet Explorer 8 - angularjs

Has anyone gotten the Angular JS ui-router quick-start to run in IE8? The quick start's here:
ui-router quick-start
It's working in chrome but not in IE8.
Thanks!
[Edit]
I have read the ie documentation under angular js but the fix provided doesn't seem to fix the issue (missing forEach method). The fix only addresses issues with angular js and not angular-ui-router.
The only thing that works is from an answer here: AngularJS - IE8 html template. The basically provides an implementation for forEach which is not supported in IE.

Can you try building off of master? There was a pull request merged just after the last release (https://github.com/angular-ui/ui-router/pull/392) that resolved some IE8 issues. Everything else should work fine AFAIK.

Related

Angular Material fabSpeedDial

Angular Material fabSpeedDial is not working in Andriod Mobile.
(Important Note:ISSUE OCCURS IN ANDRIOD MOBILE ONLY WHEN I USE, jquery-2.2.3.min.js)
I have a demo code taken from the following codepen link
Angular Material fabSpeedDial
If i remove that jquery-2.2.3.min.js, then the functionality works fine both in mobile and desktop.
But iam in a situation where i cannot remove this jquery-2.2.3.min.js. I also tried having lower version of jquery like 2.2.2 , 2.2.1 etc, but same results.
Please help me in finding a solution for this problem.
This issue is fixed after updating angular-material.js to v0.11.2

Use AngularJS (Angular1) module from Angular2 project

Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I'm at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!
Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you're adding Angular2 components to - not the other way around - so what I'm hoping to do may not even be possible. What I've tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I'd then like to integrate components from the existing library (AngularJS-based) into this.
I've tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component
I've tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module
Neither of these seem to work - the component fails to show, and the browser console tells me I've got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
My best guess at the moment is that this is actually an unsupported scenario, and I need to have a 'proper' AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I'm missing here?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):
upgrade.bootstrap(document.body, ['heroApp']);
These two answers could help you:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
So the major problem in this case turned out to be the fact that it appears that the upgrade components aren't included as part of the basic angular 2 bundle. After adding:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
to my index.html file the error I was seeing disappeared.
Thanks to the answer here for pointing me in the right direction!

Angular animations not working for Ionic v1.2.4 (angular v1.4.3)

I recently had to upgrade my Ionic app's version [as I migrated to a different machine], everything worked well and as expected in the app with the exception of animations. All the angular (angular animate) based animations I had no longer work! They were basically CSS transitions applied to the .ng-enter and .ng-leave classes.
I was wondering if this problem has something to do with Ionic now using angular v1.4.3? I read here and here that it's a bug associated with the 1.4.x versions of angular?
Has this issue been reported before? if so... is there a workaround?
Thanks in advance!

angular animate function expected error in ie9

I am using angular-animate.js in angularjs ui grid plugin. But in ie9 I am getting error "Function expected" in function fireDoneCallbackAsync(). Please see the attached screenshot. How can I handle this error and also I am not clear from which part of the code this error is being thrown.
Although most modern browsers have good support for CSS transitions and CSS animations, IE9 and earlier do not.
If you want animations that are backwards-compatible with older browsers, consider using JavaScript-based animations.
Described here in detail.
The problem was due to having different version of angular js and animate js. My animate js was 1.2.26, recently I update angular js to 1.3.15, that resulted this error. After updating animate js also to 1.3.15 has solved the problem.

AngularJS 1.3 with ngbp framework doesn't load in chrome browser when using ng-strict-di

I'm working on an AngularJS web app using the ngbp framework (formerly ng-boilerplate) which by default uses AngularJS 1.2. The project is in early stages so we're experimenting with using AngularJS 1.3 instead of 1.2, as it has some nice features we'd like to make use of. We're also working under the assumption that AngularJS 1.3 will likely be the release version by the time we go live.
So I simply switched the AngularJS version number in the bower.json file and everything seems to work fine in Chrome, Safari, and Firefox except for when I enable strict dependency injection (ng-strict-di). When strict DI mode is on I get the error below (more detail here), but it only occurs in Chrome (FF & Safari both still work as expected).
Failed to instantiate module ng due to:
Error: [$injector:strictdi] function($provide) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.3.0-build.3121+sha.a4520a7/...)
at http://localhost:8080/assets/ngbp-0.3.2.js:87:12
at annotate (http://localhost:8080/assets/ngbp-0.3.2.js:3352:17)
at Object.invoke (http://localhost:8080/assets/ngbp-0.3.2.js:4036:21)
at runInvokeQueue (http://localhost:8080/assets/ngbp-0.3.2.js:3964:35)
at http://localhost:8080/assets/ngbp-0.3.2.js:3973:11
at forEach (http://localhost:8080/assets/ngbp-0.3.2.js:338:20)
at loadModules (http://localhost:8080/assets/ngbp-0.3.2.js:3954:5)
at createInjector (http://localhost:8080/assets/ngbp-0.3.2.js:3894:11)
at doBootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1494:20)
at bootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1509:12
It seems that for some reason the angular source code itself is failing the strict DI test and thus won't load in the Chrome browser from within the ngbp framework. The above error comes from a fresh clone of ngbp with the only change being the version of AngularJS (1.3), not from our actual project (though the error is the same in both cases). I know that this version of ngbp doesn't officially support Angular 1.3 but as I said the app seems to work just fine with this change, even though it fails this test. I'm wondering if anyone might have some insight into what is causing this error and whether or not it would be ill-advised to proceed with this combination of AngularJS 1.3 and ngbp (version: 0.3.2)? Is there something else within ngbp that needs to be changed along with the version of AngularJS?
If it helps I'm serving up the files locally via cd ../bin; http-server -p 8080. If any other information would help just let me know and I'd be happy to provide it if possible.
Thanks for your time.
EDIT: If it helps I tested on OS X 10.9.4 with the following browser versions:
Chrome (Version 36.0.1985.143)
64-bit Chrome (Version 37.0.2062.94)
Firefox (31.0)
Safari (Version 7.0.5 (9537.77.4))
Looks like you might be using batarang, it does not work well with ng-strict-di. Try disabling batarang from google chrome developer tools and the app should start normally again.
[edit] AngularJS batarang now support ng-strict-di since v0.5.0. This error should no longer happen.

Resources