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?
Related
Just learning , new to this site.
Is it possible to have ExtJs and AngularJS together in same application ?
or is it worth to have both of them in same application ?
Thanks
Sometimes people use ExtJs components in an AngularJS app.
AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
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.
I am trying to understand how AngularJS framework works. For that reason I want to debug angularjs framework code (not my application code) however I am not able to figureout how angular gets attached to DOM and starts compilation. Can anybody help me to findout which is piece of code or lines in angularjs script file from where AngularJS kicks off and starts parsing and compilation.
you need to read the application bootstrap section in the angular docs, but basically angular will take your html, starts the compilation processes, at which point it will start replacing any custom html or directives with the matching templates, no scopes or bindings done just yet, html might not even be in dom yet, afer that angular goes to linking process, where bindings are made, scopes are created and html gets attached to DOM, thats the short version you can find it here
https://docs.angularjs.org/guide/bootstrap
Hi I am new to AngularJS. I have great web app already running with JQuery and jQuery UI.
Now I want to completely get rid of JQuery and am going to migrate to Angularjs because of its MVC (MVW) pattern.
So my jQuery application is running with EJS for templates and entirely DOM manipulation. But when I think about Angular js, I have doubts. Can I still use EJS or not?
So please guide me whether I can use or not.
Another doubt is, let's assume I have list page. It is updated dynamically, and it will display 10 records first then based on user scroll, the next 10 records will be appended in the DOM after AJAX. Can we append to the DOM dynamically using Angular?
How do I achieve these kind of things in Angular?
You can use EJS (server or client side) in combination with Angular but there's no need and you'll probably overcomplicate things. AngularJS is very capable for manipulating the DOM by itself in a very separation of concerns kind of way. The most elegant way to work with Angular is to have a RESTful backend and just serve some static html/js files from a webserver.
As for endless scrolling, there are tons of ready to use plugins (modules) to choose from or you can write your own. Basically this will need a view with a ng-repeat directive to display the currently loaded items and a directive that will notify a controller/scope to load more items when the user is scrolling down.
A nice simple article can be found here.
Similar questions:
Mixing angular and asp.net mvc webapi
Actual use of jade template and angularjs
Yes of course you can use EJS with Angular JS. You might want to have a look at this;
https://gist.github.com/jrmoran/4277025
And about your DOM manipulation question. Yes you can append DOM dynamically using Angular JS. Angular JS have a strong feature of two way data binding which dynamically updates its DOM content when a model variable changes.
Have a look at this:
http://docs.angularjs.org/guide/databinding
When I first looked at Play and went through all the samples, I was pretty excited by the zentasks sample and the fluid, clean, effortless Javascript routing that left the work of rendering things to Play. But we decided instead to go with Angular.
Upon going down that road, I thought that Angular would control all aspects of rendering.
However, we have a page that has to get a socket. We were having the socket made on the server, so for now, we still have a Play (Scala) template doing that. We have pared it down to pretty much nothing: create the socket and then inject it into the Angular context.
But we are also trying to do Protractor tests and that is made uglier by having to figure out how to accommodate the Scala template.
Question: should we just ditch the scala template and have the Angular controller call the server and get the socket? That was my favored approach to begin with.
I'm currently working on two Play apps with Angular and in both we decided to have one single main.scala.html file that load all the necessary controllers,services,directives, etc from angular using of require.js.
The goal with Angular is to create a single page app and therefore you should avoid to mix it with server side templates.
You must see your main.scala.html template as the entry point of your single page application. There you generate and load all the pieces you need and give the hand to angular to manage the rest.
I agree with Renato. It's probably better to have a single controller and template that sets up the single page app with angular. Then use AJAX to send requests from the browser to other controllers (see http://www.playframework.com/documentation/2.2.x/JavaJsonRequests).
If want to to avoid Scala templates completely, you can put your web pages and javascript in the public directory and only use AJAX.