I have an angular page with the following structure:
<div ng-controller="MainCtrl">
<div ng-controller="HeaderCtrl">
<div ng-view>
The problem is, any links located within MainCtrl div and outside HeaderCtrl div work well, but the links inside HeaderCtrl, for some reason, cause a full page reload, instead of being intercepted and handled by Angular client side router.
What am I doing wrong? how do I prevent this?
Thank you.
I must add I am using html5mode.
EDIT: OK it was some crappy hiden non-angular JS changing the onclick attribute.
You should look at the ui-router to handle nested controllers. The basic ng-router handle it not gracefully and cause bugs likes yours.
ui-router API is very close from ng-router making it simple to switch to it. It will fix your bug and allow you to use nested templates / controllers inside your routes.
OK it was some crappy hiden non-angular JS changing the onclick attribute.
Related
I need to get some information from a webservice before anything is loaded, for all routes. In fact, that webservice is in charge of getting the proper "theme", so it must be known before anything loads.
Until now i solved this kind of issues with the "resolve" property of each route. I don't know if this would be enough tough.
Anyway, adding that resolve condition manually to all routes doesn't sound good to me. Is there a ellegant way to do this?
You could have an ng-init in your AppCtrl that you load in your index.html (where you have your main ng-view). Consequently, you could store the state/result in the rootScope or in another way in which it is accesible to all your controllers.
<div ng-app="myApp" ng-controller="AppCtrl" ng-init="callWebservice()">
<div ng-view></div>
</div>
From what I've read, Angular doesn't support multiple views out of the box for URL changes.
What I really want is to have a set of controllers in charge of different parts of the application UI, that each respond in their own way to route changes.
Is there a common solution for this, or am I thinking about the application structure in the wrong way?
The ui-router plugin doesn't appear (to me) to solve this particular problem in the way I'd like - it's a state-first approach with optional URL changes, as opposed to URL-first.
Angular actually does support multiple views out of the box, what it doesn't support is multiple ng-view out of the box. You can use ng-include and place a controller on that element and watch for any route changes you need.
Essentially you'd do something like this:
<ng-include src='"menu.html"' ng-controller='MenuCtrl'></ng-include>
<div ng-view></div>
The ng-include's controller you would be watching for route changing and doing whatever is needed.
The ng-view of course is driven by the route changes setup in your app config.
I am trying to create two tabs using Angular UI (Bootstrap), in which one tab lets the user input HTML, and the other tab serves as a "Preview", rendering the HTML provided.
To handle the preview, I am using the contenteditable directive demonstrated here.
However, this directive does not seem to be working using Angular UI tabs. I believe there may be a scope issue at play, but I haven't been able to track it down. I have already found examples of "gotchas" here, but this doesn't seem to be the issue in my case.
A Plunker of non-working code can be found here. In this example, not only is the HTML not getting rendered, but the scope updates seem to be sporadic.
Any help is greatly appreciated!
You can do this without that directive at all. You just need to use the $sce service in angular. See this plunk
I'm using $location.path() to load new view inside my angular web site.
My page looks like :
<html>
<head>
</head>
<body>
<div data-ng-view="" ></div>
</body>
</html>
And I change the ng-view depending on the demands (index, home, login, etc).
Some times the navigation seems slow (some glitch stay within the page while 0.1 secs) is there a way to make the navigation instant ?
Also, I tried the ng-animate which improved that feeling but not completely.
I guess that preloading my 'views' will be one solution ..
Edit :
Feeling improved by adding :
myApp.run(function ($templateCache, $http) {
$http.get('Template1.html', { cache: $templateCache });
});
You can use a far superior library for managing states and views such as Angular UI Router.
It has support for pre-loading each resource that is needed in your nested state before rendering it (via the resolve property), in order to avoid flickering of the interface, but you can also load each resource you want individually after you have rendered your view. If you don't want to refactor your app to use ui-router (which imo makes every app far more manageable), then you'd be stuck with using $templateCache and managing the resources of your views manually.
A trick you can try to do is have your view's controller load the resources it needs after having been rendered. Also, maybe you have repeating parts of your app view wise, try to extract them in separate templates and reuse them if you can. If you can split your app in such a way that it doesn't re-render everything every time you change view, it would probably have beneficial effect on rendering speed.
Thanks to Baba. But I found a solution which does not involve to change my route (and use another library such as Angular UI Router (which is by the way super!))
My solution : preload my templates with the $templateCache and add animation (nice tuto : http://scotch.io/tutorials/javascript/animating-angularjs-apps-ngview + http://daneden.github.io/animate.css/)
I have a Yeoman scaffolded Angular-JS+Twitter Bootstrap seed project. I use the Bootstrap navbar on every page of the site for, you guessed it, navigation.
What is the best way to include this in an Angular project... directly within index.html, as a view? Ideally I ought to encapsulate the entire navbar div as a template and simply call it out, just not sure exactly how to do so.
If it should be included on every 'page', include it in your index.html with ng-include.
You would have something like:
<body>
<div ng-include='"path/to/partials/navbar.html"'></div>
...
</body>