Skip to main content

Posts

Showing posts with the label AngularJs

AngularJs Interpolate Filter

This might be a simple angular filter, but more helpful to reduce ugly code in your controller. Angular provides '$interpolate' service to evaluate angular expressions.  Consider you have some constant template with some expression expecting a dynamic value - lets say userName. Example: //example.js angular.module('app.example',[]) .constant('TEMPLATE',{ WELCOME_MSG: 'Hi {{userName}} Welcome to our Portal' }) .controller('sampleCtrl', function($scope, TEMPLATE, $interpolate){ $scope.data = { userName:'Ajai' }; $scope.MSG = $interpolate(TEMPLATE.WELCOME_MSG)($scope.data); }); <!--example.html--> <div ng-app="app.example" ng-controller="sampleCtrl"> <h1>{{MSG}}</h1> </div> Instead you can simplify the above one with custom interpolate filter. Below example wont make much difference, but consider if you have some 100 template constants - ...

Using Angular with Laravel / Conflict between Laravel Blade and Angular

The Conflict: Peoples who are using Laravel and AngularJs may know, Laravel’s Blade templating engine and AngularJs uses the same markup when displaying variables {{ variableName }} Solution 1 (Laravel): Laravel Blade template engine comes with an option to change the literal tags. so if you want to keep the angular syntax, then include the following code in  app/routes.php //general syntax Blade::setContentTags('<%', '%>'); //for escaped data: Blade::setEscapedContentTags('<%%', '%%>'); Solution 2 (AngularJs): AngularJs comes with an option to change the literal tags using $interpolateProvider It should be declared within your module. angular.module('MyApp', [], function($interpolateProvider) { $interpolateProvider.startSymbol(' '); });