Angular.js For PHP Programmers

The purpose of this article is to explain how to adapt to using angular.js for those who have a background in PHP; since angular is MVC, uses controllers, and outputs $scope variables in the HTML using {{variableName}} much like a template engine like Smarty, Twig and Blade.

If you have at least a basic understanding of object oriented PHP that is good. If you have familiarity with PHP Frameworks like Laravel or Symfony, that will likely help even more; especially for those with more experience.

Now that I brought some basics to the table, I will point you to a basic angular.js example.  This explains the bare bones basics of an angular.js app using $scope, a controller and variable output in HTML.

However, another step forward in your progression is the usage of the factory() and service() methods. Here are two good examples of using these two methods.

Service Methods

Factory and Service Method

If you look into the factory and service methods, you will see that everything starts from the controller. Within the controller, a service or factory method can be called using the name that was given to the method. This is very much like using a class with PHP and calling another function within the class. In addition, you could come across a situation(such as the latter link above) for which the controller calls a service which in turn calls a factory method.

Naming Conventions

Here is a quick lesson in naming the controller, factory and service methods.

Controller

The controller is accessed in your HTML file via the 'ng-controller' directive, or as you would normally here in HTML, the attribute. The 'ng-controller' takes place between the beginning and ending tag for which it is used; such as a div. The name of the controller is important because a name like ng-controller="myController" means that it will reference the Javascript code where the first parameter in the method is the name of the controller.

After you look over the examples from above, this link about controllers  may help clear up details regarding how a controller works. As you can see, you can add the $scope and dependencies into an array between the [] brackets and call an anonymous function. That anonymous function will allow you to run methods from a factory or service method. Alternatively, you can run a service method that can run an anonymous function using a factory method.

Ending Statements

So, to wrap things up, I hope you could absorb some of the methods to use angular.js based in the fact that you have a background in PHP. This should make the usage of angular more friendly because it takes the knowledge and essentially, many of the features of angular.js that you already know.

So, here is what you have learned. You should now know how to setup a controller in the Javascript and initiate its usage from within the HTML using the ng-controller directive.

Although the tutorial links above showed some good examples, remember that you can run a function within a controller very easily with the on-click directive. If that is not totally clear, the code below shows a simple example that calls a function within a controller.

Here is what is happening. The input box has ng-model="myInput". That value will be $scope.myInput in the Javsacript. When myFunc() is initiated, the function in the controller runs and a new $scope variable called $scope.outputMessage is created.

Call the Function In HTML

<input ng-model="myInput">
<button ng-click="myFunc();">Submit</button>

 

The Actual Function in the Javascript

controller('Controller1', ['$scope', function ($scope) {
$scope.myFunc = function() {
$scope.outputMesssage = "Hi " + $scope.myInput;
};
}])