Using Angular, Kendo, bootstrap 3 components - angularjs

I'm evaluating Kendo with Angular and Bootstrap 3, fairly new in javascript land. Is there a preferred way as to use which components where? I know you can mix and match, but that seems messy. Does anyone have any basic guidelines or pointers?

There are different integration demos on the Kendo Labs site which should bring you the idea when it comes to integration with third party libraries. Here is link to the Angular demo on GitHub.

Related

AngularJS1.2 & Angular using Microfrontend

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.

Angular 2 maturity: going in prod with usable components

I am looking to build a new set of web apps, and I have been working already with Angular v1.x, Angular UI Grid 3.0 & other common components (Angular UI Bootstrap, Slider...).
Angular 2 seems mature enough to be used today, but my question is more on components I need around it:
only references I found so far of usable grids are AG Grid, and Angular UI Grid 4.0, which is not yet on tracks,
other components such as Angular UI Bootstrap are in alpha stage, and some other Angular UI project have not yet stated to be ported.
Disclaimer: I am not asking for opinions on v1.x vs v2.x here.
Not being knowledgeable on Angular 2, I would like to know:
If you are going in production today building apps on Angular 2, what is your approach?
What basic components you are using (grid, navigation, slider) and if they are v2 ready,
How difficult is it to run v1 & v2 Angular code side-by-side?
How difficult is it to use non-TypeScript components in v2?
ag-Grid is written in typescript. it is ng2 ready with regards it can work perfectly with ng2. we have just released ng2 cellRendering (so you can use angular 2 inside you cells) and are working on cellEditing (will be ready in the coming days). regards v1 and v2 side by side, i have no idea, however ag-Grid works with both ng1 and ng2, so if you have an app with ag-Grid, you will have an easier time moving from ng1 to ng2 as the grid will be the same.
not exactly your specific questions, but i think you might find this useful information.

it is necessary to learn bootstrap before angular js

i am newbie in Angular-js and wants to learn Angular-js effectively.i have not worked in Bootstrap before. Is it necessary to learn Bootstrap before learning Angular-js ??
Bootstrap is a HTML/CSS framework to play smartly with HTML and CSS and have
best User experience.
Whereas, AngularJS is a javascript framework which handles your middle layer between HTMLs and Server Calls.
So to learn angular without bootstrap is not bad deal.
I hope i am clear to you.
Not at all. Bootstrap is one several styling libraries, which are quite optional. But they do give you a way to get a great looking site with little effort.
If you learn bootstrap it would help you to develop a website with bootstrap popups,modals etc without giving css guy a additional work , learning bootstrap is optional but if you leaarn u will become a good front end angular js developer

Polymer's Paper Elements & Angular Material

Please help me understand the following quotes from the Angular Material github and home page:
This project is in early pre-release. Angular Material is both a reference implementation of Material Design and a complementary effort to the Polymer project's Paper Elements collection.
The Angular Material Design project is a reference implementation effort similar to that provided in the Polymer project's Paper elements collection. This project provides a set of AngularJS UI elements that implement the material design system.
I understand that Polymer is a framework for web components, and that one piece of the project is the collection of paper elements. I do not understand how the two are related, or why Google is developing two strikingly similar, yet different projects.
Is angular material simply a port of Paper Elements to angular?
Are web developers to use Angular Material right alongside Paper Elements in their web apps?
Are the two eventually going to effectively become equivalent? (Angular Material being used by AngularJS developers & Paper Elements used by others?)
I think you should consider the fact that web components, polymer, material design, paper elements and angular are 5 distinct 'things'.
Web components is a group of 4 standards.
Polymer is a sugar syntax api on top of web components + some nice additional features.
Material Design is the latest style and interaction guide Google has announced and they are
replicating more consistently across all their interfaces..web/mobile/etc.
Paper Elements are just an implementation of material design using Polymer. At the ChromeDev Summit Polymer team commented they plan to move paper elements into its own domain to avoid the confusion. Same things about the polyfills, these have been moved to webcomponents.org.
Angular is a library with a much wider scope than polymer.
Angular Material is just another implementation of material design using Angular.
My point being...material design will be reimplemented in as many flavors Google has to generate interfaces.
Google has a history of competing projects. But Angular's team has announced they will be using web components as well in their 2.0 version which is on the works right now. Will they use polymer to create directives? who knows? maybe..
From the recent ng-conf 2015 announcements it's clear that Angular 2.0 will have a new syntax and implementation to write Web Components spec based Custom Components (Directives).
Also, Angular-Material team has announced that post 1.0, they'll be porting it to Angular 2.0.
Hence, integration of Angular-Material and Polymer isn't in sight...Though, the good thing is that coz they're both based on Web Component Spec, they play well together, meaning that either can be used in an Angular App...

Highcharts with angularjs without 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?

Resources