Having trouble with AngularJS - struggling to diagnose the issue

Question

Having trouble with AngularJS - struggling to diagnose the issue

HTML Page

<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="assets/js/angular.min.js"></script>
    <script src="assets/js/app.js"></script>
</head>
<body>
    <div ng-controller="HelloController">
        <h2>Hi {{helloTo.title}}, Start exploring angular js</h2>

        Enter Your Name<input type="text" ng-model="name">
        <span ng-bind="name"></span>
    </div>
    <div ng-controller="studentController">

    </div>

</body>

Javascript Section

function HelloController($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "Rahul Devan";
}

I want to use multiple controllers in the same page within the same JS file. Hence, I have structured my controllers in this manner.

The current output looks like https://i.stack.imgur.com/UdRY5.jpg

Your help in identifying the error would be greatly appreciated

javascript angularjs

Answer 1

Answer №1

Here is a great example that demonstrates how to utilize multiple controllers within the same app module:

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


app.controller('first', function($scope) {
  $scope.name = 'Sarah';

});


app.controller('second', function($scope) {

  $scope.name = 'Emily';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="sample">
  <div ng-controller="first">First Controller:
    <span>{{name}}</span>
  </div>
  <div ng-controller="second">Second Controller:
    <span>{{name}}</span>
  </div>

</body>

Answer 2

Here is a great example that demonstrates how to utilize multiple controllers within the same app module:

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


app.controller('first', function($scope) {
  $scope.name = 'Sarah';

});


app.controller('second', function($scope) {

  $scope.name = 'Emily';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="sample">
  <div ng-controller="first">First Controller:
    <span>{{name}}</span>
  </div>
  <div ng-controller="second">Second Controller:
    <span>{{name}}</span>
  </div>

</body>

Having trouble with AngularJS - struggling to diagnose the issue

Answer №1

Similar questions

Angular View receives OAuth Token Response via Cookie

A step-by-step guide on initializing and setting a cookie value with expiration

The value of a select box cannot be retrieved until it has been clicked on

What is the best way to keep calling an AJAX function until it receives a response from a previous AJAX call

Angular 2 - Changes in component properties not reflected in view

What is the correct way to bind by reference when utilizing a function that returns an object?

Browser lacks proper credentials for passport authentication

Update the useState function individually for every object within an array

Accessing properties in JavaScript using square brackets

Loop through a collection of arrays that contain the same elements, and multiply each consecutive element by a specified value x

Identifying Changes with jQuery Event Listeners

Pattern for identifying text that exclusively consists of whitespace characters and `<br>` tags

The dropdown menu is malfunctioning when accessed within the mobile view of a jQuery

Navigating to an offline HTML webpage using JavaScript in a PhoneGap application

Replacing the yellow autofill background

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

Performing a MongoDB query in a controller using the MEAN stack with Node.js

When applying a cell formatter to change the color of a Tabulator cell, the text displayed is being

In need of a collection of modules determined by a DefinePlugin constant

What is the process for obtaining a client-side cookie using next.js?