There are multiple projects to easily bootstrap Angular application, e.g angular-seed, Yeoman angular generator.
Is there anything similar for AngularJS Directive Library? (library of reusable components to be used in multiple applications).
Requirements:
each directive has HTML template
each directive has JavaScript code
each directive has CSS (or LESS)
Gruntfile
Karma configuration
development server (livereload, etc.)
AngularUI Bootstrap (https://github.com/angular-ui/bootstrap) is good example of such project (it does not use CSS though).
Here is something close to your requirements, Angular UI Publisher. Helper component for building and publishing your own angular modules/directives as bower components.
https://github.com/angular-ui/angular-ui-publisher
Addition of things like livereload, to Grunt tasks, are relatively easy.
Related
I am trying to select framework, which replace our old framework
( middle-sized project )
Our previous project was written with angularJS, so our team write core of this application and distribute it to our clients, some of them has their own frontend teams and they can easily customize core components/controllers via $templateCache mechanism
like so:
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});
so these "outsource teams" can fully redefine components ( i mean not only css but layout too )
and include their "custom" components via custom.js files
I am looking for information how we can do same thing.
It looks like using React render props is not suitable for us, because we must have ability to replace any component in runtume just add *.js file
but i'm pretty new in Angular2+ and Vue did these frameworks has such mechanisms?
Vue.js has a pretty well-structured way for components. You can have the html, css and javascript all managed in one place. For basic examples, see the official documentation at vuejs.org
Once having written the components, it's kind of intuitive to use and reuse them in our main html file.
Feel free to try it out!
Also, vue is a modular framework, meaning you don't have to use it's own routing system etc. for getting started with it's template engine. It could even run along side other frameworks.
I'm creating a project on Angular 6 and using ngx-bootstrap as my components library.
I'm not using all the components that the library offer just a few of them. So my question is, At the moment to pass to production on my Angular application, the unused components from ngx-bootstrap will or will not be added on the final build bundle? if does, this will hit on the bundle size or performance?
When you build an Angular app with production flag, every component, service, directive or pipe is referenced at least once (in #NgModule annotations). At the end of the AOT compilation, the compiler removes these annotations and after that it also removes unreferenced things.
If your library uses module based design then definitely it wont affect your bundle size.
As mentioned at ngx-bootstrap website.
We put much effort making ngx-bootstrap modular.
So it should not affect your performance and bundle size.
For more detail check this:
question
I've been working on a personal project for many years. This isn't for work and there is no money to be made. So I take my time doing the development on the project, and that means I'm still using AngularJS as my front-end UI library.
AngularJS is my "component" library where all the directives, components and services are there to "bootstrap" existing HTML from the web server. The back-end is handled with CakePHP which renders all the HTML.
There is no massive single-page app and there is no AngularJS routing. I load my UI library on each page request, and that's how I'd like to keep doing it.
I spend my day job working with Angular 5. I'm very good at it and I'm the go to guy when other developers have Angular questions.
Despite these skills I've been unable to figure out a migration path for my UI library from AngularJS to the latest Angular. Angular 2+ has been out for a couple of years and I'm still stuck with AngularJS.
Here is an example of my problem:
Take a look at the Material Angular project built with Angular 4. It's basically the same kind of library as my own UI library. It contains a collection of directives and components that you can use.
If you have a web server that responds with existing HTML and you want to use Material Angular as your UI library, then you can't. Let's take the autocomplete component as an example.
The documentation explains how to use autocomplete:
https://material.angular.io/components/autocomplete/overview
There is also a working example of the component:
https://stackblitz.com/angular/ggmpnaqqqxk
In the documentation it shows that you can use the component like this:
<mat-autocomplete>
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
But when you look at the working example you see the problem that I have. In their example, they have to bootstrap an entire Angular application container that is used to inject the Application HTML which has the autocomplete example.
They can't just use the <mat-autocomplete> component in an existing HTML page.
Now let's take a look at the exact same component done in AngularJS for the old Material Angular project.
It too has a component for autocomplete named <md-autocomplete> and the old version has basically the same features.
There is even a working example:
https://codepen.io/anon/pen/goLrpJ
It too bootstraps an AngularJS application, but it leaves the existing HTML intact. That allows you to use <md-autocomplete> directly in your existing HTML.
How do I create an Angular 5 application that can be used as a component library with existing HTML?
Angular Elements are supposed to address this problem in near future. As explained in detail in this write-up, they are able to provide self-bootstrapping, standalone custom elements.
Currently the issues remain unsolved that restrict the use of attributes and projected content on root component, this seriously narrows down the use of Angular components as custom elements in real-world scenarios.
I want to use the Timeline from visjs.org in my AngularJS application. To render the individual cells I want to use an AngularJS template.
On the visjs.org site I can find an example of a Handlebars template, which is working fine.
However I want to use some AngularJS functionality (like i18n filters etc) so I prefer to have a "text/ng-template" template but I don't know how to configure visjs to use AngularJS templates.
Any ideas?
My primary suggestion to use create a directive or component in new angular version for visjs.
or use angular-visjs, a directive module developed by visjs team inoder to support angular projects. But you need to consider the following note from the developers
NOTE: This library is currently being refactored. The intention is make the directives simpler, removing the additional 'non-vis.js' related directives (such as time-board and time-navigation), and bring the DataSet factory in-line with the vis.DataSet such that the documentation for vis is fully (hopefully) applicable and consistent.
-The note was taken from ReadMe File on 4 th March 2017
For using template like handlebars you can refer another post from stack overflow itself
Resolve template in AngularJS similar to Handlebars?
I have a personal application with factories, directives and filters already done in Angular 1.*, I have some modules, and I want to re-purpose this app.
I want to make a layout based on Dijit Components and it's theme, and use some Dojo core features the same way I could use jQuery.
My doubts:
Is there any tip in using Dojo Toolkit's features with AngularJS?
Can I code Dijit's components and Dojo inside AngularJS controllers?
AngularJS Two-Way Data Binding works with Dijit components?
PS: Dojo uses AMD-based (Asynchronous Module Definition) module architecture.