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.
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 want to implement Angular JS, Angular JS UI plugins and bootstrap in my ASP MVC 5 apps. Some people say Jquery is still in use in Angular JS part, so could any one here please explain when and where i would need to use JQuery in Angular Js code?
Angular doesn't include jQuery but a light-weight plugin called jq-lite. This provides a lot of the methods that jQuery does, but not all of them.
It specifically has to do with Angular.element. You can take a look at the documentation here
https://docs.angularjs.org/api/ng/function/angular.element
jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.
Basically, there are a couple of pointers to keep in mind
Keep all DOM logic outside of the controllers. Use custom directives on attributes for that.
Instead of simulating mouse events, use their angular counterparts. Examples include ng-click and ng-mouseover. Add these directives to the elements in the form of attributes.
Instead of adding classes, use ng-class
If you are using jquery or jqlite, be sure to include the jquery script before the angular script.
I have started using AngularJS and recently I came across using $anchorScroll service provided by AngularJS. It works perfectly fine. However when I peered into their code I was confused to see DOM manipulation which is used to adjust scrollbar. As AngularJS always says write DOM manipulations only in directives why Core AngularJS doesn't follow this? I mean, at least in case of $anchorScroll?
I don't understand whether it's allowed to manipulate DOM in our services or not? If not why AngularJS itself takes an exception?
I'm working on an isolated scope custom directive that has a few different states.
Does it make sense to use ui-router/ui-view inside this directive in order to handle the states?
It's a "note widget" that lists notes. If there are no notes, it displays a message instead of the list that says they should add a note. If notes are being loaded, it shows that notes are being loaded. If a user adds a note by clicking the add I mentioned above or the + then the view is a textbox. So there is at least 4 different views.
My initial instinct is that it would be polluting the directive and giving it a hard dependency to ui-router and my application because it defines the states. Am I just over worried?
I would tell it this way: yes, use the ui-router, but not for a directive - use it for your appliation. In fact, the best you can do is to read few blog posts and go through sample application to understand the principles. You'll soon realize, that there is no need to use the ui-router partially..
from The basics of using ui-router with AngularJS (by Joel Hooks)
...ui-router fully embraces the state-machine nature of a routing system. It allows you to define states, and transition your application to those states. The real win is that it allows you to decouple nested states, and do some very complicated layouts in an elegant way.
You need to think about your routing a bit differently, but once you get your head around the state-based approach, I think you will like it...
and here AngularJS State Management with ui-router (by Ben Schwartz)
...The most interesting thing about AngularJS's new router, isn't the router itself, but the state manager that comes with it. Instead of targeting a controller/view to render for a given url, you target a state. States are managed in a heirarchy providing inheritance of parent states and complex composition of page components, all the while remaining declarative in nature...
Here I put together all the links, up to date, targeting the sample example, the most interesting code snippet sample.js..
Summary, try to implement the ui-router on the application level. Directive could then by a conductor only, helping your users to navigate, to walk through among states...
I am a total Angular (and JS) beginner.
I want to develop something like this:
(with apologies to #PhillipKregg for borrowing his excellent illustration).
Effectively, I want nested tabbed notebooks - a row of tabs (views?), each which can contain data or another row of tabs (each of which ...).
Googling seems to return more recommendations for UI-Router, but I imagine that UI-Bootstrap's Tabs or Accordion could also be used (or even UI-Bootstrap's Pagination, with a single view whose contents I update according to the selected page?).
All else being equal, I will go with whichever is easiest for a novice to understand and implement (which is that?).
But - are there performance issues? For instance, will one download the content of all the views immediately or initial page load (thus increasing initial page download time)? Will one only download the data for a view when it becomes active (which seems preferable)?
Anything else I need to consider?
Yes, ui-router & ui-bootstrap.tabs are the best tools for the job at the moment. To do something similar would require mixing two types of ui-router config patterns, nest views & multiple named views. I'd suggest reading both these wiki pages:
https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Here's a basic draft demo of something similar to your illustration, using ui-router & ui-bootstrap.tabs: http://plnkr.co/edit/BUbCR8?p=preview
The easiest way to get started is to use ng-boilerplate https://github.com/ngbp/ngbp, it uses ui-router & has best-practice directory structure. It also addresses performance issues by compiling html to js & adding templates to $templateCache, thus kicking lots of XHR requests to the curb.
Regards to data downloads, data would typically be managed by a angularJS service singleton instance, separate from any views. How & when you invoke any service from any view is totally your choice. This is a pretty good tutorial on angular services: http://www.ng-newsletter.com/posts/beginner2expert-services.html
I would recommend to use angular $routeProvider for your task. This will make easy to handle code and view fragments.
With bootstrap you will need to put all the code on single page and that is less manageable. Have a look at
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/ and
For nested views
http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm
Also $routeProvider is better for navigation. Back Forward through view...
Angular will load views when required.(Lazy loading.) So better for performance...
Hope this will help.
I personally don't get the point of wanting to use bootstrap tabs with angular's ui-router. It is counter-intuitive. Just don't use bootstrap's tabs and set up the "sub-tabs" in the angular config. This will also make your code more readable. Only add ui-bootstrap if you NEED the extra features. An example config is below
$stateProvider.state('A', {
url: "/A",
controller: "testController",
templateUrl:'pages/A.html'
})
.state('A.B', {
url: "/A/B",
controller: "testController2",
templateUrl:'pages/A.B.html'
})