- Using php-di for injection (you must update the api.php into /web)
- Possibility to combine save request from js
- Using systemJS
- move all controller to Angular component (for easy migration to angular2)
- Right table with user group
- using doctrine from the symfony project
- using php-di
- Almost same entity manager for client and server (later a Xamarin version will be released) with persist and flush
- Client side repository service with findAll, findById, FindSome(condition)
- user login management
- auto combine get request
- unit test with jasmine
This website uses my library: https://www.amelieferrari.fr
Define all namespace we will use for Entity in composer.json (you can use the namespace you want but it must be like XX\XX\Entity, and other class you may need like Controller, Service, ...)
"psr-4": {
"Emeric0101\\PHPAngular\\Entity\\": "src/Entity/"
}
Use composer with composer require phpangular
You need to setup the mysql and the namespace login settings in yourapp/bootstrap.php Your bootstrap.php must be like this
// bootstrap.php
define('APP_DIR', '');
define('PHPANGULAR_DEBUG', true);
define('URL_STORAGE', 'web/upload/');
define('URL_ABSOLUTE', 'http://localhost/phpangular-test/web/');
// mysql config
define('DOCTRINE_HOST', 'localhost');
define('DOCTRINE_USER', 'root');
define('DOCTRINE_PASSWORD', '');
define('DOCTRINE_DB', 'phpangular');
define('resetWebDir', false);
session_start();
require_once "PHPAngularConfig.php";
require_once "vendor/autoload.php";
Set your PHPANGULAR_BUNDLE, this is the name of your bundle. This must be absolute like '\Emeric0101\PHPAngular'
If you need to add some js or css file, you can add them in this folder, for instance :
static $jsModule = [
'node_modules/boostrap/dist/bootstrap.min.js',
'node_modules/jquery/dist/jquery.min.js'
];
Now you have to create the Entity with doctrine Create Entities ** You must use Annotation**
Every entity have to derived from Emeric0101\PHPAngular\Entity\EntityAbstract
You can use all association with doctrine you want !
Then you can use doctrine to create the mysql database with doctrine orm:schema-tool:create
Run the script
phpangular install
cd web
npm init
Then create your npm project
npm install --save angular angular-i18n angular-locale angular-mocks angular-route es6-promise
npm install --save-dev jasmine-core karma karma-jasmine karma-phantomjs-launcher karma-cli karma-htmlfile-reporter karma-jasmine-html-reporter typescript@^2.1 typings
Then tsc
(you will get some error but don't worry, the system works and i'm working to fix this)
The script has created a web folder. This folder contains all public data accessible from web (Typescript, html, ...). In the folder src, all php source files have been generated by the script.
In fact, most of the code are in the web/js and in the web/template folders. In the src folder, you will just need to set all post operation (with right check !!!)
For instance, we admit that you have created a Entity called TestVendor\TestBundle\Message which have a title(string) and a description(string). So we will need a controller in the server side to save the entity, of get some entity with parameters.
Some controller function has been already implemented : findAll and findById so you don't need to implemented them.
Create a folder src/Controller then create a file Message.php
<?php
namespace TestVendor\TestBundle\Controller;
use Emeric0101\PHPAngular\Controller\Entity;
use Emeric0101\PHPAngular\Service\DbService;
use TestVendor\TestBundle\Entity\Message as EntityMessage;
class Message extends Entity {
public function post($id = 0) {
$entityMessage = $this->entityManager->find("TestVendor\TestBundle\Entity\Message", $id);
if ($entityMessage === NULL) {
$entityMessage = new EntityMessage();
}
// Get from POST
$title = $this->request->postFromArray("Message",'title', ''));
$desription = $this->request->postFromArray("Message",'description', ''));
$entityMessage->setTitle($title);
$entityMessage->setDescription($description);
$this->entityManager->persist($entityMessage);
$this->entityManager->flush();
$this->response->setResponse("Message", $entityMessage);
return true;
}
}
The class Message derived from Entity which implements all entity controller basic functions. If you only need a controller, you can derived from Emeric0101\PHPAngular\Controller\Controller class. When an object is save from Typescript, the post function is called with the $id (0 if it is a new object). In this method, first we try to find the object into the db with the id, else we create a new one.
The entity Manager of doctrine is accessible with $this->entityManager For getting data from GET, SESSION, COOKIE or POST, you can use the servier Request ($this->request).
public function post($name, $default);
public function get($name, $default);
public function cookie($name, $default);
public function session($name, $default);
public function postFromArray($arrayName, $name, $default);
The $name is the index of the var requested. $default is the default value (in case of non correct data). $default MUST be the same TYPE as the variable request (string, number, ...) With the method postFromArray you can get a var extract from an array from Post. This method is used to get value from TypeScript Entity Manager.
The rest of the method is same as doctrine
After running PHPAngular.bat, some files are created in the web folder. In web/js/Entity, you find all entities from doctrine. The default controller is "home" (template/home/home/home.html), but we provided a demo controller to help you to create this one. All routes, entities management, ... are provided by PHPAngular so you just need to create template and controller in order to build your app.
The route is easy to use : url/folder1/folder2 will call the template into template/folder1/folder2/folder2.html. If folder2 is not provided, folder1 will be repeated.
In web/template/home/home/, we find a sample controller and a template.
module Emeric0101.PHPAngular.Controller {
class MainController {
message : TestVendor.TestBundle.Message = null;
messages : TestVendor.TestBundle.Message[] = [];
static $inject = ['UrlService', 'EntityManager', 'EntityFactory', 'RepositoryService'];
getMessage() {
this.$repo.findAll('Message', (messages) => {
this.messages = <TestVendor.TestBundle.Message[]>messages;
};
}
createMessage() {
this.message = this.$ef.create('Message');
this.message.setTitle("test");
this.message.setDescription("test");
this.$em.persist(this.message);
this.$em.flush();
}
constructor(
private $url : Emeric0101.PHPAngular.Service.UrlService,
private $em : Emeric0101.PHPAngular.Service.EntityManager,
private $ef : Emeric0101.PHPAngular.Service.EntityFactory,
private $repo : Emeric0101.PHPAngular.Service.RepositoryService
){
}
}
phpangularModule.controller("MainController", MainController);
}
The entityManager is like doctrine entityManager (so it automaticly persists all entities linked to)
You can use MainController::message directly as ng-model in the template (ng-model="ctrl.message.title")
For using this controller into the template, you just need to call it with ng-controller="MainController as ctrl".
You may use custom query to get entities from the server. The repository service permits you to do this by the method findSome
findSome(
method: string, // The method you want into the controller
name : string, // The controller to call in the server (MUST BE THE SAME NAME THAN THE ENTITY REQUESTED)
id: number, // Args to pass to the controller
params: any, // Get params to the controller (if id is not enough)
callback : (obj : any[]) => void, // callback to call after (because async)
error? : () => void
) {
In the controller (PHP) :
public function someFunction($id = 0) {
if ($id == 0) {
$this->response->setError("missing id");
return false;
}
$message = $this->entityManager->find("TestVendor\TestBundle\Entity\Message", $id);
$this->response->setResponse('Message', $message);
}
Obviously, this method is useless because it does exactly the same as findById().
You can use some angular modules by adding them into phpangularmodules (web/config.ts).
It is like doing angular.module('somemodule', phpangularmodules);
var phpangularmodules = ['angular-file-upload', 'anguar-recaptcha'];
You just have to create an entity which implement IUser (don't forget to extends EntityAbstract)
namespace Emeric0101\PHPAngular\Entity;
use Emeric0101\PHPAngular\Entity\EntityAbstract;
interface IUser
{
public function setMail($mail);
public function getMail();
public function getPassword();
public function setHashedPassword(string $p);
}
PHPAngular provide login and logout method by the controller "Login". But you have to create the user subscribe yourself. In Emeric0101\PHPAngular\Service\Login, you have some methods which help you to check user account. For password hash, you can use Emeric0101\PHPAngular\Service\Login::hashPassword(string)
You have to implement IUser too (but the entity MUST be the same than the server !!!) Like the server side, you have a Login service which provide you all methods you'll need for user login and logout.