Despite including the necessary statements, AngularJS is still generating "Missing 'use strict' statement" errors

I encountered an issue when using Grunt's Jshint-Task with my controller and two modules split into three files. Despite including the "use strict" statement in all three files, I still receive an error prompting me to add it. As a newcomer to Angular, I'm struggling to understand why this is happening.

Any insights would be greatly appreciated!

This is my controller:

"use strict";
angular.module('calculatorApp').controller('HomeController', ['calculatorApp', function(){
    var $this = this;

    $this.test = function () {
        $this.alert('test');
    };
}]);

This is my module:

"use strict";
var calculatorApp = angular.module('calculatorApp', ['ngRoute']);
calculatorApp.config(function($routeProvider){

    $routeProvider
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'home.tpl.html'
        })
        .otherwise({
            redirectTo: '/'
        });
});

Answer №1

To prevent errors in concatenation and minification tasks, always wrap your modules (to avoid variable collisions and leaking to the global scope) and include 'use strict' inside these functions.

For example:

app.js

var app;
(function (app) {
    'use strict';
    angular.module('app', [
        'module1',
        'module2',
        'moduleX'
    ]);
})(app || (app = {}));

randomcontroller.js

var app;
(function (app) {
    'use strict';
    var RandomController = (function () {
        function RandomController(logger) {
            this.logger = logger;
            this.title = 'RandomView';
            this.logger.info('Activated Random View');
        }
        RandomController.$inject = ['logger'];
        return RandomController;
})();
angular.module('app').controller('RandomController', RandomController);
})(app || (app = {}));

If you encounter any difficulties, refer to John Papa's guide for help -> https://github.com/johnpapa/angular-styleguide

Answer №2

After encountering some errors, I discovered the issue was a vendor folder located within my src folder. To anyone facing similar problems, be sure to inspect your folder organization closely!

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

What is the importance of always catching errors in a Promise?

In my project, I have implemented the @typescript-eslint/no-floating-promises rule. This rule highlights code like this - functionReturningPromise() .then(retVal => doSomething(retVal)); The rule suggests adding a catch block for the Promise. While ...

JavaScript - The 'this' pointer becomes undefined while within a function body

I have set a value for this.username previously, but it returns as undefined when inside a function. How can I access its value? Parse.User.logIn(this.username, this.password, { success: function(user) { // it returns as undefined con ...

Save essential data in local/session storage to have access to it even after the page is reloaded

Dear Team, we recently developed a single-page application that stores data in the root scope for access on other pages. While everything functions well in the regular flow, we encountered an issue with browser refresh. If a user refreshes the applicatio ...

The second div element remains unselected in jQuery

Below is the example of an HTML structure: <span id="17">yes here</span> <div class="PricevariantModification vm-nodisplay"></div> <div class="PricesalesPrice vm-display vm-price-value"> <span class="a"></span> ...

Issue with Mongoose's deep population feature not functioning as expected

I'm currently working on a web application that requires the use of mongoose-deep-populate. I've already installed it using npm, but unfortunately, I keep encountering the following error: Error: Plugin was not installed at Query.deepPopulate (/ ...

what is the method to extract the value of a JSON object nested within another JSON object

Can someone please assist me? "_attachments": { "kiran.jpg": { "content_type": "image/jpeg", "revpos": 6, "digest": "md5-mEsoX4ljN1iJlF2bX1Lw2g==", "length": 4601, "stub": true } } I ...

What makes factories the go-to choice over services for $http.get requests?

In my current project, I am utilizing AngularJS and require a service to fetch JSON data using the $http.get method. I believe that creating a service would result in a clearer and more readable syntax: app.service('ApiService', function($http) ...

Is AngularJS known for its ability to bind variables across different components effortlessly

In the beginning of my Angular controller, I use Promises to download JSON data and then store it in variables: app.controller('mainController', ['$scope', '$http', '$q', function($scope, $http, $q) { var req1 = $ ...

In ReactJS, when passing an array of objects to a child component, the first instance may sometimes return as undefined, causing the code to break

Currently, I am in the process of creating a personal blog for my brand. The "Posts" section is designed to retrieve data from a basic JSON via an API. At present, I have used mirageJS to mock the API and employed the useEffect and useState hooks to set th ...

Clearing a leaflet layer after a click event: Step-by-step guide

When working with my map, I attempt to toggle the layer's selection using a mouse click. Initially, my map looks like this: https://i.sstatic.net/lOI95.png Upon clicking a layer, my goal is to highlight and select it: https://i.sstatic.net/63Rx2.pn ...

Transforming aggregate array of objects into document keys

I have a set of trade data that looks like the following { "_id" : 1498290900.0, "trade" : { "type" : "Adjust", "data" : { "type" : "bid", "rate" : "0.00658714", "amount" : "3.82354427" } ...

What is the best way to organize angularjs controllers and directives within one another?

When I structure my controllers like this: <body ng-app="app" ng-controller="ctrl"> <div ng-controller="app-get"> <app-get></app-get> </div> <div ng-controller="app-post"> <app-post">& ...

Using Element as a type parameter in a React/Typescript function

In my React project using Typescript, I am working on creating a generic collection. The current setup is as follows: class List<T> { constructor(data: any){...} } This code allows me to create a list of a specific type. My goal is to perform a ...

What are the steps to activate the multi-column filter feature in dataTables?

I recently started customizing dataTables and needed help with multi-column search through an input text box. I found a solution here: https://datatables.net/examples/api/multi_filter.html. I copied and pasted the mentioned javascript from that link. I ...

Obtain headers from receiving an external JavaScript file

I am trying to find a way to import an external .js file and access the response headers from that request. <script src="external/file.js?onload=callback"> function callback(data) { data.getAllResponseHeaders(); } </script> Unfortunately, ...

What steps should I take to address the ES6 promise chain issue within Express?

Currently, I am delving into Promise chaining and experimenting with some code involving express and mongoose in a node environment. Below is the snippet of code that I am working on: const register = (req, res, next) => { User.findOne(req.params.ema ...

How can I cut an array by value in Vue?

I am working on a component that has a list of objects and I need to implement functionality where, when toggled, the objects' title prop is either added to or removed from an array. Adding the value was easy to do, but removing it has proven challeng ...

Refreshing the lightbox once new ajax content is loaded

While there are similar questions and answers related to my issue, I have not been able to apply them successfully. As a beginner in this area, any assistance is greatly appreciated. I am currently working with CubePortfolio, which is a jQuery-based, filt ...

Is it possible to execute Protractor end-to-end tests directly from the user interface?

My goal is to execute an end-to-end test case through the user interface. The scenario is that I am going to develop a testing page on our development stack, allowing anyone to run the Protractor test case by simply clicking on the "run" button. We have ...

Is it possible to use jQuery for drag-and-drop functionality?

Currently, I am working on developing a drag-and-drop widget that consists of 3 questions and corresponding answers. The user should only be able to fill in 2 answers in any order, while the third drop area should be disabled. This third drop area can be l ...