I want to implement interactive svg in Angular Js application. Here is a glimpse of Svg which I will be using. I Know how to use an Svg in angular but the purpose of this question is not this. I want to make it dynamic. Like when I click "Punjab", the svg zooms in and show me regions, and upon clicking a specific region , it shows me the data which i will be getting through backend. So I am just curious, is this even possible ?
Based on your requirement you can use google map which can be easily integrated with Angular. Also I suggest to check D3.js.
Its Javascript library for creating SVG dynamically and can be easily integrated via Angular directives. There are plenty of examples available for the same.
Related
I have a requirement where I have to let the user write some code from my application. I wanted to use Code Mirror library (https://codemirror.net/). My application is developed using AngularJS as the main framework with NO JQuery or any other libraries.
Is it possible for me to use the Code Mirror along with the AngularJS? If yes, can someone show light on how to do it?
Thanking you
I am trying to create a service for showing alerts (in case sending a form goes wrong). This will be used on various forms of my project so I thought I could use an independant service for this. The problem is: for this alert I need HTML code at a certain place of my form, so what I need to know is : what's best practice for that?
Can I define a template for my service? And how do I use this template in my form wihch uses the service?
I had a difficult time using angular2 packages for notifications then I decided to create my own notification for a system I'm working on. I scrapped online till I found Mathew Ross' Post Check it out and see if it guides you, somehow.
If showing alerts means showing a popup then it should be a component. Components have a view that is added to the DOM.
You can share a global service that allows other components, directives and services to communicate with your AlertsComponent and pass strings or component types to be shown in the alert. For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html
I would use ViewContainerRef.createComponent() like demonstrated in Angular 2 dynamic tabs with user-click chosen components to display arbitrary components as content of the alert if you need custom HTML support with Angular bindings in the alert content.
I have a task where I need to export the html to pdf. Where the pdf should have the same design as it has in browser. Basically I need the css should also work in pdf file. Am using angularjs for front end. But I have not found any use full module or any js library which supports my requirement. I also need to update AngularJS scope variables values in pdf. I found one http://pdfmake.org/#/ but it only supports some predefined css attributes. Please provide some suggestion if there is some npm module or any js library which render the html to pdf with css.
Thank you
I am not sure if there is a fully featured JavaScript solution, which can convert HTML/CSS to PDF on client side. It makes sense to take a look to server-side solutions - there are many available.
In an "hybrid" scenario on client side you'd need to populate a HTML/CSS template with variable values, send the resulting HTML/CSS doc to the server side and to receive back a generated PDF.
In the case it is not important anymore, if the converter is written in JavaScript. You may use a standalone native applications, utilize print/PDF output subsystem of WebKit (i.e. PhantomJS) or it can be, for example, a Java module deployed to your application server (i.e. PD4ML).
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
I am trying to find a solution for an image slider such as Amazing Slider and how to integrate it in my e-commerce web-app which I have developed using Angular JS. I want to have features such as lightbox and a slider with thumbnails underneath, and also video integration. I know its a lot to ask but its a shame that this very strong framework lacks (to my knowledge) a proper image viewer. Has anyone tried this integration before? Are there any other solutions. After doing a google search all I found is bootstrap UI and a gist for lightbox. But these are not anywhere near of what I am asking for. Please advise.
The reason AngularJS does not have such an inbuilt facility is that AngularJS was not meant to address such things. Its an application framework. It is not meant to be a UI framework.
Having said that, I am assuming you have the images you want to render in some sort of collection in AngularJS. So you can just write a very simple directive which will take your collection as a ng-model and render the slider for you. This allows you to reuse this component in multiple places in your app.
If you have only one place in your app that you need the slider, then just a simple ng-repeat will suffice.