LAMP堆栈中的角度2

Question

I come from a PHP background and I have used traditional JS frameworks like Jquery and Angular 1 to some extent. I just started learning Angular 2. I have gone through multiple sites and demos, code generators like angular-cli, vulgar etc. and all of them work as expected. No problems till now.

I work on windows. So whenever I need to run any angular 2 demo application, I need to run at least 2 or 3 commands on different command prompts and they all need to be continuously running like ng serve, npm start, gulp etc..

Suppose I want to create a simple php application with 3 php files. Page 1 is where the angular2 app should be running. Within Page 1, there will be links to page 2 and page 3 php files along with additional routes that with be shown using angular2 routes.

Now since all demos I have seen use typescript, how should I do it in php?

I have used angular1 with PHP and it was as simple as importing a script file.

Can I just import some script files and have the angular2 app running within a php page? Do I have to run all those(npm,ng,gulp) commands to have the angular2 app running on a php page?

Answer 1

Concerning the TypeScript part:

Now since all demos I have seen use typescript, how should I use it in php?

...remember that TypeScript is a superset of JavaScript, and transpiles to JavaScript. So you might have a process that transpiles your TypeScript app code to JavaScript before you load your page, and runs it in the browser as JavaScript. Or, you can also run TypeScript in the browser (see this Stack Answer for more info).

When you run through the Angular 2 tutorials, you will see that as you are writing TypeScript, it creates JavaScript files for you. The app that runs in the Tutorial (using Node.js) is serving JavaScript, not TypeScript. So, as you mentioned:

I have used angular1 with PHP and it was as simple as importing a script file.

Nothing will change there. The only additional step is getting the TypeScript transpiled to JavaScript. For that you can checkout SystemJS (that's what the Angular 2 turotials use) or WebPack (which the Angular 2 also has docs on here, which both have plugins/bundlers for doing that for you.