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.
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 am trying to migrate my angularjs(1.6) to angular 5. As of now I am focusing over migration of one page and want to go for both frameworks angular js and angular 5 running in same application.
I have gone through various links and found some approaches like going for incremental migration i.e. from angular js to angular 2 then angular 4 later angular 5 ; Modifying the scope syntaxes etc
My query is that should I modify the above scope related syntaxes in my current angular js application or I should create a new angular 2 /5 project and then move my js application code to newly created angular 2/5 app.My application is huge one. Also, I want to use ngUpgrade. Not sure where to use. Pls verify the approach and help in this migration
'create a new angular 2 /5 project and then move your js application code to newly created angular 2/5 app' is better in my opinion
there are some huge architecture differences between Angularjs and angular2+.
angular.js is a classic MV* architecture framework, you may write code in controllers, services, splitting these files into different folders like a MVC structure.
while angular2+ is a component based framework.you can write app in component based pattern.just like react or vue .although you still can write it as a MVC structure.but remember why you want to refactor your project.
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 an existing angular / phonegap app that I'm trying to port to a windows metro app for win8. I've replaced my jQuery with a metro specific version and I've wrapped each angular module in the MSAp.execUnsafeLocalFunction method and I'm getting the application to sort of compile.
What is happening is that the page is built using angular ui router, so I'm able to see the dynamically created page, with angular ui router combining the 3 or 4 partials based on the route. However, when Angular starts to go through ng-bind, ng-repeat, etc... I'm getting the following error, "JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, the might be unsafe..."
I've looked to see how others have overcome this issue, but I have not found anything that works. I'm worried that what I'm doing is going to have force me to rewrite the application using the WinJS library.
Does anyone have any resources or experience that can help me with this?
What works for me is adding the ng-csp directive to the HTML tag. This disables some of the dynamic content stuff of Angular. I didn't even wrap anything in exeUnsafeLocaFunction. I'm not sure if it will work on Angular UI Router though...
More on the ng-csp directive here...
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.