Angular JS embedding a html page as a widget

Question

I am trying to learn Angular js. I want to embed another website as a part of my webpage; inside a "div". I have the following code so far which does that for me.

However, the embedded website will have hyperlinks in it. When someone clicks on the hyperlinks,is there a way where the new contents are displayed inside the same div?

Is it possible?

<body ng-app="sampleApp">
    <div ng-controller="CommonController">
        <div>
            <a href="#" ng-click="show()">ShowPage</a>
        </div>
            <div ng-bind-html-unsafe="expression"/>
    </div>
    <script
        src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        var sampleApp = angular.module('sampleApp', []);
        sampleApp
                .controller(
                        'CommonController',
                        function($scope, $http) {
                            $scope.show = function() {
                                var responsePromise = $http
                                        .get("http://localhost:8080/HelpDynamic/spring/welcome");
                                responsePromise.success(function(data, status,
                                        headers, config) {
                                    $scope.expression = data;
                                });
                                responsePromise.error(function(data, status,
                                        headers, config) {
                                    alert("AJAX failed!");
                                });
                            }
                        });
    </script>
</body>

Guillaume Besson · Accepted Answer · 2014-05-29 12:10:55Z

1

The easiest way to do it is by using ui-router instead of ng-router. This community built module allow you to use nested views. It means that you can integrate other templates inside the one you use.

To see how to do it, I recommend that you read its well-written guide about nested views : https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views.

answered May 29, 2014 at 12:10

Guillaume Besson

5722 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hirak Over a year ago

Thanks for the answer. I am +1 ing you for now. I will read the link and try to incorporate tomorrow. Will let you know if any issues or accept the answer.

Collectives™ on Stack Overflow

Angular JS embedding a html page as a widget

1 Answer 1

1 Comment

Your Answer

Collectives™ on Stack Overflow

Angular JS embedding a html page as a widget

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related