AngularJS: Single Page App Notes
This is article long overdue and I just wanted to talk about a few things I think others should know before starting. My first piece of advise is use use ui-route rather than ng-router. Really get to know ui-router because of its awesomeness.
Using Parameters
I've come to really enjoy using parameters in all my apps and if you work with them well enough you can find some really cool ways to simplify your code. Example using the value of a parameter to set up detailed information in a child view saves time building out the whole app because with the url you can save the state. Just a small way to change your app rather than always looking up a global list. So that in mind for tracking information. Also when possible make "beautiful routes" or readable routes it helps other people following the structure.
Backward Compatible
I have been able to get ui-router to work with ie8 using es5-shim, if you don't need to control the browser history you pretty much safe. Bookmarking is also ok, just be careful again about controlling the browser's history especially if you need to point a user on "back" pages.
Templates
Using either ui-view and ng-view of course! However I use them for both server side rendering and dynamically loading view. The approach I use is based on whether it's before the content fold. Zero flick or flash is key if all fails use transitions.
Page Transitions
Using Parameters
I've come to really enjoy using parameters in all my apps and if you work with them well enough you can find some really cool ways to simplify your code. Example using the value of a parameter to set up detailed information in a child view saves time building out the whole app because with the url you can save the state. Just a small way to change your app rather than always looking up a global list. So that in mind for tracking information. Also when possible make "beautiful routes" or readable routes it helps other people following the structure.
Backward Compatible
I have been able to get ui-router to work with ie8 using es5-shim, if you don't need to control the browser history you pretty much safe. Bookmarking is also ok, just be careful again about controlling the browser's history especially if you need to point a user on "back" pages.
Templates
Using either ui-view and ng-view of course! However I use them for both server side rendering and dynamically loading view. The approach I use is based on whether it's before the content fold. Zero flick or flash is key if all fails use transitions.
Page Transitions
My personal favorite transitions on a web app are moving from are sliding bottom or sliding from the right. Mostly because I create dashboard apps which have ride nav and it only makes sense to.
Don't forget SEO!?
Four years ago if you wanted to do a single app and take advantage of seo technologies is may have been difficult to achieve. With server side rendering go around this, recently I've notice no disadvantage with single page apps vs server side.
There is a ton of information on Virtual Academy, but one trick I have is looking a the loop. Understand why it's a loop then use it to your advantage. What you will find out is that you can use both routing systems and that the front-end can callback on the middle tier.
- Handle routing before they load - Stack Overflow
- ngView Animation Effects - best tools ever!
- css-spinners
- Single Element CSS Spinners - use a css styled spinner only for performance (inline styled)
Don't forget SEO!?
Four years ago if you wanted to do a single app and take advantage of seo technologies is may have been difficult to achieve. With server side rendering go around this, recently I've notice no disadvantage with single page apps vs server side.
- https://scotch.io/tutorials/angularjs-seo-with-prerender-io
- https://github.com/angular/universal - Server side rendering.
There is a ton of information on Virtual Academy, but one trick I have is looking a the loop. Understand why it's a loop then use it to your advantage. What you will find out is that you can use both routing systems and that the front-end can callback on the middle tier.
Notes
I'm still working on is using an api to dynamically create and update my routes, I don't need this but I thought it would be interesting to do.
Final and Most important Question
How do you handle large scaled single page application? In my opinion, I think it is just a matter of time and concern for performance when you need to split things up into multiple single page apps. I don't see it as a problem to do so, but I think a lot can be taken away from standardizing or finding modules/components you can reuse between all your applications.
I'm still working on is using an api to dynamically create and update my routes, I don't need this but I thought it would be interesting to do.
Final and Most important Question
How do you handle large scaled single page application? In my opinion, I think it is just a matter of time and concern for performance when you need to split things up into multiple single page apps. I don't see it as a problem to do so, but I think a lot can be taken away from standardizing or finding modules/components you can reuse between all your applications.