Exploring OOP Strategies within the Angular MVC Framework!

After coming across a question on Stack Overflow that was similar to mine, I realized I have a lot to learn about Object-Oriented Programming (OOP). Up until now, my coding experience has been mainly procedural. Before diving into my question, let me provide some context by sharing the technology stack I am working with:

Server: Debian Linux
Server-Side-Language: NodeJS with the Express Framework
DB: Firebase (indirectly connected to MongoDB).

Due to utilizing Backend as a Service (BAAS), our NodeJS server simply serves files without any template engine installed. The front end is built with Angular, creating a real-time Single Page Application (SPA) using Angular routing.

My curiosity lies in how to implement OOP within an MVC framework lacking explicit support for classes and instances. According to the insights from the linked question, Angular factories can serve as pseudo classes in this scenario.

In my understanding, each Angular module acts as a comprehensive object housing its own MVC architecture. The query remains: what should be the ideal thickness of controllers?

Contrastingly, Ruby On Rails advocates for fat models and thin controllers approach. In translating this philosophy, here's the outline I contemplate:

1) Develop a model integrated with factories emulating classes.
2) Write controllers responsible for handling these factory instances, executing methods, and preparing data for the view.
3) Design a view exhibiting data curated by controllers through bidirectional data binding.

Yet, the challenge arises when prominent advice emphasizes keeping controllers lean. As a newcomer to OOP and MVC methodologies, I acknowledge potential errors in applying these principles correctly.

Is my current strategy aligned with both OOP and MVC guidelines? If not, where do you perceive misconceptions and what adjustments are necessary for optimizing these concepts in my project?

Answer №1

It's important to note that comparing ruby-on-rails controllers and angular controllers isn't ideal, as they serve different purposes and carry different responsibilities.

In server-side frameworks like ROR, the controller handles incoming requests by extracting input data, validating it, passing it to business logic objects, and formatting the response. It's recommended to divide these tasks into separate objects to keep the controller lean.

Keeping the model slim is also crucial, as a bulky class goes against the Single Responsibility Principle. By separating business logic into small, independent objects, code modification, maintenance, and testing become more manageable.

On the other hand, an angular controller is focused on managing the user interface, triggering data loading processes, responding to user actions, validating user input, and sending updated data back to the server.

Angular.js should be viewed more as MVW (Model - View - Whatever) rather than strictly MVC. It's advised to detach business logic from the framework as much as possible and maintain thin controllers and objects.

Some strategies for achieving this in angular include breaking down large controllers into smaller ones, converting specific controllers into directives, encapsulating data and processes in services, and utilizing small plain objects across various components.

There's even a suggestion to forego controllers entirely and focus on using directives instead for improved application structure. Following OOP principles over fixating on frameworks helps create more organized and maintainable applications.

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

Issue with Angular JS orderBy when sorting by numerical fields is not functioning as expected

Within my controller, I implemented code to convert the rank into a Float data type. details.rank = ''; $scope.order = function (predicate) { $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; if (predicate == & ...

Issues with executing Unit Tests in Karma using Webpack and Jasmine

Trying to set up testing with Karma, Jasmine, and Webpack in AngularJS has been quite a journey for me. While my webpack is functioning smoothly and I can run my website using npm start, things take a turn when I attempt to include my app.js. Despite nume ...

Change not accepted

I am a beginner in Angular and still grappling with the fundamentals. On my menu, I have a cart icon with an initial value of 0 upon first load. In my product list, each product has an 'AddToCart' button. What I aim to achieve is- I want to dy ...

Converting timezones with Angular's datetime binding

My application receives a datetime from a JSON object via a REST service in the following format: 2014-03-30T08:00:00 When I bind this datetime and pass it through a date filter, it appears to be converted into local time. {{ mytime.begin | date:' ...

Creating a node server that will intercept all requests from an Angular frontend (using http) and route them to a

Currently, I am utilizing express on node for routing and incorporating Angular as the front-end framework. Additionally, Redis is being used for session management. My objective is to ensure that whenever an HTTP request is made from Angular, it first goe ...

Failure of Modal Instance to resolve user input

I've been working with AngularUI modals, but I can't seem to figure out why my variables are not resolving. Here's the function that opens the modal and defines the modal instance: $scope.openModal = function (size, cert) { var modalI ...

Comparing Two Arrays in AngularJS and Disabling on Identical Cases

I currently have two tables: "Available subject" and "Added subject" which are populated by ng-repeat with two separate lists of objects. My objective is to accomplish three things: 1 - When the user clicks on the plus sign, a row with identical content s ...

Make sure that when a checkbox is selected, it retains the text content of the inline div associated

I am a novice in angularjs and seeking guidance from experts to improve my code. My task involves iterating through checkboxes, where each checkbox should contain two div elements - one with a unique description and the other holding a price. If multiple ...

In the `angular-daterangepicker.js` file, add the option "Single Date" to the list of available ranges

I'm currently working on implementing a new feature that is similar to the "Custom Range" option, but with a twist. I want to provide users with the ability to choose only one date, much like a "Single Date Picker". By adding this new option under "Cu ...

UI-Router is malfunctioning, causing ui-sref to fail in generating the URL

I'm currently working on a project that involves Angular, Express, and UI-router for managing routes. While I've properly configured my $states and included the necessary Angular and UI-router libraries in my HTML file, I am facing an issue wher ...

Utilizing the controller specified in the template that has been included

Within this snippet of code, I am attempting to utilize a controller named FooCtrl that is defined in the included template app/foo.html, using the directive common.script. angular.module('common.script', []).directive('script', func ...

How can two classes be extended in PHP using OOP?

As a beginner in OOP, I am currently working on writing a PHP class to establish a connection with an FTP server. class ftpConnect { private $server; private $user; private $password; private $connection_id; private $connection_correct = false; ...

Tips for retrieving data from a concealed input within a div that is being looped through in Angular.js

Currently, I have a controller that sends data to the UI and uses the ng-repeat directive to map them. My next goal is to bind this data with a hidden input form and then send it to another function in the controller when a click event occurs. Any tips on ...

Struggle encountered while incorporating PayPal into my project

Recently, I encountered an issue while trying to integrate the PayPal-node-SDK into my project for a Pay with PayPal option. The error message I received was: XMLHttpRequest cannot load https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&a ...

Persistent hover state remains on buttons following a click event

In my current project, I am dealing with a form that has two distinct states: editing and visible. When the user clicks on an icon to edit the form, two buttons appear at the bottom - one for saving changes and one for canceling. Upon clicking either of th ...

Issues with Angular Material Pagination functionality may be causing unexpected behavior

I'm facing an issue with displaying data in an HTML table using an API. I've tried to implement pagination to show 3 or 6 rows per page, but it's not working as expected. Currently, all the data is being displayed without any pagination, whe ...

Continuously iterate through collection as it expands over time

As I cycle through an array, I'm performing additional actions that could potentially prolong the loop if new elements are added to the array during iteration. (I understand it's not recommended to modify the object being iterated over, but pleas ...

Typescript filtering function that results in an empty array

Struggling with filtering an array in typescript and aurelia as I keep getting empty lists. For example, when searching for the keyword ra within the firstName property, I expect to retrieve the object with the name "Raja". Not sure where I'm going w ...

Step-by-step guide for implementing an "on change" event for a select box within a dialog box

I recently wrote an HTML code snippet like this: <div id = "dialog-1" title = "Dialog Title goes here..."> <select id= "lang" name= "lang"> <option value="1"> TEXT </option> <option value="2"> HTML </op ...

How to Populate Object Literal with Multiple Objects in AngularJS

When I click on "Evan", I receive the following response: {"id":1,"name":"Evan"} If I click on "Robert", I will get: {"id":2,"name":"Robert"} Is there a way to modify this code so that it follows the aforementioned steps and generates an object similar ...