Contents tagged with AngularJS

  • How to call method of AngularJS controller outside of AngularJS in javascript

    Hello everybody,

    today I want to write few words about AngularJS and js integration.

    Recently I had opportunity to cowork with one guy, which is great in knowing javascript, but absolutely hates to learn and apply AngularJS. So, I had task in front of me, to give him sone kind of JS object, which he can use in order to execute some method of AngularJS controller.

    So I had some AngularJS controller. 

    here is the fragment of it:

    'use strict';

    var controller = 'toolBoxController';

    angular

        .module('examples')

        .controller(controller, TbController);//register

    Then I've added class ( in terms of javascript ):

    (function (window, undefined) {

        function toolBoxObject() … more

  • deferred in AngularJS

    Mechanism of deferred objects, or if to be more precise the idea of deferred objects has been added to AngularJS from the library Q of Chris Cowan. Its essence lies in the fact that if a function can return a value or exception without blocking, it returns Promice object, which is an observer of the result of execution. Once a result is obtained or exception was raised, Deferred object notifies the observer.

    Quite often, before loading of the controller, controller needs to get data for its activities. Speaking of data acquisition, I mean data receival hich can last undefined amount of time. The most frequent case - is to receive data from a server application. To solve this problem we … more

  • $watch with controller as in Angularjs

    Hello everybody,

    today I want to write few words about interesting case which I faced.

    Recently my company asked me to follow code convention of John Papa according to which I shouldn't use in my controller code $scope, but instead use vm. 

    In code it looks like this:

    angular

        .module('app')

        .controller(cnt, mosController);//register

    morningStarController.$inject = ['$scope'];

    and continuation:

    function mosController($scope) {    var vm = this;

        var settings = {};

        vm.settings = jsonSettings;

    Then question arise, how to use $watch or how to track variable?

    Below goes way of implementing it with help of $scope:

    var variable = 5;

    $scope.variable = variable;

    $ … more

  • AngularJS inheritance in JS

    Hello everybody,

    today  I want to write short notice about another useful feature of AngularJS particularly about extend function.

    So, according to comment in angular.js file function extend does the following:

    /**

     * Extends the destination object `dst` by copying all of the properties from the `src` object(s)

     * to `dst`. You can specify multiple `src` objects.

     *

     * @param {Object} dst Destination object.

     * @param {...Object} src Source object(s).

     * @returns {Object} Reference to `dst`.

     */

    function extend(dst) {

      //herer goes implementation

      return dst;

    }

    You may wonder, why do I need this? 

    Well, one of the reasons, is imitiating inheritance in some way, additional … more

  • AngularJS clean code advices

    Hello everybody,

    today I want to share with you fragment of knowledge from John Papa and his course at pluralsight entitled AngularJS Patterns: Clean Code.

    Inside of course one of the videos he have following structure advice: Function, Inject, Register ( I will name it FIR  ).

    function DashBoardController(service1, service2) {//function

        //here goes code of controller.

    }

    DashBoardController.$inject = ['service1', 'service2'];//inject

    angular

        .module('app')

        .controller('DashBoardController', DashBoardController);//register

    or in the form of image:

    And as John Papa mentioned, Todd Motto also likes that approach:

    "I prefer this sequence: write my function, inject the … more

  • .Net AngularJS Treeview lazy loading implementation

    Hello everybody,

    who follows my blog.

    Today I want to share with you hierarchical tree view example which displays data as name implies in hierarchical way. There are plenty of tools that display data in hierarchical way with help of AngularJS, but not so many which has implemented lazy loading. Another part which is not common with implementation is joing AngularJS with server side API.

    So if you ever find need to display some hierarchic information with lazy loading, you can consider my code as some kind of base, which you can extend.

    Some details

    As backend I have the following:

    MS SQL

    C# with Entity framework

    Web api

    As frontend I have the following: … more

  • Notes about AngularJS webinar

    Hello everybody,

    few notes about some details of AngularJS.

    1. What is $scope?

    $scope is something where we can store information which is needed for page. Also data for changes of which we need to track.

    2. How can we react on some changes in $scope? In other words if something at page modified something in model, how can we react on it? Or in another words, how to track changes in some member? 

    Imagine following scenario. Inside of your scope there is a member message like this:

    $scope.message = "Your message";

    You can track it like this:

    $scope.$watch("message", function(newValue, oldValue) {

        //here you can do something

    });

    newValue as you probaly guessed is new value, … more

  • $http Service and promises

    Hello everybody,

    today another glimpse from the AngularJS world which I can name of how to get something from server.

    So, imagine that you see following code in your controller:

    var OrderController = function($scope, $http) {

        $scope.order = $http.get("/orders/1563");

    }

    and now is question, what's wrong with this? Just one very important issue, $http.get returns a promise, not the response itself. So in order to make it work correctly another approach will be more correct:

    var OrderController = function($scope, $http) {

        var promise = $http.get("/orders/1563");

        promise.then(function(response){

          $scope.order = response.data;

              });

    }

    Why second approach … more