I am using angular-ui-router with my angular 1.3 app. I am looking to upgrade it to angular 1.5. What are the best options for routing in angular 1.5? Shall I continue with angular-ui-router or shall I move to something like angular-new-router. Please suggest. Also, If there is a documentation for easy migration, it will be helpful.
Routers in angular
As mentioned earlier, the two mainstream routers for angular.js is ngRoute an ui-router. There is the new router which is part of angular 2.0 - Although it promises amazing features, I currently do not recommend adoption of it and angular 2.0 until it's stable and because of stories like this and issues like this.
Read before upgrading
"Upgrading" to the newest stable release of any library is most alwasy preferable. But before you do; you should read the release notes for every single version up to the version that you're upgrading.
Check the migration guide
Google is working on improving their angular documentation. The migration documentation however is particularly good. Take a look at it here
Depending on the status of your project you might want to stick with the ui-router as angular 1.5 is backwards compatible with all your modules and the upgrade should be smooth (read the docs though, including the upgrade to 1.4).
On the other hand, Angular 1.5 is meant to bring us close to the concepts and architecture of Angular 2 and web components (which are now thought of as the future of web development) so it's a step on the learning curve that most ng1.x developers should take.
Angular 1.5 allows you to write your app in a component based fashion with a different routing mechanism, having routes/URLs load components that you defined instead of loading partials.
Routes can now be embedded in child components (say you have a Users module which has a /list, /details/:id/:slug, /edit/:id routes/sub-components and this Users module can be attached to whatever URL from your app: /users, /admin/users/ while keeping its internal routing mechanism. Your base app will have non-terminal routes for this kind of components (specified with /... meaning it will leave the consequent routing to the component itself).
Also, you can have multiple active routes at once (i.e. think modals, as in Gmail where you can look at a message and have the Compose popup and then navigate to the message list while still having the Compose popup open).
Routing events are now hooks that you can implement in your own component so you can do your resolves locally (fetch data, check for user rights, etc), taking care of destroying stuff, specify whether the component should be reused or reinstantiated, etc.
Bottom Line
In Angular 1.5 the new routing mechanism is based on components instead of states/views so your app needs a refactor towards this concept in order to fully benefit from it.
Related
Using AngularJS 1.5.8 and Django/Django REST Framework as the back-end.
At this points have two URLs (app/ for login and app/dashboard as the main content); would be great to just have app/.
login and dashboard I have as components; navbar and sidebar I have as directives.
Using ngRoute currently and somethings I am reading lead me to believe I should be using ui-router to accomplish this.
Just some basic things that came to mind.
My sidebar has several tools I am developing. I want the user to be able to click on them, and then have the content related to that tool load in the main content area without the page refreshing or the URL changing.
Some of what I have read suggests ui-router might be better for this purpose? I am not, sure as I am just learning AngularJS and still struggling with its concepts. Thus, I don't have any code to post that needs to be fixed. Primarily just trying to understand the concepts and technology I need to look into to accomplish this. Makes it hard to lookup results on Google and SO when you aren't even sure what the terminology and tech is that you should be looking for.
Not sure if ngRoute or ui-router should be used; whether the modules should be built as components or directives; if the content for each tool stays in its own HTML template; etc...
This is a somewhat broad question but what you are looking for is client-side routing. Both ngRoute and ui-router offer this functionality and in very similar ways except ui-router offers significant extensibility with nested routes and multiple named view containers.
My advice is to start with ngRoute and learn it's ins and outs and then switch to ui-router if you find you need this extra functionality.
Client-side routing can either be used with the hash-bang (#/) or using html5 mode you can use a base URL that would function visually like server-side routing.
Now you've got the terms to search at least so happy Googling!
I would like to build a complicated web component that:
I Can use in my legacy web site (or any other site)
It can be used weather my web site is built with Angular/Angular2/React/Jquery etc...
I can use any technology to build it Angular/Angular2/React etc...
Avoid dependencies & versioning collisions (i.e my component is built with Angular 1.5.6 and the implementing website has Angular 1.4.7)
Would using NPM module could solve this issue (versioning, depenencies etc..) ?
Edit: (example)
For example i would require my component via npm
which has the dependency (requires) the framework i chose (i.e angular 1.5.6)
in this scenario wouldn't my component code use my dependency from NPM (regardless what the site uses)?
You may use a component built with angular on a legacy site but you must load angular before. You should be aware of name collision you might have with other directories.
If the site is already built with angular 1.x you may just blend your component in, considering that your component is compatible to the angular version the site is using.If it is not, I think react can be possible because it may blend in.
In case the site is built with angular 1.4.7, as you have said, you might need to downgrade your component to be used by 1.4.7. This means that if you're using angular.module(...).component you will need to switch it to directive. Alternatively you may switch the site to work with 1.5 if it is possible. If not, you may go back to react.
If you want to use angular 2.0, you may do so side by side with angular 1.x, however, the legacy application needs to be bootstraped with angular upgrade module, using upgradeAdapter. This means you need to interfere with the application, which you don't want to, if I understand you correctly.
My project is a hub of tags that called in different name in different languages.
I call views of this components.
Currently users are using angular 1.4 to make views.
I want to give flexibility to user that can make angular 1.4, angular 2.0 components and reactjs components.
I do not want to upgrade users 1.4 directive to angularjs 2.0 components.
So is there any way i can use angular 1.4,2.0 and react js in one project without any problem
Very short answer: no, you can't run two versions of angular within the same website. The problem is only one version can control the DOM, and there are issues with the global var 'angular' as well (when using two different versions of angular 1.x).
Currently, using iframes are your best option (I know, iew...). In the future, new web components like shadow dom might solve this issue, but browser support is still quite low.
I warmly suggest you not to mix the different technologies (1.4 - 2.0)
Better pick just one and follow it.
If you would like to develop new components with 2.0 but you don't want to migrate all, I suggest you to port your code to 1.5 (less effort) and then use the components.
I hope it helps.
URLs shall be without hashbang
It shall fall back for older Browsers which don't support the History API
Using Angular or Ember
Question: Is there a need to use the history.js?
If yes, read on.
On teamwork.com or soundcloud or other modern websites there is a mechanism to have links loading just a part of the website and at the same time, the URL changes (there is no hashbang). I want to implement this as well and also want to support older browsers and read that history.js can do this. Here is a related question to this where I found that this uses the History Api.
At the same time I want to uses Angular or Ember. I know they have their own routing and there is for example a tutorial to remove the # here.
I read that the different browsers handle the history api differently and that the history.js is a way how to tackle this issue.
So is there a way how to combine those front-end frameworks with that api? I'd start somewhere in the routing but get stuck thinking about what to do...
A new implementation should have cross-browser compatibility including handling older browsers. On one hand I want to have a front end framework to separate front from the backend, not sure about which one to use, yet. On the other hand I like how i.e. teamwork.com handle links that they only load a part of a page (including an animation) when you click on it. At the same time the URL changes and if you type a URL directly the page is loaded correctly. It seems that they do it with jQuery.. not quite sure.
Anyone knows how to use both, routing and the history.js?
I would just use AngularJS with UI Router. It combines routing with history.js like features. It has a HTML5 mode which you can enable which will allow pages to update via AJAX without the use of a hash #.
It should automatically cope with older browsers and change the URL format accordingly.
I know what angular.js is and I even had a question about it #Why use AngularJs in frontend if Laravel is already used as backend?.
but recently I started to read about React.js and from its site (its the V in the MVC) which is exactly what am after "handling the view and nothing else".
for me, I think Angular.js as an MVC framework was made to be used with something that is built with JavaScript from start to end like Node.js
and it seems like an overkill when used with something like Larval, where I simply need something to handle the frontend and nothing else + Angular have 2 main drawbacks
with the latest news about a new version that won't have back compatibility with the current version makes me even feared to start learning it just to find that more or less every project out there is using the old version which mostly is true.
angular renders the whole dom if anything got changed which again is an issue for big projects.
so based on the above, plz note that I want to learn/use JS solely to enhance the user experience not to build another Gmail or Facebook and so my question is,
could React.js be used with Laravel to handle the view and do everything Angular was going to give, or I have to use Angular liked or not?
could React.js be used with Laravel to handle the view and do everything Angular was going to give?
No
React is just for views. React components are stateful components with some really clever rendering stuff happening behind the scenes. To build a fully functional front-end app, you'd need to tie in some other code (or write it yourself).
React works well with Facebook's Flux architecture. I would suggest looking into that to learn how to manage the state of your react components.
What's key to understand here is that Flux and React are not parts of a large front-end framework. React is a library and Flux (as provided by Facebook) only provides a Dispatcher. The rest is up to you to implement. There are some pre-existing implementations you can look at if you need some help to get started.
What I like about flux is that it allows me implement things the way that fits my application best. React takes care of the heavy DOM lifting and is very easy to learn. Compared to Angular, I don't have to learn arbitrary conventions and gigantic APIs of a huge framework.