I am using both AngularJS and Zurb Foundation.To initialize Foundation you have to make the following call:
$(document).foundation()
But, when you load a new view using angularjs foundation js is not working anymore and you need to re-initialize Foundation again, i have done it like this:
app.run ($rootScope)=>
$rootScope.$on '$viewContentLoaded', ()=>
$(document).foundation()
When loading the first view, Abide works, but when loading another view using $routeprovider it doesn't work anymore.
Expected Result:
The result after loading the view:
Any help would be greatly appreciated, thanks!
The best choice would be wrapping Foundation plugins in angular directives or using only CSS/SASS provided by the framework. The workaround that i found is to include the plugin script in the AngularJS view.Either way AngularJs and Zurb Foundation do not play well together.
The most common practice is to create an angular directive and within the link callback call your third party DOM manipulation code
Related
I am working in a project which is developed using AngularJS1.2, since it is older I am thinking to write feature modules in separate app using Angular and then with the help of Microfrontend thinking to combine with older app. To achieve this, I am not able to get a good source/guide. Can anyone please help me.
I see 3 ways but haven't tried any of them though. So, I don't have any working solution.
Have a route from angularjs that points to angular app(full page load) and everything from there onwards, angular handles everything. There is no angularjs involved. This may not be the best option.
Let angular code load on demand when the feature is required and provide placeholders for the angular features inside angularjs project. This way you can share custom scope to nested child angular project.
Use web components developed in angular(angular elements) and use them in your angularjs application. They work independent of technology/framework/library.
I have been looking for some good ways to build up a angular website with help of basic html templates but it doesn't work with carousel and some other elements.
Can any suggestion for slider in angular?
Angular doesn't necessarily play nicely with jQuery plugins.
(I'm assuming you are using a jQuery carousel, you didn't say though).
That doesn't mean you can't use Jquery plugins, it just means you can't use them in a very Angular way.
Best to use Angular modules instead wherever possible.
See carousel at ...
https://angular-ui.github.io/bootstrap/
This is a reliable library
Hope this helps
Angular slider here ... https://github.com/seiyria/bootstrap-slider ... but I've never tried it
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
Highcharts documentation says that it has some dependencies that can be met with jquery, prototype or mootools. Is there a way to use highcharts/highstock with angularjs without bringing in any of these other libraries?
Angular includes it's own "jqLite" which is a subset of jQuery functions that were necessary (or at least made it much easier) for Angular itself to work. Including jQuery itself will override the jQLite built in to Angular (but they should work fine together and have for me, I'm only using jQuery for ng-grid currently).
Does Angular use the jQuery library?
Yes, Angular can use jQuery if
it's present in your app when the application is being bootstrapped.
If jQuery is not present in your script path, Angular falls back to
its own implementation of the subset of jQuery that we call jQLite.
http://docs.angularjs.org/misc/faq
I've also been looking at charting solutions that will blend well with Angular and have started playing with d3js
http://d3js.org/
Basics of D3js
http://mbostock.github.io/d3/tutorial/bar-1.html
AngularJS D3JS Directive Writing
http://briantford.com/blog/angular-d3.html
D3 essentially gives you a toolkit of functions that help to scale values to build a chart from scratch and has built in interpolation for transitions between data sets. There seem to be lots of cool examples but to build from svg or html elements into your desired chart from scratch is probably extensive work.
For something a little more pre-built and I believe without external dependencies either is Google Charts
https://developers.google.com/chart/
AngularJS Google Charts Directive
http://bouil.github.io/angular-google-chart/
Yes, there is.
Highcharts relased a Standalone version
Check it out, I think it's a more direct answer to your question than what was posted here.
Also, there's an Angular Directive for Highcharts:
Highcharts-ng by PabloJim
Also, for more info check out a similar question: Highcharts in AngularJs without jQuery?
I am quite new in Angular world. I am working on an application which involves Angular JS. I've been confronted with the requirement to implement custom scrollbar. My application does have jQuery too, but so far most part of my project uses Angular. So should I be using some jQuery widget or implement it via Angular.
If Angular, can you provide me pointers on how should I proceed?
You should probably implement it in the Angular way, i.e., building / using a custom Angular's directive:
http://docs.angularjs.org/guide/directive
Learning resources for Angular:
https://github.com/jmcunningham/AngularJS-Learning
You can always use jQuery plugins / widgets in an Angular app, but in that case the best way is to encapsulate each plugin within a directive. Angular-UI is a project which does that for several components, including Twitter Bootstrap:
http://angular-ui.github.io/
I'm aware of angular-perfect-scrollbar, a simple Angular's directive for perfect-scrollbar, but haven't tested it yet:
https://github.com/itsdrewmiller/angular-perfect-scrollbar
http://www.yuiazu.net/perfect-scrollbar/
Depending on what your requirements are, you can style your scrollbars strictly in CSS and not need any JavaScript:
http://css-tricks.com/custom-scrollbars-in-webkit/