I am migrating my app from Angular 1.X to Angular 2.0 and I am having thoughts about routing solution while / after migration process.
I am currently using ui-router, with resolve in order to pass data for each route.
After some reading I came across this post. As far as I understand, there is no resolve in the new router. I now have two choices:
Continue using my current ui-router with my hybrid ng1-2 app (is it possible?), and bring each route's data via router's resolve. Will it work?
Change routing and use the new Component Router. This will make the step-by-step upgrade harder, because I will have to change my current Angular 1.X data fetching to be inside each controller / directive + I won't have Angular 2's #CanActivate which will wait for data to be resolved.
Which option is better? Is there another option? What will work here?
Thanks!
I encountered the same issue at work. I tried many things, but in the end I used a service:
var data = {
'foo': 'bar'
}
export const StateData = {
data: data
};
So now at the top of my component I can import the service:
import { StateData } from '/services/StateService.ts';
Then I can set and get data from the service by simply doing:
StateData.data.foo = "something other than bar"
Now when you switch routes, you can retrieve the new updated data within the constructor() or afterViewInit() methods.
*An added bonus of using the StateService is that you can bind your data between all components by simply adding the following method (you can name it whatever):
getStateData(key) {
return StateData.data[key];
}
You can call this method from the dom itself by doing the following:
{{getStateData('foo')}} --> will print out the value "bar"
Now if you change the value of foo within the service in a different component, it will change in the dom, since getStateData() is called whenever a change occurs and the service only loads once on page load.
I believe the init and afterViewInit methods are the reason as to why they have not added resolve to the new router, or maybe they still haven't released the version with it yet.
I hope this helps you out. I do not think using Angular 1.x + Angular 2.0 would be easy, nor would it be fun lol
I recently rebuilt my personal site in angular 2.0. The code is public, so you can check it out. If you look at contactCard.ts, contact-card.html and StateService.ts you can see it in action. Here is the repo:
https://github.com/YashYash/portfolio
Related
I am working on a hybrid app, it's running a main Angular (7) component and within it has an upgraded (through ngUpgrade) AngularJS component running a Gantt chart. I am trying to pass the data it needs from the Angular component's controller to the AngularJS one, but I'm failing to find resources on this topic, which makes me think it is not possible. Anyhow, I would like to ask just in case anyone has ever tried this.
Thank you in advance!
You can use global object, like window. Add to this object properties chanel like RxJS/BehaviourSubject. Remember import RxJs library.
In index.html add script where define chanel
<body>
<script>
window['myChanel'] = new BehaviourSubject()
</script>
</body>
In AngularJS app, where you need, set Observer:
let transData;
window.myChanel.pipe(tap(value => transData = value ))).subscribe()
In Angular app, use chanel for emit value
window.myChanel.emit('myTestValue')
This is a quick question. I have been finding a way to do it for a while. I am developing Laravel application. I am using React JS for front end. What I like to do it I like to get the Laravel named route by calling Laravel route() helper method. There is a library/ package to do it in Vue JS. Is there a library to do it as well in React JS? Otherwise, what would be the best way?
There is no "package to do it in VueJS". There is a package exporting the route names and parameters for consumption in a test/PoC application. Those are two totally different scopes. Most people do not require this level of customizability as API routes are considered stable references.
If you took the time to establish a swagger file, their codegen tool can generate a full API client.
If you didn't, all hope is not lost, but you lose some details in the process. Laravel has a route collection, which you can work on relatively easy:
$routeCollection = Route::getRoutes();
foreach ($routeCollection as $value) {
// $value is now a Route object
}
From this, you can easily write a controller method to export, in your preferred format, the information you need. Do note, however, that it is impossible (AFAIK) to get named route names from the router - you can only match a route by a name.
I am trying to run angular next to our old angularjs application. Before we try to go the ngUpgrade (a lot of refactoring needed before possible) route I'd like to try and run them independent from each other. I thought I would be able to achieve this by just rendering the tag and the associated script files that get generated (by angular-cli) on the specified routes that I want to upgrade to our new application.
I do this by adding a state to my angular-ui-router. With *param as last url value so all subsequent routes go to the same route.
img-link
But now I have an issue that when I redirect from an angularjs(e.g. /user) route to a new route( e.g. /subscription/2) the application breaks because angular can't resolve the previous route.
I thought this could work if I could intercept the routeChange in angular but can't find a way to do this.
Is this even possible?
In order for angular to intercept and handle routes you need to use an UrlHandlingStrategy. Please check the example here.
IONIC has a very good feature to "cache" the state by using ion-nav-view, when user access the state in history, it will not reload the page -- Controller won't be called, and we could enable the cache globally or by page.
While working on a web site, I tend to use Angular JS directly instead of IONIC since IONIC is mainly for the mobile hybrid APP development. However, I really like the way IONIC handle the "history" and page reload. I know that we could leverage Angular Service to keep page data and achieve the similar function. But I feel it's not convenient to code and we have to put everything into service instead of controller.
Take an example here, we have a pagination search on Page A, by clicking each item to navigate to page B for the detailed item information, if we go back to Page A, we do not want to re-execute the pagination search again. I feel this is a very common requirement for most web site, IONIC's ion-nav-view could achieve this function easily without moving data to service, I wonder is there any angular JS plugins or directive which could help to achieve this function, it's something very similar as what IONIC's ion-nav-view does?
I am looking for the answer too, no lucky.
One answer is
http://www.tivix.com/blog/dont-forget-the-back-button-in-your-single-page-ap
the author mentioned ngRouter's [reloadOnSearch] option, but i doubt this answer.
From ui-router v0.2.5, there's reloadOnSearch option too, but it's not for our purpose.
another answer is
http://www.bennadel.com/blog/2801-revisiting-routing-nested-views-and-caching-with-ngroute-in-angularjs-1-x.htm
I think there's no simple way now, you have to keep controller's status, and restore controller's status on popstate event, and reproduce all controller's actions.
The other way is cache rendered-html, but how can angular touch the restored-html still?
you can use $window.history.back()
History is a consequence of navigation. So I think you are actually asking about AngularJS routing which is responsible for navigation and history management features. Angularjs has built-in router but ui-router seems to be more main stream because of its additional capabilities.
I also need the same feature and I found this lib:
http://christopherthielen.github.io/ui-router-extras/#/sticky
I think It can solve the problem but it make a problem on performance
because every opened state still working in background and use memory and cpu. (as I think)
Edit
ui-router added stiky feature please see this link:
ui-router/sticky-states
Here how you can use it
1) Add Plugin
import {StickyStatesPlugin} from "ui-router-sticky-states";
angular.module('myapp', ['ui.router']).config(function($uiRouterProvider) {
$uiRouterProvider.plugin(StickyStatesPlugin);
});
2) Mark a state as sticky
let adminModule = {
name: 'admin',
sticky: true,
views: {
admin: { component: AdminComponent }
}
}
I trying to add angular widgets into an existing non-angular app. The problem is that these widgets are not added by Angular, and are mostly injected into the DOM by a non-angular script.
The first thing I thought was to use angular.bootstrap for every widget. But the issue with that approach is that I cannot share services between widgets. So, instead of doing that, I want to bootstrap the Angular app once, and load the controllers manually for each widget.
Here is a sandbox jsbin where I've been trying stuff without success
I'm trying to make app1 manually and app2 automatically, while sharing the sharedThing service.
Well, I found my answer.
I don't know if I had solved it before, but I had to make a call to $apply after recompiling the element to see the changes without manually modifying the input. Also, I discovered that I can initialize the angular app with an element outside the DOM and I can compile elements outside the root element! That is perfect for what I'm trying to achieve.
Anyway, here is the jsBin with the code working.
In the app config
app.config(function($controllerProvider) {
app.register =
{
controller: $controllerProvider.register
};
}
then after you declare controller function
app.register.controller('CtrlName',CntrlFn]);
Dan had wrote a great article about it. http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx