We are looking at implementing an Angular Wizard. Though routes are the best way to do it, we would like the wizard to be presented in such a way that it is usable as a directive.
For eg, someone must be able to use the wizard like (with sufficient options) and all the ui-router logic in between should work.
Is it possible in Angular to wrap the ui-router logic into a directive? Can we declare directives whose dependency is the ui-router (or something like the routeProvider) and start routing inside a directive?
Related
Can i traverse the DOM in angular like jquery ? In jquery there are multiple functions like parent(),siblings(), find(), children() etc... like this, Is there any functions in angularjs?
Is there any 'this' keyword in angular DOM traverse like jquery where in jquery this means the current element ?
Any reference links will be more helpful.
Angular comes with a cut down bundled version of jQuery, called jQuery lite:
Docs
In the main, full blown Jquery and Angular can live together, however it is recommended not to use them at the same time - there is generally a much better angular way of achieving what you need to do. For instance testing your logic will be easier.
"This" in your example would refer to something off the current controller and on that controller's scope. It is recommended that you use angular to control and manipulate that element in angular.
I am learning what logic to put in Angular's various components, but am left unsure of the Angular-way to handle manipulation of the $location.
I have some code that I would like to convert to Angular. It takes the document.referrer and based on various factors, may scroll to an anchor in the page (/page#scrollTo).
Where would one put the logic for this in Angular? It does not seem suitable for a controller.
For your anchor scroll example, Angular provides an $anchorScroll service: https://docs.angularjs.org/api/ng/service/$anchorScroll. In the docs example, $anchorScroll is used within a $controller. This would be a simple solution when using angular-route.js.
If instead using angular-ui-router.js, then scrollTo's would likely be handled by the $urlRouteProvider. This SO answer: What is the difference between angular-route and angular-ui-router? provides good info about the added functionality of ui-router.
There are two ways (AFAIK) to associate a controller with a view template/partial: the route specified in $routeProvider and the ngController directive. Especially (but not exclusively) for simple routing, is there any benefit/efficiency of one over the other?
My project currently uses the $routeProvider approach, but I've been given the task of nesting views. This seems simple enough with ngInclude, as long as the partial specifies its ngController.
This question really comes down to design and as such it is a bit opinion based. That in mind, the best guidance I know is:
$routeProvider - Allows you to specify a single controller for a template. Since this is part of the routing it makes it easy to find the controller that goes with the page. I use this to store and load overall page logic rather than element specific logic.
This is also important because it means you can load the exact same template for two different routes but the behavior and data could be different because the controller can be changed. This is not something that is easy to do with the ngController option.
ngController - This scopes the controller to a specific element on the page/template. That can make the code easier to read when you need multiple controllers on a single page and it allows the controller to be more specifically scoped.
So it really comes down to scope and intent. Hopefully these rules will help when deciding which to use.
If you think of a view including all scripts as a self-contained package, developed by a single person or team, then ngController is the way to go, imho.
$routeProvider on the other hand provides you with advanced features like injection of values via the resolve property of the route. That way you can have your AJAX loaded data directly injected into your controller, e.g., instead of the controller having it to get itself. Or have the route change to wait for that data etc.
Btw: If you need routing and nested views you can take a look at angular ui-router
I am using Angular UI Bootstrap Datepicker. I want to add behavior to this component. According to this guide, Extending Directives, I proposed some changes to this component. Changes can be view there: GitHub PR #257.
So now, I am trying to require it inside my extension but Angular keep saying he can't find datepicker controller.
I read this thread on SO AngularJS directive controllers requiring parent directive controllers? in which the answer basically shows the same and it seems working, Fiddle.
I looked at the Angular version which is 1.0.3 in the Fiddle and I am using Angular 1.1.5.
Did this change in latest Angular version or am I doing it wrong?
According to the comments, indeed, it still works with AngularJS 1.1.5. And ended finding what was messing up. As I wanted to extend the core functionalities, I wanted to edit the original template so I used the templateUrl and provided a path to a custom template, which worked when stacking the directives but the same when requiring directives mess the things up.
Do you know how I can override original template in this context?
I've making use of AngularJS Partial templates to create a dashboard. There is a listing view and when you click on an item, it switches to an Items-Detail partial.
Inside the Items detail partial, I'd like to show some charts via RGraph. However, for the life of me, I can't figure out how to do this.
I can't seem to invoke javascript from inside the partial html. So I think I need to do it in the controller, or maybe create a directive?
I'm pretty new to AngularJS so my understanding is still very rudimentary and likely misguided.
AngularJS ("jqlite") doesn't support <script> tags inside partials.
Include jQuery on your page, however, and it should work. Note that jQuery must be included before AngularJS.
See also AngularJS: How to make angular load script inside ng-include?