Structural engineering for massive webpage

Currently I am in the process of building a large page using AngularJS. As I plan out the architecture for this page, I am debating which approach would be most effective. The page consists of 3 distinct blocks with various functionalities, but the primary focus is on the interaction between them: the left block displays accounts, the user selects an account which then appears in the center block. Changes made in the center block should reflect in the right block as well. To structure the HTML, I have created 3 separate views for each block and included them using ng-include. I am also considering dividing the controller into multiple files to manage the code more efficiently. I see a few options for handling data transfer between controllers: 1. Create a unique controller for each view and communicate through broadcasting or storing data in RootScope with watchers. 2. Implement a parent controller to facilitate data exchange. What are your thoughts on this? Do you believe that having one comprehensive controller would be the optimal solution? How do you recommend transferring data between controllers effectively? Thank you.

javascriptangularjsarchitecturecontroller

Answer №1

When faced with a situation, there are numerous approaches you can consider. Allow me to suggest the one I believe is most effective.

To start, create a parent abstract state where you can handle all your necessary tasks, such as retrieving data from the server. Inject all the required data into $scope and then navigate to the child state, which houses your main page.

Here's an example:

.state('parent_state', {
    url: '/home',
    abstract: true,
    templateUrl: 'whatever',
    controller: 'yourCtrl as yourCtrl'
  })
  .state("parent_state.child",{
    //Include any additional functionality here
  })

By transitioning to the child state, you will have access to all the necessary data in $scope, allowing you to focus on logic rather than data manipulation.

In my view, a page should be controlled by only one controller. It is not efficient to assign a controller to each section of your view unless custom directives are needed.

Therefore, choose between having a single controller for all elements or one controller coupled with multiple directives.

The decision is yours.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring a JavaScript function that triggers another function to create a new object - Utilizing Sinon and Mocha for testing purposes

I am currently working on a nodejs application where I need to write a test for a function that invokes another function to create a new object, and then calls a method of that object. Below is the code in service.js that I am trying to test; // servic ...

javascriptnode.jsunit-testingchaisinon

Tips for modifying CSS when a user scrolls beyond a specific div

Currently, I am working on implementing a scroll function that dynamically moves elements based on the user's scrolling behavior. The code I have written works to some extent and successfully moves the elements. However, my goal is to create a list o ...

javascriptjqueryhtmlcss

The retrieval of JSON data in a JavaScript function is malfunctioning

I am new to working with Ajax and have reached the point where I am able to retrieve data. However, I am struggling to return the data as I keep getting undefined values. Below is the code snippet: function select_aragement(arragament){ var arrst = ar ...

javascriptajaxfunctionreturn

What are the steps to effectively utilize the $filter('filter') function when filtering multiple columns with OR as the condition?

In my AngularJs Application, I have a collection of customers. var customers = [ { "Name": "Alfreds Futterkiste", "City": "Berlin", "Country": "Germany" }, { "Name": "Ana Trujillo Emparedados y helados", ...

javascriptangularjsangular-filters

Failing to complete a field in the form does not generate an error message when submitted [AngularJS]

My code is designed to display an error message if the user clicks the submit button without filling in a field. However, the functionality is currently not working as intended. <form name="loginForm" ng-submit="loginForm.$valid && login()" n ...

angularjs

Encountering a 415 Unsupported Media Type error when making a post request to an ASP.NET Core API from an Angular application

Utilizing the code above in an Angular application: function Login(email, password, callback) { var GetAll = new Object(); GetAll.email = email; GetAll.password = email; $http({ url: "http://local ...

c#angularjsasp.net-mvcasp.net-web-apiasp.net-core-webapi

Does the onchange function in the dropdown list only work when the first item is changed?

Here is a snippet of my HTML code featuring a list item generated from a database using a foreach loop: <select class="form-control select" id="inventoryitem" name="inventoryitem" onchange="getunit();"> <option>---Select an item---</o ...

javascriptphphtml

Applying an angular filter to a string parameter within an ng-click function

I have created a custom angular filter directive that allows for string replacement using the syntax below: {{ 'MyValue' | replace: 'My':'Foo' }} This functionality works perfectly. Now, I am trying to use this filter within ...

angularjs

Angular and Bootstrap4: The Perfect Duo for Modals

I need to display a Bootstrap4 modal window in Angular when a specific condition is met in my "bookTour" method without the need for a direct button click. How can I achieve this? Below is the code snippet: html <div class="modal" id="myModal" [ngClass ...

javascriptangularbootstrap-4

Please enter data into the input fields provided in the text

Below is the code where Google transliteration is used for typing in Indian language in a text field. There are two routes with different page IDs. Initially, the transliteration works fine on the default page. However, when changing routes, an error occur ...

javascriptjqueryjsonangular

Is it always the case that modifying the props of a child component will trigger a re-render of the parent component, even

I am currently exploring ways to prevent a modal element from re-rendering when it is supposed to be hidden. The tutorial I am following suggests converting the component to a class-based one and using shouldComponentUpdate(). However, I wanted to test if ...

javascriptreactjs

Does vuetify have a v-autocomplete callback for when there is no filtered data available?

Is there a method to detect when the v-autocomplete component in Vuetify.js displays "no data available" after filtering? I have searched the events documentation here https://vuetifyjs.com/en/api/v-autocomplete/#events Is there a workaround for this iss ...

javascriptvue.jsv-autocomplete

Date input using manual typing format

I've implemented the ng-pick-datetime package for handling date selection and display. By using dateTimeAdapter.setLocale('en-IN') in the constructor, I have successfully changed the date format to DD/MM/YYYY. However, I'm facing an iss ...

javascriptangulartypescriptdate

ReactJS - Unable to access property of undefined object

I encountered a TypeError when rendering, stating that my object is not defined. Despite thinking I defined it before using it. Here is an example of ArticleDetails.js that I am referencing: import React, {Component} from 'react'; class Arti ...

javascriptreactjs

Implementing Content-Security-Policy for a web application embedded in an iframe

Hey there! I've got this cool webapp called myApp, developed using Spring Boot and Vaadin. It's going to be deployed on a Tomcat server at http://tomcatserver:8080/myApp Now, what I want to do is display the webapp in an iframe like this: <if ...

javascripthtmlspringiframecontent-security-policy

Autocomplete feature in MUI allows filtering to begin after typing at least 3 characters

I've encountered an issue with the Autocomplete MUI component I'm using to filter a list of checkboxes. The popup with options should remain open at all times, but I only want the filtering to be triggered when the user input is more than 3 chara ...

javascriptreactjstypescriptmaterial-ui

I'm receiving identical results from findOne even when using different IDs

I am currently working on creating a new array of products based on a list of different Ids. However, I have encountered an issue where the same product is being returned for all Ids when using the findOne() method. let wishpro = ['632a5e5rtybdaaf ...

javascriptnode.jsmongodbexpressmongoose

Ways to hide notifications by setting a timer while keeping the delete option visible

Presently, this is the code I am working with using Javascript and Vue.js. I have an array called Messages.length that contains messages. When the x button is clicked, it triggers the "clearMessages(item)" function on the server side. However, I also aim ...

javascriptvue.js

Filter out unnecessary attributes while utilizing an anonymous type in ClearScript

In my development project, I am creating a .NET wrapper for the popular java-script library called Linkify.js, utilizing Microsoft's ClearScript. The challenge I am facing involves implementing the attributes property within the options object parame ...

javascript.netvb.netclearscript

How can you calculate the number of elements in a jQuery array and iterate through each of them?

After extracting a string from a mySQL query with PHP, my AJAX script comes into play. This string is then dissected and placed into a jQuery array. The results are displayed on the screen using .html() The length of this array can range from zero items t ...

javascriptjqueryajax