Unable to include a controller in an Angular project generated by Yeoman

I'm currently utilizing the Yeoman scaffolding to develop an Angular application and I'm encountering some difficulties when trying to add a controller. The about and main controllers are automatically added and function properly. However, whenever I attempt to include my own controller for a new view, it only displays {{name}}. Any assistance would be greatly appreciated! Here is the code snippet:

user.js (the one I'm attempting to add)

'use strict';

/**
 * @ngdoc function
 * @name classSiteApp.controller:UserController
 * @description
 * # UserController
 * Controller of the classSiteApp
 */

angular.module('classSiteApp')
  .controller('UserController', function ($scope) {
        $scope.name='Hello';

  });

app.js

'use strict';

/**
 * @ngdoc overview
 * @name classSiteApp
 * @description
 * # classSiteApp
 *
 * Main module of the application.
 */
angular
  .module('classSiteApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .when('/user', {
        templateUrl: 'views/user.html',
        controller: 'UserController'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

main.js

'use strict';

/**
 * @ngdoc function
 * @name classSiteApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the classSiteApp
 */
angular.module('classSiteApp')
  .controller('MainCtrl', function ($scope) {
        $scope.name='Hello';

  });

index.html

   
    <!-- HTML content goes here -->
    

Answer №1

To properly link your user.js file to your index.html, make sure to include it as a script reference at the end of the file like shown below:

    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/about.js"></script>
    <script src="your/path/to/user.js"></script>

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

How can I make a div scroll by a precise number of pixels using Vue?

In my Vue2 app, I attempted to scroll up a div by 10px using the following method: this.$refs.hello.scrollTo({ top: 10, left: 0, behavior: "smooth"}); Unfortunately, instead of scrolling up by 10px, it scrolls all the way to the top. How can I s ...

Can ChatGPT Service Error be resolved?

I tried using chatGPT to help me with my HTML code, but every time I opened it I received an error message saying "Failed to get service" Here is the code that I want to make work: <html> <head></head> <body> <script& ...

The button component in my React application is not functioning as expected, despite utilizing the useState and useEffect hooks

I'm having trouble with my Button not working, even though I am using useState and useEffect Check out the code below: import React, { useState, useEffect } from "react"; // import Timeout from "await-timeout"; import ...

Error retrieving value from a multidimensional array in JavaScript (TypeError: Unable to retrieve property '0' of undefined)

While working with a multidimensional array in my code, I encountered an issue when accessing the values through arguments. Oddly enough, everything worked fine when running the code using repl. However, when I switched to npm 5.6.0 and node 8.4.0, it init ...

Neglecting to validate types in the personalized response format within Express

I'm new to typescript and I've run into a problem where I can't seem to get my types validated. Route app.use((req: Request, res: Response) => { // here 404 is a string but should be a number according to type defined but no error is s ...

A computer program designed to determine a series of numbers needed to complete a square grid

Given the numbers 1, 2, 3, 4, 5, 6, 7, 8, I am seeking to replace the x's in such a way that each side adds up to the number in the center. *-*---*-* |x| x |x| *-*---*-* |x| 12|x| *-*---*-* |x| x |x| *-*---*-* Initially, I have iterated over the num ...

Error: Vuex commit fails due to JSON circular structure issue

Using Vue.js along with the vuex store, I make an API call to validate an item, which returns arrays of errors and warnings. Below is my vuex action : export function validateitemReview ({ commit, dispatch, state }, { reviewId, type, itemreviewData }) { ...

Adjusting body styles in a NextJS application using localStorage prior to hydration: A step-by-step guide

If you visit the React website and toggle the theme, your choice will be saved in localStorage. Upon refreshing the page, the theme remains persistent. In my NextJS project, I am attempting to achieve a similar outcome by applying styles to the body eleme ...

Using interpolation brackets in Angular2 for variables instead of dots

I'm curious if Angular2 has a feature similar to the bracket notation in Javascript that allows you to use variables to select an object property, or if there is another method to achieve the same functionality. Here is the code snippet for reference ...

The POST request functions smoothly in Postman, however, encounters an error when executed in node.js

Just recently I began learning about node.js and attempted to send a post request to an external server, specifically Oracle Commmerce Cloud, in order to export some data. Check out this screenshot of the request body from Postman: View Request Body In Pos ...

Using JavaScript to make an AJAX request when a dropdown menu from

Looking to update a graph created with Google Chart API using a drop-down menu. Currently facing a few issues. The dropdown is sending a request to the wrong URL. Instead of /graph/, it's sending data to the current page, which is /services/. This ...

Automatically retrieve the generated PDF file upon completion (Node.js and Express)

I've been utilizing the node module html-pdf to seamlessly convert my HTML into PDF format. The conversion process goes smoothly, but I'm encountering difficulties when it comes to downloading the file once it's been generated. Below is the ...

Troubleshooting Angular and Ionic: Unable to Retrieve Value from HTML Input Element

Check out the HTML code below: <div class="list"> <label class="item item-input"> <input id="email" ng-model="email" type="text" placeholder="Email Address"> </label> < ...

Scanning through a directory to find fragments of a file's title

Currently, I am in the process of creating a media viewing platform that automatically downloads new episodes of TV shows. One obstacle I have encountered is the need to specify a source for the video content, as each episode download has a unique naming ...

Angular - service workers leading to unsuccessful uploads

When uploading files using Uppy (XHRUpload) in my Angular 6 app, the process is smooth on localhost with the service worker disabled. However, enabling the service worker results in successful uploads only for small files, while larger files fail to upload ...

When the down key is pressed in a textarea, choose the list item

I have HTML similar to the following <div class="row"> <textarea id="txtArea" ng-model="input" ng-change="handleOnChange(input);getSearchField(input);" ng-click="search(input)" ng-focus="search(input);" ...

Characteristics within the primary template element of a directive

I'm having an issue with the following directive code: .directive('myDirective', function () { restrict: 'E', replace: true, transclude: true, scope: { label: '@', ngModel: '=', ...

Trouble retrieving desired data from an array of objects in React Native

I'm having trouble retrieving values from an array of objects in my state. When I try to access the values, it only prints out "[Object Object]". However, when I stored the values in a separate array and used console.log, I was able to see them. Here ...

Delete the item if the link uses Javascript: void(0)

<a class="slicknav_item" href="home">Home<span></span></a> <a class="slicknav_item" href="about">About<span></span></a> <a class="slicknav_item" href="javascript: void(0)">Services<span></span& ...

JQuery is unable to display a hidden element (such as a checkbox) even after using the .show() function

Currently, I am bewildered by a perplexing issue involving JQuery not displaying my hidden input in my RoR web application. While I acknowledge that my code may not be perfect (I'm quite inexperienced with JQuery or JS), I find it puzzling why the hid ...