A large amount of today’s financial ecosystem is depending on Startup Company. In last few years startup ecosystem in India has stretched like anything. We can see plenty of startups in each and every sector, some of them are really doing well.

Anyway, venturestop.com is a digital media platform to promote startup’s success story in free. 

If you are founder/CEO of any startup and want to promote your company in free, please share your company’s information with us, we will create one nice article from this information and promote in our media.

It’s in free. 

Pitfall in access AngularJS function from non-angular environment

In Google you will find lot of answer but there is one pitfall which I realize from my personal practical experience.

Suppose, we want to access AngularJS function from non-Angular environment (like JQuery and other JS environment). How we can do that? Very simple.

  angular.element(document.getElementById(‘Id')).scope().YourFunction();

     

Yes, we are getting element by Id and in this article here I want to focus. If you think that the “Id” is any Id value from DOM then you are wrong.

To make it work, please use the element Id where your controller is defines. Here is the example.

<div id='myId' ng-controller="IndexPageController">

In this <div> we are specifying the controller and once we want to access the function use “myId” in syntax. So the syntax will be like this.

angular.element(document.getElementById(‘myId')).scope().YourFunction();

Otherwise you may encounter function not found error. 

Combine multiple promises and load before loading view AngularJS

It’s very common in application where we need to combine multiple promises to load and bind data in controller. 

In this article we will combine promise using “$q” service, which is well known in Angular environment.  Here is the implementation.

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

    config(['$routeProvider', function ($routeProvider) {

       

        $routeProvider.when('/myroute', {

               templateUrl: '../app/template.html',

               controller: 'myController',

               resolve: {

                   message: function (resultService) {

                       return resultService;

                   }

               }

           });

    }]);

    app.service('resultService', function ($http , $q) {

       

        var first = $http({ method: 'GET', url: '../Home/ReturnValue' });

        var second = $http({ method: 'GET', url: '../Home/ReturnValue' });

        return $q.all([first, second]).then(function (results) {

            return {

                first: results[0].data,

                second: results[1].data

            };

        });

    });

Please, have a look that we are combining both HTTP call using “$q” an returning result as a single object.

The object is getting return by resolve function which is defined in route. As the service is getting call in resolve of route , the data will get load before loading the view.

Here is the controller for the route.

    app.controller('myController', function ($scope, message) {

        $scope.time1 = message.first;

        $scope.time2 = message.second;

    });

Here is the output of the application.

Resolve promise before loading route in AngularJS

Sometime it’s needed to load data before loading view in application. AngularJS has option to implement same in place of routing.

We can say to AngularJS that before redirect to view, let’s complete the promise at first. Here is the implementation.

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

    config(['$routeProvider', function ($routeProvider) {

       

        $routeProvider.when('/myroute', {

               templateUrl: '../app/template.html',

               controller: 'myController',

               resolve: {

                           message: function (nameService) {

                               return nameService.returnName();

                           }

               }

           }).

             otherwise({

                 redirectTo: '/'

             });

    }]);

You can notice that, “myroute” routing entry has taken resolve parameter which takes service as function argument. We will define the service now. Here is the implementation of service.

    app.service('nameService', function () {

        this.returnName = function () {

            return "Sourav Kayal";

        };

    });

Here is the controller which takes “message” as argument which will return by “resolve” in routing section.

    app.controller('myController', function ($scope, message) {

        $scope.name = message;

    });

And once we run the application, we will see the name has returned to controller.