Ionic Geolocation Using ngCordova

Step 1  Run from your terminal

bower install ngCordova

Step 2 Add this to your index.html

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

Just above to 

    <script src="cordova.js"></script>

Step 3  Run from your terminal

       cordova plugin add org.apache.cordova.geolocation

Step 4 Add this to your services.js

    .factory('$localStorage', ['$window', function ($window) {
        return {
            set: function (key, value) {
                $window.localStorage[key] = value;
            },
            get: function (key, defaultValue) {
                return $window.localStorage[key] || defaultValue;
            },
            setObject: function (key, value) {
                $window.localStorage[key] = JSON.stringify(value);
            },
            getObject: function (key) {
                return JSON.parse($window.localStorage[key] || '{}');
            }
        }
    }])

    .factory('geoLocation', function ($localStorage) {
        return {
            setGeolocation: function (latitude, longitude) {
                var _position = {
                    latitude: latitude,
                    longitude: longitude
                }
                $localStorage.setObject('geoLocation', _position)
            },
            getGeolocation: function () {
                return glocation = {
                    lat: $localStorage.getObject('geoLocation').latitude,
                    lng: $localStorage.getObject('geoLocation').longitude
                }
            }
        }
    })

Step 5 : Add this to your app.js

    .run(function ($ionicPlatform, $ionicPlatform, $cordovaGeolocation, geoLocation) {

        $ionicPlatform.ready(function () {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }

            $cordovaGeolocation
                .getCurrentPosition()
                .then(function (position) {
                    geoLocation.setGeolocation(position.coords.latitude, position.coords.longitude)
                }, function (err) {
                    geoLocation.setGeolocation(37.38, -122.09)
                });

            // begin a watch
            var options = {
                frequency: 1000,
                timeout: 3000,
                enableHighAccuracy: true
            };

            var watch = $cordovaGeolocation.watchPosition(options);
            watch.promise.then(function () { /* Not  used */
                },
                function (err) {
                    geoLocation.setGeolocation(37.38, -122.09)
                }, function (position) {
                    geoLocation.setGeolocation(position.coords.latitude, position.coords.longitude)
                });

        });

    })

Step 5 : Include geoLocation service to your controller and use        

               geoLocation.getGeolocation()

Step 6 :  Enjoy!!!

Ionic GoogleMaps Directive

Step 1. Add this to your index.html file.

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

Step 2. Add this to your directive.js file.

   .directive('map', function () {
        return {
            restrict: 'E',
            scope: {
                onCreate: '&'
            },
            link: function ($scope, $element, $attr) {
                var directionDisplay;
                var directionsService = new google.maps.DirectionsService();

                function initialize() {
                    var latlng = new google.maps.LatLng(51.764696,5.526042);
                    directionsDisplay = new google.maps.DirectionsRenderer();

                    var mapOptions = {
                        zoom: 8,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        mapTypeControl: false

                    };
                    var map = new google.maps.Map($element[0], mapOptions);
                    directionsDisplay.setMap(map);
                    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        title:"My location"
                    });

                    $scope.onCreate({map: map});
                    // Stop the side bar from dragging when mousedown/tapdown on the map
                    google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
                        e.preventDefault();
                        return false;
                    });

                    calcRoute();
                }

                function calcRoute() {
                    var start = "28.6100,77.2300";
                    var end = "37.38, -122.09";
                    var request = {
                        origin: start,
                        destination: end,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };
                    directionsService.route(request, function (response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response);
                        }
                    });
                }

                if (document.readyState === "complete") {
                    initialize();
                } else {
                    google.maps.event.addDomListener(window, 'load', initialize);
                }
            }
        }
    });

Step 3. Add this to your style.css file.

map {
    display: block;
    width: 100%;
    height: 100%;
}

.scroll {
    height: 100%;
}
.profile-info-right p {
    max-width: 185px;
}

And finally  to your template :-

        <map on-create="mapCreated(map)"></map>

fake SMTP Mailtrap

Mailtrap

is a fake SMTP server for development teams to test, view and share emails sent from the development and staging environments without spamming real customers.

Mailtrap is a solution that allows testing email notifications without sending them to the real users of your application. It also lets you view all your emails online, forward them to your regular mailbox, share with the team and more!
Mailtrap is a product built by Railsware, a premium software development consulting company.

Integration: 

Simply specify Mailtrap as an SMTP server in your application's settings (either QA or development environments) and track all your e-mail notifications online.
 

Features: 

1. Extremely easy to set up:
   • no need to tune your mail server;
   • no need to clean up your database from the customers' email addresses;
   • no need to make any special tweaks in your application code.
2. Can be used for both development and staging purposes.
3. Is platform-independent. Since Mailtrap uses SMTP (not some special platform-dependant libraries), you can use it with any programming language and framework.
4. Built-in goodies for web developers.

Mailtrap renders emails in the same way browsers do, which means no additional stylesheet or CSS reset is applied by default. This makes Mailtrap 99% Gmail/Hotmail/Yahoo Mail compatible, since all of these mail clients are rendering the same way.

The max size of an email including attachments is 5MB. Exceeding this limit causes the error: '552 5.3.4 Error: message too big'

The SMTP rate limit is 3 emails per second for inbox. Exceeding this limit causes the error: '550 5.7.0 Requested action not taken: too many emails per second'

Install Android, Cordova, and Ionic Framework in Ubuntu

Requirements :

• Java JDK
• Apache Ant
• Android SDK
• NodeJS / NPM
• Apache Cordova
• Ionic Framework

Steps:

1. Download this shell script.
2. chmod 775 ubuntu_ionic_installer.sh 
3. sudo ./ubuntu_ionic_installer.sh
4. To download the necessary Android targets and platform tools you will need to enter android from a command prompt to launch the Android UI. You will need Android API 19 for Ionic Framework, so install that when you’re able to.
5. ionic start ExampleProject maps
6. cd ExampleProject
7. ionic platform add android
8.  ionic build android
9.  That's It.