I need help. I build web app with angularjs 1.2.5 and angular-ui-router. When I use angular-ui-router v0.2.0 all works fine. But when I have upgraded angular-ui-router to v0.2.5 or v0.2.7 I see empty page. At chrome DevTools console I see that all templates run but nothing showing on page. And are no errors in DevTools console.
I had the same experience moving from v0.2.0 to v0.2.7. Removing ng-cloak from the ui-view element was the solution in my case.
I changed
<div ui-view="page-wrapper" class="ng-cloak" ng-cloak></div>
to
<div ui-view="page-wrapper"></div>
I moved ng-cloak to the template.
Related
We have an AngularJS application. The "main" template is out of it's reach: it's generated by a CMS. We have no idea how the page is going to look like. The AngularJS application starts wherever there's an AngularJS component.
It's not a SPA, we only create interactive components that live until a page refresh comes along.
We bootstrap the application with angular.bootstrap(document, ['App'], { strictDi: true });
A very stripped down version:
<html>
<body>
<div>
<usermenu></usermenu>
</div>
<div>
<item-list></item-list>
</div>
</body>
</html>
We would like to migrate to Angular (6 at the time of writing). I created an app using the cli and merged the generated application with our AngularJS application.
I then followed the ngUpgrade tutorial at https://angular.io/guide/upgrade. Although it is outdated (Still uses SystemJS!) I managed to get up and running: My AngularJS application is bootstrapped by Angular.
In the above mentioned example I have two AngularJS components: usermenu and item-list. They both use an arbitrary amount of services.
As time goes by two things happen:
I convert usermenu as an Angular component, but I am NOT downgrading the component
I create a new Angular component (ie: signout-button)
Consider my new template:
<html>
<body>
<div>
<usermenu></usermenu> <!-- Angular component -->
</div>
<div>
<item-list></item-list> <!-- AngularJS component -->
</div>
<div>
<signout-button></signout-button> <!-- Angular component -->
</div>
</body>
</html>
Will the following template bootstrap both Angular AND AngularJS components?
Or do I need to downgrade both Angular components for it to work?
The ngUpgrade guide mentions something like "AngularJS OWNS the root component". To use an Angular component inside AngularJS you need to downgrade it. To use an AngularJS component inside Angular one needs to upgrade it. But since I have three root components, will it work?
I tried of course, but I was unable to get it working. I have a feeling that the "root component" that AngularJS owns isn't one of the components found, but the element the application is bootstrapped on (document in my case).
Can someone confirm this so I know downgrading components is the only way OR perhaps point me in the right direction on bootstrapping with Angular and AngularJS components "next to eachother" ?
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 am using Angular 1.3.14 with Angular Route.
Now, I have some specific links like this one:
<a target="_self" ng-href="#next" role="menuitem">Next</a>
And on this link there is a jQuery plugin attached, that opens/closes the accordion. Now currently, it just takes AngularJS routing into effect and redirects me to /#next. How can I disable that ?
I have tried setting target="_self", but no luck.
I am using a Bootstrap 3 based template called Unify and implemented Angular JS with ui-routing. Most of it works fine. Just my whole navigation is in the header and I use ng-include to inject the header from a html template file. Them the hover dropdown js plugin does not work anymore. My Code looks something like this.
<header ng-include="'templates/header.html'"></header>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
and the plugin is called before the tag with the rest of scripts needed.
It works fine when I use the files as is without the Angular JS it also works fine with Angular JS if I don't inject the code but leave it in the index.html as is but not as now.
Hopefully somebody can help me out because I have the same problem with the parallax slider with for convenience sake I just keep in the index.html for now.
Thanks,
Gerd
Thanks to the detailed answer Chris T gave me in another question I found it is a scope related issue. Now I am loading the hover dropdown js within the template file and it works fine.
I ran into the same issue, and tried loading the hover dropdown js in a script tag in the template. That resulted in an error (Like the one here: Can AngularJS ng-include load a Jinja2 processed html on FLASK?)
So instead of doing that, I got it to work by creating a controller for my template and inside the controller I added the drop down hover via:
$('.dropdown-toggle').dropdownHover(options);
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.