22

I am a PHP developer and I started learning Angular2. But I don't know how to use it with PHP. Is it possible using Angular just as frontend? What I must to do? How to use it on shared hosting without Node.js installed?

3
  • 1
    Angular Js works at client side that runs in browser and calls API's (whether they be in php,node or any other server side language). The philosophy of angular 2 application is to segregate front end functionality with back-end API.
    – Noor Ahmed
    Aug 2, 2016 at 10:14
  • Angular.js is just a frontend javascript framework , it does not require node.js to function on any other framework. Angular js is an independent framework , which works with any backend language. You just need to output the json with restful api , and use the details inside angular framework .
    – Arsh Singh
    Aug 2, 2016 at 10:14
  • @noor if I write a test component in typescript for angular2, How to render an html page?? please add an example.
    – M Gholami
    Aug 2, 2016 at 10:20

4 Answers 4

66

My 2 cents as a long time PHP developer who has been playing with Angular2 quite a bit.

As a PHP developer, you're expecting to have your PHP render an HTML page and send to the client. You won't be doing that with Angular2. All that processing that would take place in PHP, building data tables, lists, or whatever is now Angular's job.

The only thing you're gonna do with PHP now is simply send JSON responses. Others have said this already above.

I'm assuming that since you're asking this you have little to no experience working with Angular2. So here's the deal:

Learn how to use Node and NPM on your local machine. Learn how to use NPM to set up your empty Angular2 project. Play and develop on your local machine.

When your ready to load in data, PHP can get involved by sending JSON data down to the front end for Angular to use.

When you're ready to put your Angular2 app online for the world you have a number of build options. You need to compile your code from Typescript to Javascript.

I've been using the Angular CLI tool. That lets me just run "ng build" and the app gets compiled.

Then I can upload the folder it generates up to my apache server and it works. The Angular CLI makes a folder called "dist" that contains all the stuff your front end will need.

Piece of cake.

1
  • Thank you so much for your answer. I'm a long time PHP developer that was recently told I have to convert everything I have made to Angular 2. I'm not happy about it, but it's a job. Other than the tutorials on Angular, your answer helped me understand the relationship between PHP and Angular just a bit more.
    – Cagey215
    Oct 11, 2017 at 14:39
7

Preferably, your site will just download a simple index.html and a file called app.js which contains all of your JS and therefore your Angular app.

PHP will be sitting on a server doing the job of an API, which is answering with JSON/XML to request, you angular app will then use the JSON to build the web interface.

You can have PHP hosted anywhere, and serve your angular app from another place, even thought it's not recommended because of latency

<html>
  <script src="app.js">  
</html>

4
  • Should I export angular app.js?
    – M Gholami
    Aug 2, 2016 at 10:21
  • What do you mean by export? If you build an angular app, in the end you will be bundling all of your JS code into one file which is usually app.js
    – Borjante
    Aug 2, 2016 at 10:28
  • It is my question! I have an angular js app, How to do this?
    – M Gholami
    Aug 2, 2016 at 10:34
  • Just create a file like in the edit and serve it on your hosting
    – Borjante
    Aug 2, 2016 at 10:43
4

as far as I know AngularJS is client side Javascript framework. So in general there's no need for 'nodejs'. You just need the AngularJS library files included in your HTML that's going to be produced by your PHP code.

I guess you should have a closer look at AngularJS at first.

1
  • Clarification: AngularJS (1.X branch) and Angular2 onward aren't the same thing. With Angular2 onward you aren't including a script tag anymore. Your whole UI relies on it for everything.
    – sitesbyjoe
    Nov 2, 2017 at 21:03
1

above [sitesbyjoe] best answer is awesome. Just details steps,

open cmd

1) cd your-project folder

2) ng build

3) copy dist folder to apache/htdocs/[dist/or your-project-name]

4) Important:  open the index.html file, find <base href="/">
change it to <base href="/your-project-name/">
Without doing this, js file will not be load correctly.

5) http://localhost:80/your-project-name/index.html

It works.

1
  • what about css of php project interecat with angular project ...i have this problem now and i can see in the source that angular is there but when i activate css file of angular ..the project is not display
    – user7575848
    Mar 4, 2020 at 13:44

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.