ionic/angular: Implement A Barcode Scanner Using Ionic Framework


Source:

https://blog.nraboy.com/2014/09/implement-barcode-scanner-using-ionic-framework/

More specifically I needed to scan quick response (QR) codes.  After doing some searching I found that ngCordova had an extension for the Apache Cordova plugin BarcodeScanner which has the ability to scan barcodes in the following formats:

  • QR Code
  • Data Matrix
  • UPC E
  • UPC A
  • EAN 8
  • EAN 13
  • Code 128
  • Code 39
  • ITF

Pretty much all the formats anyone would ever need.  The plugin itself makes use of the very popular ZXing library.

Thanks to Nick Raboy for wonderful article.

Happy Android Development 🙂

ionic/angular: Create, Delete, And Search Contacts In Ionic Framework


Source:

https://blog.nraboy.com/2014/11/create-delete-search-contacts-ionic-framework/

When you make an app or service, you may find your self wanting to strengthen the user experience by connecting with friends in some fashion.  Applications like Facebook and Twitter allow you to search your contact book for friends that are already using their service.  If your friend isn’t using the service, you have the option to invite them.

Using native Android and iOS code could make this process very painful for the developer as it is lengthy and difficult.  Lucky for us, we are using Apache Cordova with Ionic Framework and there is a plugin for us that takes all the pain away.

The following steps will show you how to create, delete, and find all device contacts in your Ionic Framework project.
Thanks to Nick Raboy for wonderful article.
Happy Android Development 🙂

Using Resolve In AngularJS Routes


Found really nice article from “Ode to Code by Scott Allen”

A resolve is a property you can attach to a route in both ngRoute and the more robust UI router. A resolve contains one or more promises that must resolve successfully before the route will change. This means you can wait for data to become available before showing a view, and simplify the initialization of the model inside a controller because the initial data is given to the controller instead of the controller needing to go out and fetch the data.

As an example, let’s use the following simple service which uses $q to simulate the async work required to fetch some data.

app.factory("messageService", function($q){
    return {
        getMessage: function(){
            return $q.when("Hello World!");
        }
    };
});

And now the routing configuration that will use the service in a resolve.

$routeProvider
    .when("/news", {
        templateUrl: "newsView.html",
        controller: "newsController",
        resolve: {
            message: function(messageService){
                return messageService.getMessage();
        }
    }
})

Resolve is a property on the routing configuration, and each property on resolve can be an injectable function (meaning it can ask for service dependencies). The function should return a promise.

When the promise completes successfully, the resolve property (message in this scenario) is available to inject into a controller function. In other words, all a controller needs to do to grab data gathered during resolve is to ask for the data using the same name as the resolve property (message).

app.controller("newsController", function (message) {
    $scope.message = message;
});

You can work with multiple resolve properties. As an example, let’s introduce a 2nd service. Unlike the messageService, this service is a little bit slow.

app.factory("greetingService", function($q, $timeout){
   return {
       getGreeting: function(){
           var deferred = $q.defer();
           $timeout(function(){
               deferred.resolve("Allo!");
           },2000);
           return deferred.promise;
       }
   }
});

Now the resolve in the routing configuration has two promise producing functions.

.when("/news", {
    templateUrl: "newsView.html",
    controller: "newsController",
    resolve: {
        message: function(messageService){
            return messageService.getMessage();
        },
        greeting: function(greetingService){
            return greetingService.getGreeting();
        }
    }
})

And the associated controller can ask for both message and greeting.

app.controller("newsController", function ($scope, message, greeting) {
    $scope.message = message;
    $scope.greeting = greeting;
});

Composing Resolve

Although there are benefits to moving code out of a controller, there are also drawbacks to having code inside the route definitions. For controllers that require a complicated setup I like to use a small service dedicated to providing resolve features for a controller. The service relies heavily on promise composition and might look like the following.

app.factory("newsControllerInitialData", function(messageService, greetingService, $q) {
    return function() {
        var message = messageService.getMessage();
        var greeting = greetingService.getGreeting();
        return $q.all([message, greeting]).then(function(results){
            return {
                message: results[0],
                greeting: results[1]
            };
        });
    }
});

Not only is the code inside a service easier to test than the code inside a route definition, but the route definitions are also easier to read.

.when("/news", {
    templateUrl: "newsView.html",
    controller: "newsController",
    resolve: {
        initialData: function(newsControllerInitialData){
            return newsControllerInitialData();
        }
    }
})

And the controller is also easy.

app.controller("newsController", function ($scope, initialData) {
    $scope.message = initialData.message;
    $scope.greeting = initialData.greeting;
});

One of the keys to all of this working is $q.all, which is a beautiful way to compose promises and run requests in parallel.

source:http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx

Happy Coding 🙂

angular- Stop event propogation


simple angularjs way –

ng-click="UpdateResponderStatus(item, status.id); $event.stopPropagation();"

directive way –

.directive('stopEvent', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.bind(attr.stopEvent, function (e) {
e.stopPropagation();
});
}
};
});

that could be used this way:

Happy Coding.. 🙂

How to set value property in angularjs ng-options?


 

http://docs.angularjs.org/api/ng.directive:select

ngOptions(optional) – {comprehension_expression=} – in one of the following forms:

for array data sources:
label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array
for object data sources:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object

In your case, it should be

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

required field Label–Angularjs Directive


So I thought to make some kind of custom <label> where I have mark showing that this field is required along with label text….

In angular, we can take advantage of making directives for this kind of custom control, so I did something like below –

HTML

<required-label label=”First Name”></required-label>

app.JS  (Angular Directive)

appRoot.directive(‘requiredLabel’, function () {
    return {
        restrict: ‘E’,
        replace: false,
        scope: {
            name: ‘@’
        },
        template: “<label popover=’Required Input’ popover-trigger=’mouseenter’ >{{Text}}&nbsp;<i class=’icon ion-ios7-star red’></i>&nbsp;”,
        link: function (scope, element, attrs) {
            scope.Text = attrs[‘label’];
        }
    };
});

Happy CodingSmile

angularjs – $apply and $digest


$apply and $digest

That step that checks to see if any binding values have changed actually has a method,$scope.$digest(). That’s actually where the magic happens, but we almost never call it directly, instead we use $scope.$apply() which will call $scope.$digest() for you.

$scope.$apply() takes a function or an Angular expression string, and executes it, then calls $scope.$digest() to update any bindings or watchers.

So, when do you need to call $apply()? Very rarely, actually. AngularJS actually calls almost all of your code within an $apply call. Events like ng-click, controller initialization, $http callbacks are all wrapped in $scope.$apply(). So you don’t need to call it yourself, in fact you can’t. Calling $apply inside $apply will throw an error.

You do need to use it if you are going to run code in a new turn. And only if that turn isn’t being created from a method in the AngularJS library. Inside that new turn, you should wrap your code in $scope.$apply(). Here is an example. We are using setTimeout, which will execute a function in a new turn after a delay. Since Angular doesn’t know about that new turn, the update will not be reflected.

 

But, if we wrap the code for that turn in $scope.$apply(), the change will be noticed, and the page is updated.

 

As a convenience, AngularJS provides $timeout, which is like setTimeout, but automatically wraps your code in $apply by default. Use that, not this

If you write any code that uses Ajax without $http, or listens for events without using Angular’s ng-* listeners, or sets a timeout without $timeout, you should wrap your code in $scope.$apply

$scope.$apply() vs $scope.$apply(fn)

Sometimes I see examples where data is updated, and then $scope.$apply() is called with no arguments. This achieves the desired result, but misses some opportunities.

If your code isn’t wrapped in a function passed to $apply, and it throws an error, that error is thrown outside of AngularJS, which means any error handling being used in your application is going to miss it. $apply not only runs your code, but it runs it in atry/catch so your error is always caught, and the $digest call is in a finally clause, meaning it will run regardless of an error being thrown. That’s pretty nice.

Hopefully now you understand what $apply is and when to use it. If you only use what AngularJS provides you, you shouldn’t need to use it often. But if you begin writing directives where you are observing DOM elements directly, it is going to become necessary.


Happy Coding…:)

Angularjs With JQuery UI Dialog – First and Only example of non model windows


AngularJS Question :
I want to create Modeless / Nonmodal window plugin using Angularjs.
Basically , I have one button on my page and on click of it, i want to keep creating new small non-modal dialog window multiple instances.

– Angular JS with JQueryUI Dialog (created dialog service in angular which uses jquery ui dialog)

– capable of handling multiple instance of dialog windows on same page with same html template.

– uses ng-template in all instances of dialogs without interfering with eachother.

  1. Finally – Download plunker –     http://plnkr.co/edit/IacJX1mlsQ09h44LXV2f?p=preview
  2.  Github for Dialog-service.js      https://github.com/jwstadler/angular-jquery-dialog-service

Another BootStrap option is  – Bootstrap Window

/bootstrap-window

Happy Coding… 🙂

GASP TimeLineMax/TimeLineLite : More Advance Flash styles complex animation library for Jquery and AngularJS


GSAP is a suite of tools for scripted, high-performance HTML5 animations that work in all major browsers. No other library delivers such advanced sequencing, API efficiency, and tight control. Stop wrestling with cumbersome CSS animations, stuttery jQuery.animate() calls, or a system that limits your creativity. Use animation to tell a story in a rich way rather than settling for a few fades and slides.

Download and Read More:  http://www.greensock.com/gsap-js/

Licence : Open Source 

Happy Coding…:)

 

Learning AngularJS – best resources to learn angularjs for beginners.


AngularJS –HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

  1. https://github.com/jmcunningham/AngularJS-Learning
  2. http://techslides.com/angular-js-demos-examples-and-resources/
  3. https://leanpub.com/recipes-with-angular-js/read
  4. https://www.youtube.com/watch?v=i9MHigUZKEM
  5. https://www.youtube.com/watch?v=QETUuZ27N0w
  6. https://www.youtube.com/watch?v=TRrL5j3MIvo&index=11&list=PLmtADjkIi7R9_HFpGdosdOrDsAkHQVSq3
  7. https://egghead.io/technologies/angularjs
  8. http://ng-learn.org/
  9. http://henriquat.re/intro/angular/angularjsForDotNetDevelopers.html  – (2 min learning of angularjs for .net developers…)

And Last but not least ofcource – AngularJS.org  & http://ng-learn.org/

Some jquery plugins for AngularJS

  1. https://github.com/jirikavi/AngularJS-Toaster    (toastr notification plugin)
  2. https://github.com/codef0rmer/angular-dragdrop
  3. https://github.com/revolunet/angular-carousel
  4. https://github.com/nlaplante/angular-google-maps
  5. https://github.com/simpulton/angularjs-wizard
  6. https://github.com/angular-ui/bootstrap
  7. http://vitalets.github.io/angular-xeditable/  (Inline editing using angular)                    e.g.http://plnkr.co/edit/2UFfaG?p=preview           http://jsfiddle.net/christianacca/gpgD4/          http://jsfiddle.net/Thw8n/4/     http://icelab.com.au/articles/click-to-edit-with-angularjs/                http://scotch.io/tag/angular-js
  8. https://github.com/pikock/bootstrap-magic  ( Bootstrap themer for angular)
  9. https://github.com/nervgh/angular-file-upload  (file uploader)
  10. https://github.com/arunisrael/angularjs-geolocation
  11. https://github.com/2fdevs/videogular
  12. https://github.com/Wintellect/Angular-MVC-Cookbook
  13. http://juampy72.github.io/angularjs_form/
  14. https://github.com/webux/ux-angularjs-datagrid
  15. https://github.com/Augus/ngAnimate (best animations with angular)
  16. https://github.com/gsklee/ngStorage     – localStorage and sessionStorage done right for AngularJS.
  17. https://github.com/angular-ui/ui-date
  18. https://github.com/eu81273/angular.treeview
    1. http://jimliu.github.io/angular-ui-tree/
  19. https://github.com/fabiobiondi/angular-fullscreen
  20. https://github.com/darylrowland/angucomplete
  21. http://blog.brentmckendrick.com/angularjs-visual-studio-2012-intellisense/
  22. http://mozilla.github.io/pdf.js/
  23. https://github.com/allaud/quick-ng-repeat
  24. https://github.com/frapontillo/angular-filters (Useful AngularJS filters)
  25. http://chieffancypants.github.io/angular-hotkeys/  (AngularJS Keyboard Shortcut)
  26. https://github.com/wpalahnuk/angular-gm (Angular Google Map )
  27. https://github.com/revolunet/angular-carousel  (Angular Carousel)
  28. https://github.com/wpalahnuk/ngAutocomplete  (Angular Auto Complete)
  29. https://github.com/zensh/ui-autocomplete  (another AutoComplete with Angular)
  30. http://ngmodules.org/modules/AngularJS-Toaster   (Toaster Notification using Angular)
  31. http://pgwjs.com/pgwmodal/   (Another modal dialog service)
  32. BootStrap Window Using JQUERY – https://github.com/Flyer53/jsPanel-bootstrap
  33. http://plnkr.co/edit/l13dwaGeUqBy79sEW4Zi?p=preview   ( Custom Filter Directive plunkr & ng-if example)

 

 

AngularJS – Beginners guide

A bunch of links to blog posts, articles, videos, etc for learning AngularJS. This list is in its early stages. Feel free to submit a pull request if you have some links/resources to add. Also, I try to verify that the articles below have some real content (i.e. aren’t 2 paragraph blog posts with little information) to ensure I’m not listing “fluff” pieces. If you have an idea for a better way to organize these links, please let me know. As I find similar posts in the “General Topics” section, I will break them out into their own categories.

AngularJS

Books

Videos

Help

General Topics

Scopes

Dependency Injection

Directives

Services/Providers

Routing

Promises/Deferred

Forms

Code Organization

Testing

RESTful Stuff

UI Stuff

Hosted Backends

Text editor bundles

Originally published by Jeff Cunningham on github

AngularJS: ng-repeat get last 3 element from JSON


You could do

message in item.comments | limitTo:-3

Also for your comments, you should haven’t them as a object dictionary, rather just use an array like so:

"comments":[{"id":"comment1","name":"user1","description":"This is comment 1"},{"id":"comment2","name":"Jane D.","description":"This is comment 2"},{"id":"comment3","name":"Jone D.","description":"This is comment 3"},{"id":"comment4","name":"Test","description":"This is comment 4"},{"id":"comment5","name":"user","description":"This is comment 5"}]

If they aren’t already in order you may need to add a date field of sort and sort them after you pull them in.