It is time to create a real AngularJS Application.
Lets use some of the AngularJS features to make a shopping list, where you can add or remove items:
Step 1: Getting Started
Start by creating an AngularJS application named myShoppingList. Then, define a controller called myCtrl inside the app.
The controller adds an array named products to the $scope. This array holds your shopping items.
We use the ng-repeat directive in the HTML to loop through the products array and display each item in a list.
To allow users to add items to the shopping list, we first add a text input field and bind it using the ng-model directive.
In the controller, we define a function called addItem which pushes the new item (from the input field) into the products array.
We also add a button with the ng-click directive to call the addItem() function when clicked.
To remove items from the shopping list, we create a function named removeItem in the controller. This function takes the index of the item as a parameter and uses the splice() method to remove it from the products array.
In the HTML, we use ng-repeat to display the list, and for each item, we add a <span> element with an ng-click directive. This directive calls the removeItem() function, passing $index as an argument.
The application had errors like allowing duplicate or empty items. We fix this by checking the input before adding an item.
We also add a message box to show errors when someone tries to add a duplicate item or empty input.
Our shopping list now works, but we can improve its appearance using the AIT.CSS stylesheet.
We added the AIT.CSS file and applied its classes to buttons, input fields, list items, and layout containers for a cleaner UI.