Copied to clipboard

Flag this post as spam?

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


  • lucuma 261 posts 563 karma points
    Jan 28, 2014 @ 15:05
    lucuma
    2

    Including an angular module

    Is there a way to include your own angular module into the app? The only way I've been able to develop say a service is to include it into the umbraco.resources (per the documentation) module however that might cause conflicts with existing services.

    I might suggest that each plugin creates its own injected module based on its alias name that way its own services/directives won't pollute the existing umbraco system ones...

    Right now we have to do this:

     angular.module("umbraco")
     .controller("pmg.MyCtrl"
    

    And maybe it might be better if..

    The angular bootstrap will look like this:

    var app = angular.module('umbraco', [
            'umbraco.filters',
            'umbraco.directives',
            'umbraco.resources',
            'umbraco.services',
            'umbraco.packages',
        'ngCookies',
        'ngSanitize',
        'ngMobile',
        'blueimp.fileupload',
        'pmg.MySuperPlugin'  // loop over each plugin to generate these modules
    ]);
    

    The plugin's javascript setup would include the module definition similar to what happens today (except not using the umbraco module):

    angular.module("pmg.MySuperPlugin", ["ui-bootstrap"]).controller("pmg.MyCtrl")....
    

    Or, is there a way to do this that I'm missing?

  • Per Ploug 865 posts 3491 karma points MVP admin
    Jan 29, 2014 @ 09:42
    Per Ploug
    0

    Hey

    I'm afraid currently you cant do it, its on the todo, but not done yet I'm afraid ideally we will enable this through the package manifest

    /Per

  • lucuma 261 posts 563 karma points
    Jan 29, 2014 @ 14:00
    lucuma
    0

    Thanks. As for building non trivial packages, I think it is a very important requirement.

  • Per Ploug 865 posts 3491 karma points MVP admin
    Jan 31, 2014 @ 10:28
    Per Ploug
    0

    yup, currently planned for 7.1 so we do know its important :)

  • Volodymyr 4 posts 83 karma points
    Mar 03, 2014 @ 16:20
    Volodymyr
    107

    You can do it using requires. 

    app is defined by umbraco.

    app.requires.push('ngGrid');

  • Jesper Ordrup 1019 posts 1528 karma points MVP
    Oct 25, 2020 @ 11:28
    Jesper Ordrup
    0

    This also works for Umbraco 8.8 :-)

  • Dan Diplo 1554 posts 6205 karma points MVP 6x c-trib
    May 14, 2014 @ 21:57
    Dan Diplo
    0

    Where do you add app.requires.push('ngGrid') - in your controller?

  • Volodymyr 4 posts 83 karma points
    May 14, 2014 @ 22:19
    Volodymyr
    2

    Yes, before my controller starts

  • Dan Diplo 1554 posts 6205 karma points MVP 6x c-trib
    May 16, 2014 @ 09:18
    Dan Diplo
    0

    Thanks, Volodymyr, I tried this and it works - great find :)

  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Feb 24, 2015 @ 23:01
    Warren Buckley
    19

    Hey Volodymyr, Thanks for your answer.

    For anyone looking for syntax to help out here is an example of mine needing to inject/require a module

    var app = angular.module("umbraco");
    
    //This is my Angular module that I want to inject/require
    app.requires.push('tableSort'); 
    
    app.controller("Analytics.BrowserController", function ($scope, $location, statsResource) {
        //Do stuff here...
    });
    
  • Chaitanya Gadkari 27 posts 66 karma points
    May 21, 2015 @ 09:08
    Chaitanya Gadkari
    0

    Thanks Warren/Volodymyr,

    It worked.

  • Shannon Deminick 1526 posts 5272 karma points MVP 3x
    Jun 16, 2015 @ 08:46
    Shannon Deminick
    2

    @Warren - I'm currently looking into 'fixing' this for 7.3 so you could include angular module names to include in your manifest. However before I do this it would be good to know if you think that that above code is sufficient? To me, this dynamic including of a module works well and doesn't pollute the manifest with more features and obviously requires far less work in the core.

    Let me know if you think it's important to be able to include angular module names in your manifest or if doing it this way is acceptable :)

  • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
    Jun 16, 2015 @ 08:54
    Warren Buckley
    0

    Hey Shannon,
    Yes I thin the solution is perfectly acceptable but obviously an easier way with a manifest file would be a nice to have but not a necessity IMO.

  • Dan Diplo 1554 posts 6205 karma points MVP 6x c-trib
    Jun 16, 2015 @ 10:40
    Dan Diplo
    0

    Shannon - the current way works fine and is already utilized by a number of packages, so I don't really see any problem with continuing it. Maybe it should be properly documented, though, so it is seen as "official" and is easily discoverable?

    I think if you did go down the manifest road, then it would be important that the above "push" method continued to work, since it's already being used.

  • Shannon Deminick 1526 posts 5272 karma points MVP 3x
    Jun 17, 2015 @ 09:17
    Shannon Deminick
    0

    Yup, i agree on the documentation side of things, just need to clean up and figure out where that is supposed to go

  • Mats Stam 66 posts 236 karma points
    Apr 25, 2016 @ 11:50
    Mats Stam
    0

    Hi there!

    I'm trying to make a custom property editor, where I want to use the ui.autocomplete module. I can't figure out where everything goes to be able to do this...

    In which files are you guys adding:

    var app = angular.module("umbraco");
    
    //This is my Angular module that I want to inject/require
    app.requires.push('tableSort'); 
    
    app.controller("Analytics.BrowserController", function ($scope, $location, statsResource) {
        //Do stuff here...
    });
    

    ?

    When that doesn't work I suspect that I haven't managed to get the actual autocomplete.js file included. Which I tried doing in the file "install.loader.js". Where are you guys adding the actual file for the external module?

    Could really use some help here, cuz Im stuck...

    /Mats

  • Comment author was deleted

    Apr 25, 2016 @ 11:52

    @Matz you need to add the actual file to the package.manifest

  • Comment author was deleted

    Apr 25, 2016 @ 11:53

    @Matz as you can see in the docs there is a javascript root element that you can use http://umbraco.github.io/Belle/#/tutorials/manifest

  • Mats Stam 66 posts 236 karma points
    Apr 25, 2016 @ 11:58
    Mats Stam
    0

    Amg... I knew that... I'm obviously adding my controller there. It just didn't occur to me that I actually have to add the required file there too... Shame on me...

    Thanks alot! I'll try that :)

  • Comment author was deleted

    Apr 25, 2016 @ 11:59

    @Mats no worries, hope it works now :)

Please Sign in or register to post replies

Write your reply to:

Draft