I'm using yeoman project using angularjs normally I know how to use angularjs with PHP on normal projects.
But I'm confused to use php with yeoman.
Where should I create .php file and how should I call $http scope in main.js controller?
If you're using generator-angular, you need two elements:
1/ Have your PHP running as you would normally in a subdirectory like public so public/index.php is loaded when you go to http://localhost/
2/ Use a Grunt task to compile the individual AngularJS source files in src into a single file somewhere like public/js/myapp.js and in public/index.php add something like <script src="/js/myapp.js></script>
3/ If you're wanting to send JSON to your angular app, use json_encode such as:
<?php
header('Content-type: application/json');
echo json_encode($someArray); ?>
?>
You could also have a look at grunt-php for serving up you PHP files on a dev box.
Shameless self plug - I've also written a generator that creates a simple AngularJS app with a FlightPHP backend: https://npmjs.org/package/generator-flightangular - Which might give you an idea of how you can split the JavaScript elements from the PHP backend.
You could use web service API calls to your PHP project. Usually PHP and AngularJS are two different scopes. We can establish communication between these two using API's. Normally it is better to use some REST API frameworks like Slim.
http://www.slimframework.com/
Related
I'm trying to build an angular hybrid application out of a angular.js application. I'm following the official documentation (https://angular.io/guide/upgrade). I reached and completed this step: https://angular.io/guide/upgrade#bootstrapping-hybrid-applications.
I'm using angular ui-router 0.3.1 to handle the routing of my application. Therefore, using the config function on my main module, and the $stateProvider service, I've mapped each route to an angular.js controller and a template specified by the templateUrl parameter.
My application seems to startup correctly but the templates cannot be loaded because they cannot be found (404 error). This is normal because they are not imported in the dist folder where my application is built when I use the ng build angular-cli command line.
How can I configure my application so that my angular.js html templates get copied in the dist folder when my angluar application is built by angular-cli?
Thanks in advance!
So actually it appears my question was a duplicate of that one: Angular CLI with Hybrid app ng-build.
The idea is to use the assets array from angular-cli.json. Glob enables to select recursively all html files from the folder of your choice and to put them in a subfolder of dist:
"asssets": [{"glob": "**/*.html", "input": "../src-ng1", "output": "./src-ng1"}]
Coming from a PHP background, I used to have an index.php which does two things:
serve the webpage if no parameters were set;
or serve JSON data when a specific POST parameter was included in the request.
Something like this:
// -- index.php
<?php
if ($_POST["some_parameter"]) {
...
echo json_encode(someArrayData);
exit(0);
}
?>
<html>
...
</html>
I have built the complete frontend application with npm, webpack, webpack-dev-server, and react. Having completed the first part, how can I effectively serve JSON data instead of HTML when a request includes a specific POST parameter?
I can see 2 ways of doing this:
Build the frontend as usual and everytime I build the bundle, modify index.html, inject my PHP code in it, and rename it to index.php. I then would have to run this folder via apache or nginx, so I'd be able to run the index.php script. This method is downright ugly and is probably the worst way to do it.
Run a separate PHP server which just serves data or redirects to the static webpack-generated build. All requests should then start from this server, and this server determines whether to serve data or redirect to the frontend. The problem comes to neatly passing the POST data received from the request to the static react app. As far as I know, the only way to do this would be to include a URL (GET) parameter to the redirect and manually parse it with javascript on the frontend. This is a dirty solution, in my opinion.
So, to summarize:
I need an efficient way to get POST data in a react/webpack/webpack-dev-server environment.
It should work with my hot-module-replacement dev setup.
I'm fine with switching to a node-based backend like express.
There shouldn't be any ajax involved in the static react app.
Any ideas? There has to be a way to do this properly.
UPDATE: I solved this by simply copying an index.php from my source directory to my build directory via the webpack config. I serve the build folder to a PHP server and keep a webpack --watch building my source.
I lose built-in features like auto-reload and css injection, but it's worth the convenience of not having to implement SSR for a very simple task (getting a single POST variable).
For anyone interested, I also added 2 npm scripts:
npm run start runs my original webpack-dev-server with hot-reload, serving static content including a static index.html file
npm run static runs the webpack --watch which copies the index.php file to the build directory
This lets me have hot-reloading when developing frontend, and allows POST data fetching when programming logic.
It's easy, convenient, and works on most web hosting providers.
I am a newbie on sails framework and I started working on it then found that everything is in ejs. When I converted it into the HTML then it didn't work.
How to write client-side in HTML using AngularJS without ejs or with least ejs possible if we cannot remove it totally.
Where to write client-side routes and how to use ui-router in that?
You should place your angular code in assets/js. The html files are also to be placed in assets folder.
I have set up a basic sails/ angular app in github. Angular Demo
Is there a way for you to use Laravel trans() or Lang::get() method using (lang folder) in AngularJS app?
Laravel view that displays an angular view with multiple controllers.
<div ng-view></div>
I have in public_html folder all my templates for my app.
With the default structure of a Laravel app you can't access the app/lang directory. However, you could write a grunt task or a Laravel command, that process all you language files and copy the results in your public directory to make it publicly available for your Angular app.
Today I decided to try out AngularJs with play framework, I've created a folder inside my public folder called AngularJs, in which i have generated an angular app with yeoman.
After generating the sources with grunt build, in the route folder of play, I've put:
GET / controllers.Assets.at(path="/public/javascripts/angularJs/src/dist", file="index.html")
Now the problem I am facing is that the index page is well retrieved but Angular doesn't load the templates.
Anyone have a clue?
Ok now I get it after fiddling around for a moment, the problem with angularJs and Play framework, is that play must serv all the angularJS resources, so the solution to the problem, is to create routes to the angularJs dist folder in your public play application folder.
for an angularJs application created with Yeoman and generated using "grunt build", you must define these routes :
GET /scripts/*Asset controllers.Assets.at(path="/public/javascripts/angularJs/scripts", Asset)
GET /views/*Asset controllers.Assets.at(path="/public/javascripts/angularJs/views", Asset)