Issues with Dependency Injection in Angular.js

I've been working on Dependency Injection and trying to make my code more modular in Angular.js. After researching some tutorials, I decided to try and rewrite it.

Here's what I initially planned (although I may have misunderstood some concepts, so any guidance is appreciated):

  1. Create an ng-app: "myapp";

    Create a module called "finance2" with a factory service named "currencyConverter":

    angular.module('finance2', []).factory('currencyConverter', function() {

    Create a module called "ctrl1" with a controller named InvoiceController. Then inject the service module into it:

    angular.module('ctrl1',['finance2']).controller('InvoiceController', ['currencyConverter', '$scope',function(currencyConverter,$scope) {
  2. Inject the controller module into the app: 
     var app = angular.module("switchableGrid",['ctrl1']);

Here is the full code: jsfiddle.net/c7fF3/1/

However, nothing seems to be happening. Can someone provide me with a hint? Thank you.

javascriptangularjs

Answer №1

Instead of using ng-app="myapp", ensure that your app is actually a module named switchableGrid

You can update the markup to

<body ng-app="switchableGrid">

or modify the script to

angular.module('myapp', ['ctrl1']);

Answer №2

When working on your fiddle, I made a modification to the second dropdown in the Framework and extensions section by setting it to "no-wrap in body". After doing so, I did not encounter any exceptions being logged.

In addition, if you are utilizing the controller as syntax, it is recommended to use:

this.currencies = currencyConverter.currencies;

instead of

$scope.currencies = currencyConverter.currencies;

Answer №3

Give this method a try

angular.module('app', [])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider

            .when('/example', { templateUrl: 'app/example.html', controller: 'exampleCtrl' })

    }])

    .factory(
        'currencyConverter',
        function ($resource) {
            return $resource(URL);
        })


    .controller('exampleCtrl', ['$scope', '$http', '$routeParams', '$route', function ($scope, $http, $routeParams, $route) {      
$scope.currencies = currencyConverter.currencies;
    }])

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

Error in Redux app: Attempting to access the 'filter' property of an undefined value

I am currently encountering an issue with my reducer: https://i.stack.imgur.com/7xiHJ.jpg Regarding the props actual, this represents the time of airplane departure or arrival, and it is a property within my API. The API structure looks like this: {"body ...

javascriptreactjsredux

"Enhance your HTML table by selecting and copying cell values with a simple click and CTRL +

I stumbled upon a fantastic script for highlighting HTML table rows and it's working perfectly: I decided to modify the onclick event to onmouseover and included additional code to select a cell by clicking on it. Now I can select, check which one is ...

javascripthtmlhtml-tablecell

Having trouble with the babel-loader and its version compatibility, as well as not finding the babel-loader folder in the node_modules directory when

Here are the steps I've taken: I cloned the project from Github. Ran the command 'yarn' to start the project. Encountered an error after running the command 'yarn start'. Even after following the steps provided in the e ...

javascriptnode.jsreactjsnpm

Executing additional code after all tests have finished in Mocha.js

In the world of MochaJS testing, it is customary to have before and after blocks for setup and teardown operations. But what if we want to execute an extra cleanup step after all test files have been processed? This is crucial to ensure that any lingering ...

javascriptnode.jstypescriptunit-testingmocha.js

Having issues with Exit Property functionality in Framer Motion when using react js

Help Needed: Framer Motion Exit Property Not Working I've been trying to get the exit motion to work on Framer Motion with React JS for over a week now, but everything else seems to be functioning correctly. I have installed the latest version of Fra ...

javascriptreactjsmaterial-uiframer-motionframerjs

Is there a way to streamline this generator without using recursion?

I need to develop a unique value generator that produces values within a specified range. The criteria are: all generated values must be distinct the order of values remains consistent upon each run of the generator each value should be significantly diff ...

javascripttypescriptgenerator

React Bootstrap always displays tooltips

I have integrated react-bootstrap into my project. I am currently attempting to keep a tooltip always displayed, but I am facing some challenges in achieving this. Below are the approaches I have tried so far: <Card style={{width: '10rem'}} ...

javascriptreactjsreact-bootstrap

Generating a dynamic ng-model for variable rows within a table to extract data and send it to an API

table <tr> <td>{{transDept}}</td> <td ng-repeat="x in Sales"> <select ng-model="ddl[transDept.AccountCode]" onchange="changeSelectedOptionText(this)" style="width:100px;"> <option value= ...

angularjs

Template displaying multiple polymer variables side by side

Here is the date object I am working with: date = { day: '05' } When I use this code: <div>{{date.day}}</div> It generates the following HTML output: <div>05</div> Everything looks good so far. Now, I want to try th ...

javascriptpolymermustache

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

javascriptjqueryhtmldjangopython-3.x

Encountered an issue while attempting to access a property from an undefined source

I am struggling with this code as I am unable to correctly split the JSON data. The error message I keep encountering is: TypeError: Cannot read property "cu_id" from undefined. Here is a snippet of the JSON data (since it's too large to di ...

javascript

What is the process to access array elements in AngularJS?

When coding in HTML, <select class="element-margin-top" ng-model="vm.selectedRole" ng-options="(roleName,enabled) in vm.roleNames"> <option value="">All Roles</option>{{vm.roles[0]}} </select> I am tryin ...

javascriptangularjs

How can I capture the 'ended' event from an HTML5 video tag using Ember in a controller?

I am having an issue with an hbs file that contains an html5 video tag: <video id="externalVideo" controls loop> <source src="../assets/videos/test.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> I am ...

javascriptember.js

Vue dynamic components fail to re-render within a v-for loop upon data changes

I've created a dynamic table component that allows me to modify columns by changing their ordering, adding new ones, or removing existing ones. The structure of my table body is as follows: <tr v-for="row in data" :key="row.id"& ...

javascriptvue.js

"Using AngularJS to display a blank option as preselected in an ng-option

Having an issue with displaying a preselected value as the selected option in my select element. Check out the code below: <select ng-model="data.company" ng-options="company as company.name for company in companies"></select> $scope.compani ...

javascriptangularjsng-options

Sending form information through AjaxPassing information from a form using

Currently, I am working on a project where one page opens a thickbox of another page that contains a form. Once the form is submitted and data is written to the database, I need the parent page of the thickbox to update specific rows of the form that have ...

javascriptjqueryajaxforms

Connecting different jQuery methods to create a chain

From my understanding of jQuery chaining, the first method in the list must complete before the next method executes. Here is an example: $.fn.reportZebraStriper = function(options) { console.log('reportZebraStriper()'); return true; } ...

javascriptjquerymethodschaining

Use this jQuery-animated menu to make hyperlinks hover with style!

Currently immersed in my exam project, I have integrated an animated jQuery navigation. I am aiming to set the text color to white when hovering over both the link itself and the menu icon that appears upon hovering over the <li> elements. Despite ...

javascriptjqueryhtmlcssnavigation

working with JSON array information

I have a JSON array retrieved from a database that I need to manipulate. Currently, it consists of 8 separate elements and I would like to condense it down to just 2 elements while nesting the rest. The current structure of my JSON looks like this: { "i ...

javascriptarraysjson

Ways to extract the value from a jQuery object

How can I retrieve the selected time value using a jQuery plugin and save it on a specific input element within the page? Refer to the plugin and code provided below: http://jsfiddle.net/weareoutman/YkvK9/ var input = $('#input-a'); input.cloc ...

javascriptjquery