I didn't see any guide on the website. Can we use polymer with angular.js?
Others options?
We are currently investigating the use of Polymer alongside Angular and this article gives a demonstration on how it can be achieved:
Using Polymer WebComponents with Angular.js
The author does conclude by saying not to mix the two worlds, but he admits that is just an opinion.
Binding values from Angular to Polymer seems to work well. The issue is controlling the flow of information out of Polymer back into Angular.
This directive helps with this:
angular-bind-polymer
There are a couple of things I don't quite like with this:
You have to decorate your elements with the directive.
You have to enable reflectToAttribute in your Polymer element, which if it is a large javascript object for example could be ugly.
Having said all that it works, so if you think it will work for you then evaluate it.
You might want to start with the aptly named Polymer Starter Kit.
As for use with Angular, Polymer elements work well with Angular 2.0, currently in Alpha.
Related
In angular we are used to DI, services, routing and the like. I am wanting to hear from people who have projects that have transitioned to polymer from angular and what they found to be correct way to approach and accomplish similar feats in Polymer. I've found the easiest comparison to be made with the directives and custom polymer elements but from there things diverge.
How do we go about sharing some sort of "service" in a polymer app and create some sort of DI container where we can use to mock dependencies? Also would like to know how you accomplished (routing/nested routing) where before you could have used the ng-Router or UI-Router.
This might help you get going with routing https://github.com/erikringsmuth/polymer-router-demos.
When you use custom elements your APIs are HTML attributes. For now you have to test in the browser with Jasmine or QUnit since Node and PhantomJS don't support custom elements yet. You test by creating an instance of the element, calling a public function on it, and asserting the result.
HTML Imports are loosely equivalent to DI. I haven't seen any mocking libraries for HTML imports yet.
Services will be an interesting topic going forward. Right now you either include business logic in the custom element or have some external script calling public APIs on your custom elements and binding everything together.
I've built a webpage using html, css, javascript, and jquery. I just started learning Angular.js. My question is do I have to rebuild the site in order to meet certain angularJS conventions or is everything I will be adding for Angular unobtrusive to my previous built code?
It is actually recommended that you NOT use jquery with angular for starters. To get the most out of angular you will most likely have to re-architect your website. The reason for this is that Angular is a framework; jquery is a library. Their concerns are different.
When we think in Angular terms, we think about:
Views, not DOM elements
Directives, not event bindings
Models as a projection of view
Functionality separation
See here for more in depth explanation: http://www.ng-newsletter.com/posts/angular-for-the-jquery-developer.html
Currently I'm looking for a plugin/js that I can use to show my users a small walkthrough of my site. I have jquery and angular both running on my page.
I have been using Chardin.js (https://github.com/heelhook/chardin.js). This plugin works and is simple, however when i try to include angular elements chardin.js will not be able to find the elements to display.
SO I'm trying to find a way to integrate this plugin with angular. Unless there are some better plugins that work better for this in angular. Thanks!
I agree with #Ben_Coding,
Angular-Intro is pretty good, light-weight, and no dependency on jQuery.
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'm having a hard time setting up a project with angular and foundation 3 (rails in backend). So I have been searching a lot but there aren't many results.
I'm serving angular from a subfolder (localhost:3000/app), and started the html something like this
!!!5
%html{ "ng-app" => "App" }
%head
-# I tried this for html5 url on angular, not so much help so far
%base{:href => "/app/"}
%title
NG APP
...
%body
%header
...
%main
= yield
%footer
...
= javascript_include_tag "application"
= yield :javascripts
A couple of view work just fine. But when I tried to use the foundations tab, I could make work, because angular pass the anchor as a url that shold be check against $routeProvider.
So, I check some question here, and part of the answers give me the impression that foundation work fine enabling html5 mode in angular. (Which I could make it) and other answers say that in order to make work foundation with angular should write a directive for every component on foundation. Or the last case is moving to Twitter Bootstrap.
So, I can find a unified answer, could you please, confirm if right now I can use foundation with angular in a direct way. Thanks.
The best choice would be wrapping Foundation plugins in angular services or using only CSS/SASS provided with the framework and recreating the behaviour from scratch. Focus on prototyping using markup + stylesheets and then create logic in the angular way. At least, this is what I would do if I needed / had to use Foundation.
Twitter Bootstrap works in a similar way and the only advantage of moving to this framework is the fact that you can find plenty of angular modules / directives wrapping available plugins. In this case you wouldn't have to do the same job twice and well.
Take a look here: http://mgcrea.github.io/angular-strap/ in the first place.
Then look for bootstrap-based components in Bower.io Components Directory
Also, as some people in the comments have mentioned, you might need to bootstrap you application manually, which is as simple as wrapping you app in a module and running:
angular.bootstrap(element[, modules]);
// http://docs.angularjs.org/api/angular.bootstrap
As I said, it's usually better not to reinvent the wheel.
Edit:
There's an interesting discussion on Google Groups regarding this topic (and unsurprisingly users' conclusions are quite similar): https://groups.google.com/d/msg/angular/Htkzt7Fsaog/TeFm5l4snTwJ
Here is an almost complete adaptation of the Angular UI Bootstrap components to the Foundation CSS: http://madmimi.github.io/angular-foundation/.
You can use the angular-ui-foundation library on github, its probably the best place to start from,
https://github.com/mhayes/angular-ui-foundation