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>
Related
Is it possible to load multiple controllers one by one or at a time. If yes then Can anyone tell me how to load two different controllers at the time of loading page in AngularJs. I'm using routing.
Thank you.
You can just refer them in the index.html in the order you want
<script type="text/javascript" src="controller1.js"></script>
<script type="text/javascript" src="controller2.js"></script>
Apart from just referring them on index.html as #Sajeetharan suggested how about:
<ANY ng-controller="controller1 as ctrl1">
<ANY ng-controller="controller2 as ctrl2">
....
</ANY>
</ANY>
The way you are trying to solve this issue is wrong you can't control these things in a controller every time. Rather than calling both controllers you can use a service that will be doing this for you and you can call this service anytime you want in any controllers.
For your problem add this relogin to a service and call it whenever the controller loads in that way it will more feasible.
fairly new to Angular and have looked around this site fairly extensively, but most of the $location related threads I've found have to do with authentication and routing.
My question is: what is the best method for 1) setting up a watch on the current $location.path(), and 2) updating the view via a custom directive based on the current path?
I am currently using the ngView directive to update the majority of the page (routing works fine - no changes needed here). I now want to create a 'custom nav widget directive' that updates based on the current path, but doesn't need to go in my ngView templates (seems like a lot of repetitive code). To be clear - don't have any code written yet for the custom nav functionality. I am more looking for some guidance on best way to accomplish this and a rough outline on how.
<body>
<div ng-view></div>
<div custom-nav-widget-directive></div
</body>
I get that you want an answer that focuses on your suggested approach. But you might want to take a look at UI-Router. A powerful third-party alternative to the standard ngRouter.
UI-Router allows for Multiple Named views. You could have something like:
<body>
<div ui-view>
<div ui-view='nav'>
</body>
Where everything under div[ui-view='nav'] can change independently from the rest of your page/app which would in turn render under div[ui-view]. This would keep your nav logic and template(s) apart from those of the rest of the app/page.
Once I got to know it, UI-Router made me decrease my need for directives. Each router state and its views need their own configuration object like normal routes-- or directives for that matter--, with a controller, template, etc... Pretty cool.
If you decide to give a try do let me know, I'd be glad to help kickstart the learning curve.
Is there an easy way using ui-router to force all my controllers to only be initialized once? Like a singleton. As of right now, every time I change to a state, the controller linked to that state is reinitialized. I don't want this to happen. This seems like it should be simple, but I could not find a solution to this anywhere online.
A common way to handle things like one-time or global operations is to have an application level controller on an element that wraps all your ui-views:
<html ng-app="app">
<head>...</head>
<body ng-controller="ApplicationController">
<div ui-view></div>
</body>
</html>
ApplicationController can then reponsible for one-time operations. It gets initialised once (when the app starts) and will persist between route and state changes.
The controllers associated with your states should only be concerned with constructing their own views, not performing one-time operations. If the state controllers need to access shared data, then that data should be stored in a service as suggested by ABOS. State controllers should request that shared data from the service, and the service should be the one deciding if it should return cached data, or make a fresh service call.
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 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.