angularjs Archives - Ibexoft - Your Technology Partner!

Sharing data between Laravel and Angular

November 8, 2017August 17, 2022 by Muhammad Jawaid Shamshadin AngularJS, PHP, Technology, Web, Web DevelopmentLeave a Comment

When building applications with Laravel and Angular you might come across a problem where you want to print data using AngularJS brackets {{}} but before it can be parsed by Angular, Laravel blade engine parses it and tries to replace the value if it finds one. Otherwise, Laravel will start complaining about the variables. To solve that you just need to prepend brackets with @ sign so the blade engine knows that you just need to ignore this expression and AngularJS will take care of it. And AngularJS will parse it and replace the variables with actual data.

Below is a sample snippet to do this:

@{{ article.body }}

In this snippet, the Laravel blade engine will ignore this and AngularJS will parse it and replace it with the article.body data it has.

Click here to read more about Laravel and Angular.

AngularJS vs BackboneJS vs EmberJS? What I decided and why?

October 30, 2014September 12, 2022 by Muhammad Jawaid Shamshadin AngularJS, Javascript, TechnologyLeave a Comment

I was researching for Javascript frameworks/libraries to use in my next project. I found three promising JS frameworks.

What I was looking for was that framework should be easy to learn and should be integrated in the project easily. Keeping in that mind I searched a little bit about each and went through some reviews. What I concluded I’d just say it in one line for each.

Backbone.js – You need to write lots of boilerplate code to get to work.

Ember.js – It has a steep learning curve.

Anguler.js – Just in between. Offers more than backbone and is easier to learn than ember.

So, that was it! I picked Angular for my next project since it was easier to learn and you don’t have to do a lot to get it working in your project. Since the project was new and the deadline was short, this was the requirement. So, I decided to go with Angular and I’m glad I made the right decision.

What’s your call? What you picked and why? I would like to listen in the comments.

Create your first real-time AngularJS application

September 13, 2014September 13, 2022 by Muhammad Jawaid Shamshadin AngularJS, Javascript, jQuery, PHP, Technology, Web, Web DevelopmentLeave a Comment

In my previous article I talked about creating real-time PHP application. That was on the server side and I demonstrated a very very basic client to connect with it. Let’s take that to next step and create a Javascript client with AngularJS.

Code

angular-client.html

<html>
 <head>

 css/bootstrap.min.css" rel="stylesheet">
 
 
 
 <script src="angular-client.js"></script>

<style>
 body { margin-top: 10px; }
 input.message { height: 30px; }
 </style>
 </head>
 AppCtrl">
 <form class="form-inline">
 <button ng-click="connect()" class="btn">Connect</button>
 <input type="text" ng-model="text" placeholder="input message to send" class="message"></input>
 <button ng-click="send()" class="btn">send</button>
 </form>
 
 <table class="table table-striped">
 <tr ng-repeat="message in messages">
 <td>{{message}}</td>
 </tr
 </table>
 </body>
</html>

angular-client.js

var app = angular.module('app', []);

app.factory('ChatService', function() {
 var service = {};
 
 service.connect = function() {
 if(service.ws) { return; }
 
 var ws = new WebSocket("ws://localhost:8080");
 
 ws.onopen = function() {
 service.callback("Succeeded to open a connection");
 };
 
 ws.onerror = function() {
 service.callback("Failed to open a connection");
 }
 
 ws.onmessage = function(message) {
 service.callback(message.data);
 };
 
 service.ws = ws;
 }
 
 service.send = function(message) {
 service.ws.send(message);
 }
 
 service.subscribe = function(callback) {
 service.callback = callback;
 }
 
 return service;
});
 
 
app.controller('AppCtrl', ['$scope', 'ChatService', function($scope, ChatService) {
 $scope.messages = [];
 
 ChatService.subscribe(function(message) {
 $scope.messages.push(message);
 $scope.$apply();
 });
 
 $scope.connect = function() {
 ChatService.connect();
 }
 
 $scope.send = function() {
 ChatService.send($scope.text);
 $scope.text = "";
 }
}]);

Details

It is pretty straightforward. We created an Angular Service and consumed that in our Angular controller. The only purpose of Angular service is handling communication. It will hand over the message to the subscriber in our case Angular controller and controller can do anything with that message. Here since we demonstrated the chat application so controller displays that message received.

That’s it! so simple.

Note: Both HTML and Javascript files are also available on Gist.

Code was referenced from here.

Global Variables in AngularJS

September 4, 2014September 16, 2022 by Muhammad Jawaid Shamshadin AngularJS, Javascript, Technology, Web, Web DevelopmentLeave a Comment

I’ve followed the angularjs tutorial and I noticed that I wasn’t able to have global variables.
Turns out to be actually simple but Angular doesn’t mention it.
You will need to edit your app module (app.js )

var app = angular.module('appName',);

//Add this to have access to a global variable

app.run(function ($rootScope) {

    $rootScope.globalVariable = 'Hi, global variabel'; //global variable

});

Now if you want to use it from your controller

function appNameCtrl($scope, $rootScope){

    $rootScope.globalVariable = 'Modji';

In your view

My name is {{globalVariable}}

If you are using any services like $http in your controller then you have to pass $rootScope as service along with $http.

app.controller('appNameCtrl', ['$http', '$rootScope', function ($scope, $rootScope){

    $rootScope.globalVariable = 'Modji';

}]);

To see the example visit my Plunker at http://plnkr.co/edit/JyIfkT1AxiCU2xx4WjJK?p=preview

Tag: angularjs