Menu
Let's say I'm starting with a PHP application. On one of the pages on the site, there's a complex interactive app that I want to use Angular for. The problem is, I still want the header and footer of that page to match the rest of the site. I would love to be able to do something like this:
// main-template.php
<html>
<head>
<title>My Site-wide Header</title>
<script src="site-wide-script.js"></script>
<link href="site-wide-styles.css" rel="stylesheet">
<?php if ($somevar == true) : ?>
<?php echo "Yes, it has to be PHP"; ?>
<?php endif; ?>
</head>
<body>
<header>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</header>
<!-- Drop entire Angular application here -->
</body>
</html>
It somewhat works for me to just PHP include the Angular HTML file there, but that's pretty janky because, of course, the Angular index.html file already includes a html, body, etc. tags. Of course I could DOM parse the Angular file and fix all that before including...but I'd prefer a better solution.
In my searching I can't seem to find any officially recommended way of doing this. Actually I can't seem to find any examples of anyone doing this at all–all my searches just turn up people doing something similar with AngularJS, not Angular. Is there any decent way to accomplish this with Angular?
937
Using PHP With Angular If you're wondering whether you can use PHP alongside Angular, the answer is yes. But Angular will still need a separate client-server architecture. In general, PHP runs on the server-side while Angular runs on the client-side.
You will get introduced to AngularJS, the JavaScript framework created by Google, covering all the basics. You will learn how to build a simple website with PHP 7, MySQL and AngularJS 1.6+ from scratch, next you'll learn how to build a CRUD web application with PHP 7 API on the back-end and AngularJS on the front-end.
The angular. module is the entry point of Angular applications. Each application has just one module that gets the rootElement <html> or <body> tag.
You should be able to do what you want to do.
Here's the content of a index.html for a web based chat program I did as a HW project (the back end was much more fun...).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>crap chat</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body class="m-a-1">
<?php print("Hello World ".date("r",time())."<br />\n"); ?>
<app></app>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
As long as you keep the same js file references and style sheets, styles (on <body> tag) etc. then you should be able to drop that in and toss in the <app></app> tag set just where you want it.
Just for giggles I renamed the file to index.php on my server, added a print statement to print date/time page was loaded, no issues.
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
