Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ayo Adesina 445 posts 1059 karma points
    Sep 11, 2017 @ 15:32
    Ayo Adesina
    0

    'this' vs $scope in AngularJS controllers

    I'm making a custom section in umbraco's back office. I have seen some examples of people doing this in the controllers.

    var vm = this;
    

    In fact this is the same technique used in the umbrangular code garden 2017 example.

    However when I'm learning angular out side of the context of umbraco I see lots of people saying that’s the old way, no good you should just use

    $scope
    

    I'm VERY new to Angular and I am a bit confused about which one I should use.

    Is there an recommended approach when building custom UI sections in umbraco? or is it just a matter of preference?

    I had to modify my code to get it to work with $scope when following the umbrangular example, so I'm not sure if I might run in to bigger problems later on....

    What do people think?

  • Kevin Jump 2341 posts 14868 karma points MVP 8x c-trib
    Sep 11, 2017 @ 16:18
    Kevin Jump
    104

    Hi

    the var vm = this syntax comes from the Angular Best Practice Style guide and as such is probibly the best way to proceed.

    There a number of advantages to referencing your view model like this - but principally it reduces the risks of you tripping up over your own (or other peoples) code when all of the classes and controllers have been loaded into umbraco.

    The pattern i currently use for controllers is :

    (function () {
        'use strict';
    
        function myUmbracoController($scope, notificationsService) {
    
            var vm = this;
            vm.loaded = false;
    
            // functions
            vm.someFunction = someFunction;
    
            /////////////////
            function someFunction(somevalue) {
                // code here
            }
    
    
        }
    
        angular.module('umbraco')
            .controller('myUmbracoController', myUmbracoController); 
    })();
    

    It keeps it neat and your function is local to the wrapped function so again less chance of them tripping over other peoples code.

    I would recommend looking at the style guide for reference as you go, but do be aware Umbraco (as of 7.6.6) is running Angular 1.1.5 so not everything is available (the one issue I have come across is you cant do ControllerAs when creating a directive until v1.3)

  • Ravi Motha 290 posts 500 karma points MVP 8x c-trib
    Sep 11, 2017 @ 17:08
    Ravi Motha
    0

    so there are 2 questions you need to ask yourself:

    1. what version of angular are you using and what functions are available for example controllerAs .. which Kevin mentions.

    2. the second is really what you are comfortable with, note the word recommendation its not a cast iron way of doing things , but it will help you in keeping clarity especially if you are doing complicated actions.

    this method lends itself to writing code that is readable also and that I suspect is good for future you.

    Personally I am also a still learning angular esp. for back office ,but i have found that I am trying to use the pattern Kevin refers to in his reply. (its not my default yet but practice and repetition will slowly sort that out)

  • Ayo Adesina 445 posts 1059 karma points
    Sep 11, 2017 @ 17:52
    Ayo Adesina
    0

    Thanks a lot guys, that is very helpful!

  • Ayo Adesina 445 posts 1059 karma points
    Sep 14, 2017 @ 07:39
    Ayo Adesina
    0

    I checked out the source code for Merchello which is quite a popular e-commerce platform for umbraco and that puts everything on $scope.......

Please Sign in or register to post replies

Write your reply to:

Draft