What could be the issue with this piece of Angular code?

Question

What could be the issue with this piece of Angular code?

Just starting to dive into AngularJS and following a tutorial on YouTube. I've copied the exact code from the instructor, but for some reason it's not working for me. Apologies for the newbie question, but I'm genuinely surprised that the code isn't functioning as expected. Thank you in advance for any help!

<body data-ng-app="">
<div data-ng-controller="SimpleController">
    <ul>
        <li data-ng-repeat="cust in Customers">
            {{cust.Name}}
        </li>
    </ul>
</div>
<script src="../Scripts/angular.js"></script>
<script>
    function SimpleController($scope) {
        $scope.Customers = [
            { Name: "Chanchal", City: "Dhaka" },
            { Name: "Masud", City: "Jessore" },
            { Name: "Humayun", City: "Barisal" }
        ];
    }
</script>

javascript angularjs

Answer 1

Answer №1

To ensure compatibility, please make sure you are using an angular version that is below 1.3. You can verify this information by checking the link provided.

<!DOCTYPE html>
<html>

<head>
  <script  src="https://code.angularjs.org/1.2.0/angular.js"></script>
</head>

<body data-ng-app>
  <div data-ng-controller="SimpleController">
    <ul>
      <li data-ng-repeat="cust in Customers">
        {{cust.Name}}
      </li>
    </ul>
  </div>
 
<script>

function SimpleController($scope) { $scope.Customers = [ { Name: "Chanchal", City: "Dhaka" }, { Name: "Masud", City: "Jessore" }, { Name: "Humayun", City: "Barisal" } ]; }
</script>
</body>

</html>

Answer 2

To ensure compatibility, please make sure you are using an angular version that is below 1.3. You can verify this information by checking the link provided.

<!DOCTYPE html>
<html>

<head>
  <script  src="https://code.angularjs.org/1.2.0/angular.js"></script>
</head>

<body data-ng-app>
  <div data-ng-controller="SimpleController">
    <ul>
      <li data-ng-repeat="cust in Customers">
        {{cust.Name}}
      </li>
    </ul>
  </div>
 
<script>

function SimpleController($scope) { $scope.Customers = [ { Name: "Chanchal", City: "Dhaka" }, { Name: "Masud", City: "Jessore" }, { Name: "Humayun", City: "Barisal" } ]; }
</script>
</body>

</html>

Answer 3

Answer №2

In Angular, it is generally not recommended to use global controllers unless you explicitly allow for them using controllerProvider.

 function AdvancedController($scope) {
        $scope.Users = [
            { Name: "Sarah", City: "New York" },
            { Name: "Michael", City: "Los Angeles" },
            { Name: "Emma", City: "Chicago" }
        ];
    }

AdvancedController.$inject = ['$scope'];
angular.module('myApp', []).controller('AdvancedController', AdvancedController);

In your HTML file, include the following:

<body  ng-app="myApp">

Answer 4

In Angular, it is generally not recommended to use global controllers unless you explicitly allow for them using controllerProvider.

 function AdvancedController($scope) {
        $scope.Users = [
            { Name: "Sarah", City: "New York" },
            { Name: "Michael", City: "Los Angeles" },
            { Name: "Emma", City: "Chicago" }
        ];
    }

AdvancedController.$inject = ['$scope'];
angular.module('myApp', []).controller('AdvancedController', AdvancedController);

In your HTML file, include the following:

<body  ng-app="myApp">

Answer 5

Answer №3

To begin your angular application, you must first bootstrap it.

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

<script>
  var myApp = angular.module('myApp',[]);

  function SimpleController($scope) {
    $scope.Customers = [
        { Name: "Chanchal", City: "Dhaka" },
        { Name: "Masud", City: "Jessore" },
        { Name: "Humayun", City: "Barisal" }
    ];
  }
</script>

In addition,

<body data-ng-app="myApp">

Check out this JSfiddle link for more information!

Answer 6

To begin your angular application, you must first bootstrap it.

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

<script>
  var myApp = angular.module('myApp',[]);

  function SimpleController($scope) {
    $scope.Customers = [
        { Name: "Chanchal", City: "Dhaka" },
        { Name: "Masud", City: "Jessore" },
        { Name: "Humayun", City: "Barisal" }
    ];
  }
</script>

In addition,

<body data-ng-app="myApp">

Check out this JSfiddle link for more information!

What could be the issue with this piece of Angular code?

Answer №1

Answer №2

Answer №3

Similar questions

Transferring form data to JavaScript using PHP with jQuery's AJAX functionality

How to utilize the translateY() method to seamlessly shift concealed elements with no empty space

What is the best way to save inputted names as properties of an object and assign the corresponding input values as the values of those properties?

What is the best way to hide the menu bar on a particular window using electron?

Creating a Copy to Clipboard feature in React can be achieved by transferring data from an h1 tag to an input field

Trigger an analytics event from a background chrome extension

Tips for deactivating trackball rotation events and triggering a custom rotation event while adjusting the rotation speed within the custom event

Issue found when utilizing ngRepeat. Checkbox and radio button statuses being incorrectly set

Utilizing Javascript or XUL windows without the use of iframes offer

What is the process for configuring a server page within create-react-app for sending API requests?

The menu is loaded dynamically by Ajax from JavaScript once the page is refreshed

Get Facebook to recognize and display link previews for websites using ajax technology

Error 404 occurs when the browser reloads the URL for a specific router route

Unable to dynamically add an element to a nested array in real-time

What makes (_=1)=>$=>_++ act as a tally?

Ending a connection to MS SQL server in node.js with mssql library

Display/Conceal a div using CSS in React JS/Redux

Prevent automatic scrolling of a div in jQuery while it is being hovered over

Duplicating information within a row

Having trouble disabling the Angular-UI Bootstrap accordion?