Embedding AngularJS Component

[James Cook]

I have a need to embed AngularJS components (think of a Discus comment system) into existing web pages. These components will use controllers, directives and service factories, but the entire page will not be an AngularJS app. I don't want to embed these compoennts using an IFrame, I want to attach them to existing DOM elements on the page.

My concern is how does Angular deal with routing in such a configuration? Are there any examples or docs (or anything at all) that you can point me to in order to understand how to handle transitions in my component that I would normally handle using URL routing?

[Tony pee]

I did this:

var Component = (function() {

    function Component(element, attrs, modules, scope) {

        var self = this;

        this.scope = scope;

        this.element = null;

        if (!element) {

            return;

        }

        element = $j(element);

        modules.unshift(['$provide', function($provide) {

          $provide.value('$rootElement', element);

        }]);

        modules.unshift('ng');

        angular.injector(modules).invoke(function($rootScope, $compile) {

            if (!scope) {

                self.scope = $rootScope.$new();

            }

            for (var k in attrs) {

                element.attr(k, attrs[k]);

            }

            self.element = $compile(element[0].outerHTML)(self.scope);

            $j(element).replaceWith(self.element);

            $rootScope.$apply();

        });

    }

    Component.prototype.destroy = function() {

        this.scope.$destroy();

    };

    return Component;

})();

var atts = {

    'my-directive': ''

};

return new Component(element, atts, ['myApp']);

I can basically give it a dom element, and some attributes to attach (add your directive or controller atts here). 

I think it is probably assuming that an angular app is existing on the page already (i have an angular app bootstrapped a dome element in a different part of the page. Otherwise you might need to roll it up. 

Im not sure how you mean 'routing'. I'd have an angular app bootstrapped in to the page, which manages the routing and generates all of these components where needed (in their own elements)

There might be a better way - this is just my hack to play with the idea of components

On Wed, Aug 21, 2013 at 7:29 AM, James Cook <jc...@transcordia.com> wrote:

I have a need to embed AngularJS components (think of a Discus comment system) into existing web pages. These components will use controllers, directives and service factories, but the entire page will not be an AngularJS app. I don't want to embed these compoennts using an IFrame, I want to attach them to existing DOM elements on the page.

My concern is how does Angular deal with routing in such a configuration? Are there any examples or docs (or anything at all) that you can point me to in order to understand how to handle transitions in my component that I would normally handle using URL routing?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

--

Tony Polinelli

[Tony pee]

actually,  jQuery should be '$'  so:

var Component = (function() {

    function Component(element, attrs, modules, scope) {

        var self = this;

        this.scope = scope;

        this.element = null;

        if (!element) {

            return;

        }

        element = $(element);

        modules.unshift(['$provide', function($provide) {

          $provide.value('$rootElement', element);

        }]);

        modules.unshift('ng');

        angular.injector(modules).invoke(function($rootScope, $compile) {

            if (!scope) {

                self.scope = $rootScope.$new();

            }

            for (var k in attrs) {

                element.attr(k, attrs[k]);

            }

            self.element = $compile(element[0].outerHTML)(self.scope);

            $(element).replaceWith(self.element);

            $rootScope.$apply();

        });

    }

    Component.prototype.destroy = function() {

        this.scope.$destroy();

    };

    return Component;

})();

--

Tony Polinelli

[Robert Fauver]

What are your thoughts, if you don't have an angular app is existing on the page already? I've been attempting to use http://www.noembed.com/ 

Any thoughts?

[David Shapiro]

It's easy to embed Angular components in a non-angular page unless the framework is something that constantly rewrites the DOM from javascript like Extjs or React.  You can see an example in my LeanPub book here:

https://leanpub.com/web-component-development-with-angularjs/read#leanpub-auto-salvaging-legacy-applications-with-angularjs-ui-components

Client-side routing is a global window/application function because it messes with the window.location object. So if Angular is not the controlling framework in the page, it should  not be doing any routing, period.  For any component to be handling page or application level functions outside it's boundaries (hierarchy level in the DOM) is a bad practice and bad architecture.