Cannot locate AngularJS + Typescript controller

I'm encountering an error while attempting to integrate TypeScript with AngularJS. The issue I'm facing is:

Error: [$controller:ctrlreg] The controller named 'MyController' has not been registered

Does anyone have any insights on what might be causing this error?

This is the class I've created:

/// <reference path='references/_all.ts' />
var app = angular.module('shop', []);

class MyController {
    constructor($scope: any) {
        $scope.message = { title: "Hello World!!" };
    };
}

app.controller('MyController', MyController);

Here's the HTML code:

<html>
<head>
...
</head>
<body ng-app="shop">
    <div ng-controller="MyController">
            {{message.title}}
    </div>
</body>
</html>

I am using grunt to compile it:

/// <reference path='references/_all.ts' />
var app = angular.module('shop', []);
var MyController = (function () {
    function MyController($scope) {
        $scope.message = { title: "Hello World!!" };
    };

    return MyController;
})();
app.controller('MyController', MyController);

Answer №1

Do you have a file link for the app?

<script src="./app.js"></script>

Here is my approach:

var app = angular.module('shop', []);

var MyController = (function () {
    function MyController($scope) {
        $scope.message = { title: "Hello World!!" };
    }

    return MyController;
})();

app.controller('MyController', MyController);
<head>
  <meta charset="utf-8" />
  <title>AngularJS + Typescript controller cant be found</title>
  <script src="https://code.angularjs.org/1.5.4/angular.js"></script>
  <script src="./app.js"></script>
</head>

<body ng-app="shop">
  <div ng-controller="MyController">
      {{message.title}}
  </div>
</body>
</html>

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

The Three JS on the website is error-free, yet it fails to function properly

I've been attempting to replicate the example three.js page on my own website, complete with a canvas for the 3D animation. However, I'm encountering an issue where nothing is displayed, despite no errors appearing. I've tried troubleshootin ...

Maintain text area spacing using JavaScript

Could anyone assist me in finding a script that can change line breaks from a user's textarea input into HTML upon form submission to ensure that the formatting is maintained in our notification emails? Currently, I am encountering an issue where fie ...

What are some ways to implement dangerouslySetInnerHTML in conjunction with read-more-react from npm?

Is there a way to include dangerouslySetInnerHTML in a text field without receiving an error? <ReadMoreReact text={yourTextHere} min={minimumLength} ideal={idealLength} max={maxLength} readMoreText={read ...

Setting default parameters for TypeScript generics

Let's say I define a function like this: const myFunc = <T, > (data: T) => { return data?.map((d) => ({name: d.name}) } The TypeScript compiler throws an error saying: Property 'name' does not exist on type 'T', whic ...

Ways to verify the click status of a button prior to initiating an AJAX request with jQuery?

I am facing an issue with a button that needs to be clicked by the user before submitting the form. Here's the code snippet for the button: $('#chooseButton') .on( 'click', function() { console.log("user ha ...

When the user clicks, display one div and conceal the others

https://codepen.io/leiacarts/pen/PoqRxNZ I need assistance with two specific tasks related to my website layout. Firstly, I am struggling to ensure that images displayed in the red sections remain constrained and automatically resize within the content di ...

Could anyone clarify the reason behind the success of one function while the failure of the other?

Currently delving into the world of React, I decided to follow along with the Road To React book. In this guide, the author presented this code const List = (props) => ( props.list.map(item => ( <div key={item.objectID}> & ...

Encountering a fragment error while utilizing create-react-library

Recently, I embarked on the journey of publishing a React component to npm that I had created. In my quest for knowledge, I stumbled upon create-react-library, which I decided to use for the first time. As I started testing my component from the test folde ...

The jQuery message validator is currently experiencing some issues with its functionality

I am working on implementing a basic login system using jQuery and it appears to be functioning correctly, but I keep getting an error message in my jQuery code here: alert('Error in system');. What's puzzling is that when I use alert(answe ...

Using Javascript to eliminate divs on a page that have the attribute display:none

Looking for a way to remove generated divs with display: none using JavaScript? Let's find a solution. <div id="workarea"> <div id="message" class="messages" style="display: none;">Your message was saved</div> <div id="message" c ...

Creating an AI adversary for a simple Tic Tac Toe game board: a step-by-step guide

Being new to programming, I recently completed a basic Tic Tac Toe gameboard successfully. However, as I progress to the next phase of my assignment which involves implementing an AI opponent, I encountered several challenges. As a novice in programming, ...

Is there a live password verification tool available?

Currently, I am conducting some initial research for my school's IT department as a student employee. The students at our institution are required to change their passwords every six months, but many of them struggle with the various password regulati ...

I have a question about TypeScript mapped types. Why is it not possible to retrieve the keys of a union of interfaces?

Below is the code snippet that I am working with: interface Data { A: { a1: string; a2: string; }; B: { b1: number; b2: string; }; } type TransformDataKey<V extends string, T extends string> = `--${V}-${T}`; type TransformDa ...

Escape from an iframe with the help of a buster

My website is being targeted by a code that prevents it from breaking out of an iframe. Despite trying different frame breaker scripts, I have not been successful in resolving this issue. Any assistance would be greatly appreciated. Thanks! Buster: func ...

What causes CSS to fail to load in React but work normally in Next.js?

We are currently experiencing an issue with a component located in a Git Submodule that is being used by both Next.js and React. While everything is functioning correctly in Next.js, React is unable to accept the way the CSS is being loaded: import styles ...

React SVG not displaying on page

I am facing an issue with displaying an SVG in my React application. Below is the code snippet: <svg className="svg-arrow"> <use xlinkHref="#svg-arrow" /> </svg> //styling .user-quickview .svg-arrow { fill: #fff; position: ...

I am looking to host two Nuxt.js (Vue.js) applications on a single server using PM2

To begin using Nuxt.js, follow these steps: vue init nuxt/express myapp1 vue init nuxt/express myapp2 The structure of my projects is as shown below. /workspace/myapp1 (Nuxt.js application) /workspace/myapp2 (Nuxt.js application) Within my workspace, ...

WebGl - Perspective skewing perspective

I've been working on implementing an oblique projection in WebGL, but I'm encountering an issue where the projection appears identical to ortho. Here's the snippet of code setting up the projection matrix: mat4.identityMatrix(pMatrix); ...

Is there a way to conceal the contents of a page until all the images have finished loading?

I'm currently working on improving the performance of a website that is loading very slowly. I have already reorganized, compressed and minified the JavaScript and CSS files, but the main issue seems to be with the images. The site contains large imag ...

Simplifying complex JSON structures by un-nesting arrays

Within my Formik form, I have 3 fields: MemberMemberID, EventEventID, and event_date. This form represents an event (such as a Tuesday club) taking place on a specific date and attended by various members. Formik stores the data in key-value pairs within ...