AngularJS single-page application with model-view-controller style designs

Question

AngularJS single-page application with model-view-controller style designs

Hey there, I'm relatively new to AngularJS and currently on a steep learning curve.

I've been working on developing an AngularJS SPA and have grasped the basics. I'm using ngRoute for routing and have put together a basic application framework.

However, I've run into a roadblock which may be due to my limited knowledge of AngularJS. I'm trying to implement something similar to MVC layouts in my SPA application. What I envision is a setup like this:

Login.html - without a predefined layout, which will be specified on this page Home.html - utilizes layout.tpl.html with the remaining content defined in Home.html

...and so forth. For example, for Home.html I would want to do something like this:

<div layout="layout.tpl.html">
...rest of the content
</div>

The contents of layout.tpl.html could be as follows:

<div class="container">
  ..layout content including header, left navigation, etc.
  <div class="content">
    <div layout-content></div>
  </div>
</div>

As mentioned earlier, I am using ngRoute in my module to set up the route provider. I'm aiming to achieve something akin to:

@ {
Layout = "_Layout.cshtml"; // or Layout = null;
}

But in AngularJS. Any suggestions on how to accomplish this would be greatly appreciated!

javascript angularjs layout ngroute

Answer 1

Answer №1

There are a couple of methods to determine when ng-include has finished loading:

1) You can use the onload attribute for inline expressions. For example:

<div ng-include="'template.html'" onload="loaded = true"></div>

2) Another option is using the $includeContentLoaded event that is emitted by ng-include, which allows for application-wide handling. For instance:

app.run(function($rootScope){
  $rootScope.$on("$includeContentLoaded", function(event, templateName){
     //...
  });
});

Alternatively,

You can also utilize a directive to address this issue.

HTML

<div custom-include url="{{url}}"></div>

Directive

app.directive('customInclude', ['$http', '$compile', '$timeout', customInclude]);
    function customInclude($http, $compile, $timeout) {
        return {
            restrict: 'A',
            link: function link($scope, elem, attrs) {
                //if url is not empty
                if (attrs.url) {
                    $http({ method: 'GET', url: attrs.url, cache: true }).then(function (result) {
                        elem.append($compile(angular.element(result.data))($scope));
                        //after sometime we add width and height of modal
                        $timeout(function () {
                            //write your own code
                        }, 1, false);
                    });
                }
            }
        };
    }

OR:

<div ng-include src="template.html"></div>

Answer 2

There are a couple of methods to determine when ng-include has finished loading:

1) You can use the onload attribute for inline expressions. For example:

<div ng-include="'template.html'" onload="loaded = true"></div>

2) Another option is using the $includeContentLoaded event that is emitted by ng-include, which allows for application-wide handling. For instance:

app.run(function($rootScope){
  $rootScope.$on("$includeContentLoaded", function(event, templateName){
     //...
  });
});

Alternatively,

You can also utilize a directive to address this issue.

HTML

<div custom-include url="{{url}}"></div>

Directive

app.directive('customInclude', ['$http', '$compile', '$timeout', customInclude]);
    function customInclude($http, $compile, $timeout) {
        return {
            restrict: 'A',
            link: function link($scope, elem, attrs) {
                //if url is not empty
                if (attrs.url) {
                    $http({ method: 'GET', url: attrs.url, cache: true }).then(function (result) {
                        elem.append($compile(angular.element(result.data))($scope));
                        //after sometime we add width and height of modal
                        $timeout(function () {
                            //write your own code
                        }, 1, false);
                    });
                }
            }
        };
    }

OR:

<div ng-include src="template.html"></div>

AngularJS single-page application with model-view-controller style designs

Answer №1

Similar questions

Interested in learning how to redirect to a different page using vanilla JavaScript after submitting an HTML form with a Django backend?

I need to update the class definition of a navigation menu item that contains an "a" tag with the class "section-link". How can I dynamically add the class "popover-link-a" to this definition using JavaScript?

Combine Firebase and Stamplay services to leverage the power of Firebase Authorization in conjunction with Stamplay's Stripe integration

Incorporating external JavaScript into a Rails application

Issue with 1.bundle.js not loading during webpack production build with routing

Use the Messages.properties file instead of using json files with the angular translate static file loader

Managing multiple sets of data in a structured form similar to an array

A guide to using select2.js to activate a selection based on a data attribute

unable to respond when clicking an angularjs link

Retrieve the origin of the copied text

Tips for selecting the initial and final elements of a specific class

Can you explain the purpose of the square brackets within the ".module("modulename", [...])" syntax used in AngularJS?

Stop closing the bootstrap modal popup when the space key is pressed

The function is returning the text rather than an object through my service

``There is an issue with the onsubmit property that prevents the opening of

Passing values from a Laravel controller to a Vue component as a prop

Send dropdown selections to a Javascript function and convert them into an array

Executing AJAX requests to trigger a function in a separate MVC controller using Jquery

Have you ever wondered why a listener on the 'data' event interprets two separate requests as one, unless a timeout is added?

Activate an event on a shadow DOM element that is covered by an element in the light DOM (not directly related)