Converting my site to use Angular JS [closed]

Question

So, I've been looking at AngularJS recently and I'm really impressed with many of it's features. I am current developing a site in a traditional manor (php, html, css, mysql, a bit of jQuery) and I would really like to convert the site so that I am using Angular. I want to do this because I am currently mixing PHP with HTML in many of the pages and it is becoming hard to see where presentation, data and logic lies (a problem Angular seems to solve very well). I am reasonably experienced in web development and programming but have no experience with Angular, apart from running through the tutorial on their website and some miscellaneous reading here and there.

Angular seems very alien to me at the moment and I was wondering if some of you could help me understand how to do certain things in the most appropriate way. I do not expect detailed explanations, but any links to appropriate Angular directives / other SO questions / other sites would be very helpful.

The layout of my design is quite simple:

Backend:

• MySQL database, which stores information about all pages [title, access-level, path-to-file, etc.]
• PHP files containing functions to start the session, and interact with the database e.g. getPageData(), signInUser(), signOutUser() etc.

Frontend:

• index.php - The main template page. Includes the backend PHP files to provide access to their functions. The page the user is requesting is a GET parameter, so a typical URL would look like 'domain.com/index.php?page=home' (although this is masked by .htaccess to look like 'domain.com/home'). All content pages are 'included' in a <div> in this page

I understand that fundamentally, I need to remove all the PHP from the content and index.php pages and instead make ajax requests to the backend PHP files which should output JSON objects which Angular can then use to construct the DOM in the way I program it to.

I don't understand how I should:

• Get the URL parameter to send to the getPageData() function in the backend PHP, or get any other URL parameters for that matter. (Angular seems to use the hash part of the url rather than the standard '?')
• Include the content page in the index.php page (should I use ng-view or ng-include?)

Also, I can imagine it is not very efficient to make multiple $http requests when the page is loaded: e.g. one to get page data, one to get the user's data like access-level, one to get downloads data and so on. Won't each request start a new thread on the server and require the session to be started, constants to be registered etc.

I apologise for the huge open-endedness of the question and thank you all so much in advance for your time

Answer 1

Yep you've got a lot ahead of you. But don't worry I was once in your position and I made it through in a short time (and fell in love with Angular).

As you said your question is pretty open ended, but with regards to your pages and URL parameters, I really recommend you take a look at ui-router as an alternative to Angular's ngRoute.

https://github.com/angular-ui/ui-router

It is pretty similar to the $route/$routeProvider generally included in Angular (well actually it depends on it and expends it) but does a bit more. It allows you to set states(routes) that have their own urls and parameters. They have a nice tutorial and if you understand ui-router, angular's routes will make a lot more sense.

In conclusion both ngRoute and ui.router can solve your URL permissions/parameter problems. ui.router allows you to do more but ngRoute is probably more stable as it inside Angular's official umbrella.