What could be improved in this AngularJS code snippet?

Question

What could be improved in this AngularJS code snippet?

Currently, I am immersed in an AngularJS book and have extracted the following code snippet directly from its pages:

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
    <title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
    <span>{{item.title}}</span>
    <input ng-model='item.quantity'>
    <span>{{item.price | currency}}</span>
    <span>{{item.price * item.quantity | currency}}</span>
    <button ng-click="remove($index)">Remove</button>
</div>
<script src="js/lib/angular.min.js"></script>
<script>
    function CartController($scope) {
        $scope.items = [
            {title: 'Paint pots', quantity: 8, price: 3.95},
            {title: 'Polka dots', quantity: 17, price: 12.95},
            {title: 'Pebbles', quantity: 5, price: 6.95}
        ];
        $scope.remove = function(index) {
            $scope.items.splice(index, 1);
        }
    }
</script>
</body>
</html>

Although I've ensured that angular.min.js is correctly included, Chrome presented me with the following output:

Evidently, there seems to be an issue within the code. However, being a novice, I'm unable to pinpoint the exact problem. Any assistance or guidance on this matter would be greatly appreciated. Thank you.

update

The error output provided by Chrome is as follows:

Failed to instantiate module myApp due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.2.10/$injector/nomod?p0=myApp
    at Error (native)
    at http://localhost:63342/angular-book/js/lib/angular.min.js:6:450
    at http://localhost:63342/angular-book/js/lib/angular.min.js:20:260
    at http://localhost:63342/angular-book/js/lib/angular.min.js:21:262
    at http://localhost:63342/angular-book/js/lib/angular.min.js:29:175
    at Array.forEach (native)
    at q (http://localhost:63342/angular-book/js/lib/angular.min.js:7:280)
    at e (http://localhost:63342/angular-book/js/lib/angular.min.js:29:115)
    at $b (http://localhost:63342/angular-book/js/lib/angular.min.js:32:232)
    at Zb.c (http://localhost:63342/angular-book/js/lib/angular.min.js:17:431

javascript angularjs

Answer 1

Answer №1

In order to integrate the CartController into your application "myApp," it is necessary for you to register it.

One method to achieve this is as follows:

angular.module('myApp').controller('CartController', ['$scope', function ($scope) {
        $scope.items = [
            {name: 'Tennis shoes', quantity: 6, price: 59.99},
            {name: 'Baseball cap', quantity: 3, price: 19.99},
            {name: 'Water bottle', quantity: 2, price: 9.99}
        ];
        $scope.remove = function(index) {
            $scope.items.splice(index, 1);
        }
    }]);

Answer 2

In order to integrate the CartController into your application "myApp," it is necessary for you to register it.

One method to achieve this is as follows:

angular.module('myApp').controller('CartController', ['$scope', function ($scope) {
        $scope.items = [
            {name: 'Tennis shoes', quantity: 6, price: 59.99},
            {name: 'Baseball cap', quantity: 3, price: 19.99},
            {name: 'Water bottle', quantity: 2, price: 9.99}
        ];
        $scope.remove = function(index) {
            $scope.items.splice(index, 1);
        }
    }]);

Answer 3

Answer №2

The book on AngularJS from O'Reilly is riddled with errors that require extensive code sample corrections.

In your app, make sure to reference the name of the app at the top but also register it properly:

<html ng-app='myApp'>

If you assign a value here, don't forget to define the module as well:

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

You can even assign the module to a variable for easy access when creating controllers, etc:

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

myApp.controller('myController',
  function myController($scope){
};

For a simple Angular app using only one page of code, you can skip assigning a value to the ng-app attribute:

<html ng-app>

Here's the complete working code example I used:

<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>Your Shopping Cart</title>
</head>

<body ng-controller='CartController'>
    <h1>Your Order</h1>
    <div ng-repeat='item in items'>
        <span>{{item.title}}</span>
        <input ng-model='item.quantity'>
        <span>{{item.price | currency}}</span>
        <span>{{item.price * item.quantity | currency}}</span>
        <button ng-click="remove($index)">Remove</button>
    </div>

    <script src="js/angular.min.js"></script>
<script>
function CartController($scope) {
    $scope.items = [
        {title: 'Paint pots', quantity: 8, price: 3.95},
        {title: 'Polka dots', quantity: 17, price: 12.95},
        {title: 'Pebbles', quantity: 5, price: 6.95}
    ];
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    }
}
</script>
</body>
</html>

Answer 4

The book on AngularJS from O'Reilly is riddled with errors that require extensive code sample corrections.

In your app, make sure to reference the name of the app at the top but also register it properly:

<html ng-app='myApp'>

If you assign a value here, don't forget to define the module as well:

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

You can even assign the module to a variable for easy access when creating controllers, etc:

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

myApp.controller('myController',
  function myController($scope){
};

For a simple Angular app using only one page of code, you can skip assigning a value to the ng-app attribute:

<html ng-app>

Here's the complete working code example I used:

<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>Your Shopping Cart</title>
</head>

<body ng-controller='CartController'>
    <h1>Your Order</h1>
    <div ng-repeat='item in items'>
        <span>{{item.title}}</span>
        <input ng-model='item.quantity'>
        <span>{{item.price | currency}}</span>
        <span>{{item.price * item.quantity | currency}}</span>
        <button ng-click="remove($index)">Remove</button>
    </div>

    <script src="js/angular.min.js"></script>
<script>
function CartController($scope) {
    $scope.items = [
        {title: 'Paint pots', quantity: 8, price: 3.95},
        {title: 'Polka dots', quantity: 17, price: 12.95},
        {title: 'Pebbles', quantity: 5, price: 6.95}
    ];
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    }
}
</script>
</body>
</html>

Answer 5

Answer №3

Like Luke previously mentioned, it is essential to establish the myApp framework. Make sure to properly inject dependencies such as controllers and directives into myApp:

angular.module('myApp', [
  // Inject myApp dependencies (controllers, etc.) here...
    'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
  // Define your routes here...
}]);

Next, create your controller, which will be injected...

angular.module('myApp.controllers', []).
  controller('MyCtrl', [function() {

  }]);

If you haven't already, check out the Angular seed project. It serves as a valuable resource for those getting started with Angular.

Answer 6

Like Luke previously mentioned, it is essential to establish the myApp framework. Make sure to properly inject dependencies such as controllers and directives into myApp:

angular.module('myApp', [
  // Inject myApp dependencies (controllers, etc.) here...
    'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
  // Define your routes here...
}]);

Next, create your controller, which will be injected...

angular.module('myApp.controllers', []).
  controller('MyCtrl', [function() {

  }]);

If you haven't already, check out the Angular seed project. It serves as a valuable resource for those getting started with Angular.

What could be improved in this AngularJS code snippet?

Answer №1

Answer №2

Answer №3

Similar questions

Navigating with Reach Router only updates the URL, not the component being rendered

JavaScript checking the current page's URL is crucial for maintaining accurate and dynamic

Express and Angular2 Webpack integration

Causing a click event to occur results in crashing the browser

When attempting to download a PDF file from Flask to the client, the file appears to be

Can JavaScript be used to modify the headers of an HTTP request?

What is the best way to extract URLs with varying numbers of slashes in angular.js?

Restrict the duration of time a user can spend in the v-calendar

Delay Export of React Component Until After Request in Shopify App Development

Waiting in Python using Selenium until a class becomes visible

Deleting tasks from the to-do list using Node.js and Express with EJS

What is the best way to group/merge multiple objects that have the same name into a single object (Nesting)?

Tips on Guaranteeing AJAX Requests are Successfully Called in Sequential Order and Receive Responses in the Same Sequence

Utilizing AngularJS "controller as" syntax within templates

Unveiling the mystery: Locating the position of an element within a multidimensional array using JavaScript or JQuery

Significant issue identified with ajax functionality, requiring immediate attention

Complete and send HTML forms with changing IDs

Angular Inner Class

Can we import a CSS file selectively in Vue.js?

What is the method for bringing in Mongoose to utilize json.parse()?