Where is the best location for my code in AngularJS?

Currently, I am working on a galaxy simulation project using AngularJS and Threejs. My intention behind incorporating Angular JS is to grasp its functionality better and implement it in future projects as well.

However, I find myself struggling with determining the ideal location for my code. Considering that the threejs code is outputted to a canvas, should it reside in a directive? Or would it be more appropriate to handle most of the processing within the controller, while only adding DOM-specific code to the directive?

If you are interested, feel free to take a look at my organization attempts so far by visiting: https://github.com/donnielrt/galaxy/tree/873dba548d8d42820febeb4e69817f2e5fc5333c/app

javascriptangularjsthree.js

Answer №1

To keep your code clean and organized, it is recommended to place any DOM manipulation or additional behaviors within a directive.

All view-model code, including the necessary model for front-end display and functions for manipulating the view-model or interacting with services, should be housed in the controller(s).

For interactions with third-party (REST) APIs or custom service layer code, it is best practice to create a service or factory.

If you need to modify text for display purposes, consider using a filter.

Constants or values can be utilized for storing data that remains constant throughout your application.

Here are some JavaScript examples:

angular.module("testApp",[]).controller("MyCtrl",function($scope){
  $scope.scopedVar = "from the controller";
}).value("someObject",{someProp:"someValue"}
).constant("SOMECONST",3.14
).directive("myThing", function(){
  return {
    restrict:"E" // E (element), C (class), M (comment), A (attribute)
    scope:{}, // optional =, &, @
    template: "<div>Some custom directive</div>",
    link: function(scope, iElem, iAttrs){
      //do some custom things here to modify the directive element or its children
    }
  }
}).filter("myFilter",function(input){
   var output=input + "did something";
   return output;
});

Now, some HTML:

<body ng-app="testApp" ng-controller="MyCtrl">
  <my-thing></my-thing>
  {{scopedVar | myFilter}}
</body>

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

Is it possible to modify the color of a span element within a select dropdown?

Is there a way to change the color of a span to red within a select option in js fiddle? I am trying to modify the color of <span class="myError">This is a required field.</span> to red https://i.sstatic.net/nRF2c.png select{ color: green; ...

javascriptjqueryhtmlcss

Tracking progress in a Rails job using Coffeescript

Recently, I came across a helpful gem called this gem, which allows for the seamless integration of bootstrap progress bars and the delayed job gem. The example provided by the creator uses .haml files, but since my project utilizes erb and coffeescript, I ...

javascriptruby-on-railscoffeescriptprogress-barbootstrap-4

Ways to create dynamic functionality with JavaScript

I need to iterate through the document.getElementById("b") checked in a loop. Is this achievable? How can I implement it? <img class="img-responsive pic" id="picture" src="images/step1.png"> <?php //get rows query ...

javascriptphploops

Enhancing code branch coverage using Istanbul

The code snippet provided has a branch coverage of only 50% (refer to the coverage report below). I am unsure how to enhance this as there are no if statements present. I suspect that Istanbul must utilize some form of measurement that I have yet to grasp ...

javascriptangularjscode-coverageistanbul

Can the optionsText be shown while saving the optionsValue in a dropdown menu?

Here is the code snippet I am currently working with: var model = function() { this.nameSomething = ko.observable(''); this.nameId = ko.observable(0); }; var vm = (function() { var myList = [{ id: 1, type: 'foo1'}, { id: 2, ...

javascriptknockout.js

The art of loading STL files in Three.js

Attempting to load an stl file by tweaking the function load of the loader URL in this particular example: However, despite the loading process and subsequent rotation of the scene after a while, visualization seems impossible. Upon checking the mesh deta ...

javascriptthree.js3d

Solving the puzzle of closing a challenging JavaScript popup with Selenium in JavaScript

Dealing with popups in Selenium can sometimes be tricky, especially when encountering unusual behavior. I recently encountered a situation where I found it difficult to close a popup window after clicking a button. Upon executing the code below: WebEleme ...

javascriptjavaseleniumpopup

Tips for efficiently awaiting outcomes from numerous asynchronous procedures enclosed within a for loop?

I am currently working on a search algorithm that goes through 3 different databases and displays the results. The basic structure of the code is as follows: for(type in ["player", "team", "event"]){ this.searchService.getSearchResult(type).toPromise ...

javascriptangulartypescriptasynchronous

What is the method to disable response validation for image endpoints in Swagger API?

I'm working with a Swagger YAML function that looks like this: /acitem/image: x-swagger-router-controller: image_send get: description: Returns 'image' to the caller operationId: imageSend parameters: ...

javascriptnode.jsswaggerswagger-uiswagger-editor

Using AngularJS UI Bootstrap tooltips in conjunction with Bootstrap 4: A complete guide

When using the directive <div uib-tooltip="hello-world" tooltip-is-open="true">hello world</div>, an error occurs: Failed to load template: uib/template/tooltip/tooltip-popup.html This website is utilizing both ui-bootstrap.js and ui-bootstra ...

javascriptangularjstwitter-bootstrap

Tips for designing an interactive walkthrough for a website with JavaScript

Some websites, such as Facebook games, incorporate step-by-step tutorials for new users using JavaScript to display pop-ups guiding the user on where to click next and explaining what is happening. How can one develop a similar system? What type of archit ...

javascript

A pair of identical aircraft within a cluster, neither featuring see-through components

Having an issue with transparency on duplicated plane meshes in Object3D group. Need assistance to make both transparent. face = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, transparent: true, map: THREE.ImageUtils.loadTexture(' ...

three.js

Displaying Multiple HighCharts on a single AngularJS page

As a beginner with HighCharts, I am working on adding two Highcharts to the same page that will access the same data source but display different pieces of data for each graph. For example, the categories will remain constant while the series[] will vary. ...

javascriptjqueryangularjshighcharts

Loop through the ng-repeat scope object in AngularJS

Is it possible to create rows of 3 using bootstrap and ng-repeat with data from a scope object without the loop repeating every three times due to ng-if? I am curious if something like <h4> {{yogurt[$index+1].name}} </h4> would work. Below is ...

javascriptangularjstwitter-bootstrap

Is it possible for my code in ReactJS to utilize refs due to the presence of backing instances?

When working with ReactJS components, I often piece together JSX elements to create my code. For example, take a look at the snippet below. I recently came across this page https://facebook.github.io/react/docs/more-about-refs.html which mentions that "Re ...

javascriptreactjsecmascript-6

Error message: The function 'NavController' is not recognized, it is undefined

Upon launching the app, I encounter an error. Below is the controller code: myApp .controller('NavController', ['$scope', '$location', function ($scope, $location) { $scope.navClass = function (page) { ...

htmlangularjsnode.js

Discovering the object and its parent within a series of nested arrays

Is there a way to locate an object and its parent object within a nested array of unknown size using either lodash or native JavaScript? The structure of the array could resemble something like this: name: 'Submodule122'</p> I have been ...

javascripttypescriptlodash

Limiting the functionality of API's to be exclusively accessible within the confines of a web browser

Currently, I am working with node js and have implemented policies to restrict API access from sources other than the browser. In order to achieve this, I have included the following condition in my code: app.route('/students').all(policy.checkH ...

javascriptnode.jsexpressauthenticationmean-stack

How to use AngularJS $http to make an external image request

I created a Plunker to showcase my attempt at retrieving an external image through an $http call. My goal is to return the URL upon successful retrieval with a status 200, and display a placeholder 'Image not available' if a 404 error occurs. Cl ...

angularjshttpfactory

Built-in Promises within MongoDB

Is there a way to determine which methods in mongoDb have an inbuilt promise? For example, "updateOne() , findOne()" have inbuilt promises that we can access using ".then", but many other mongoDB methods lack this feature. How can we identify which methods ...

javascriptnode.jsmongodbexpressmongodb-query