Exercise 30: Using NG Directives - jkneal/spring-angular-train GitHub Wiki

Learn how to use the core (ng) directives

1. In store-controller.js, within the ‘storeCrtl’ controller, add the following scope:

• products = { name: "Basketball", description: "IU Branded", category: "Game Balls", price: 20 }, {name: "Football", description: "Purdue Branded", category: "Game Balls", price: 35}
• productAdded = 'false’
• status = ‘Open’

2. Now modify the behavior named ‘getStatus’ to return the value of the scope property ‘status’
3. Next add a behavior named ‘addProduct’. The method should add take a product’s name, description, category, and price as arguments, then create a new product object and add it to the products array. Afterwards, set ‘productAdded’ to true
4. Next add a behavior named ‘removeProduct’. The method should take the index of the product item to remove as an argument. Within the function, remove the product at that index using the array splice method
5. In app.html, add the following elements after the span that shows the status:

• link element with text ‘close’. When clicked set the scope ‘status’ property to ‘Closed’, and only show this element when the scope ‘status’ property is ‘Open’

• link element with text ‘open’. When clicked set the scope ‘status’ property to ‘Open’, and only show this element when the scope ‘status’ property is ‘Closed’

• h2 element with text ‘Products’, followed by the number of products in the scope products array in ‘()’ (‘Products (number of products)’)

• table element with CSS class ‘table’. The table should print out all products with the following columns (th label – td value):

  • ‘Name’ – product name
  • ‘Description’ – product description
  • ‘Category’ – product category
  • ‘Price’ – product price
  • ‘’ – create a button element with CSS class ‘btn btn-sm’ and text ‘remove’. When clicked the behavior ‘removeProduct’ should be invoked and the index of the product passed as an argument

• h2 element with text ‘Add Product’

• div element with CSS class ‘form-group’. Inside this div add the elements below. Adjust the div with class ‘alert’ to only show if the scope property ‘productAdded’ is true. Adjust the four input controls to bind to the scope properties ‘productName’, ‘productDescription’, ‘productCategory’, and ‘productPrice’ respectively

  <div class="alert alert-success”>Product was successfully added!
   <button class="close" data-dismiss="alert" ngclick="productAdded=false"><span>&times;</span></button>
  </div>
  <label>Product Name</label><input class="form-control"/>
  <label>Product Description</label><input class="form-control"/>
  <label>Product Category</label><input class="form-control"/>
  <label>Product Price</label><input class="form-control"/>

• button element with CSS class ‘btn btn-primary’ and text ‘add’. When clicked the behavior ‘addProduct’ should be invoked and passed ‘productName’, ‘productDescription’, ‘productCategory’, and ‘productPrice’ as arguments

6. In the client directory, create a new directory named 'partials'
7. In the partials directory, create a new file named 'products.html'
8. Move the content starting with the h2 ‘Products’ header from app.html to products.html, then include products.html from app.html only if the scope ‘status’ property is ‘Open’ (hint: use ngIf)

1. Start the training application and go to the app home page

2. Click on the link 'Angular Exercises', verify the page looks like the following:

   

3. Click the ‘close’ link and verify the status changes to ‘Closed’, and the products are not displayed. Then click the ‘open’ link and verify the status changes back to ‘Open’, and the products are displayed again

4. In the ‘Add Product’ section, add some new products and verify they appear in the table above. Also verify the success alert is displayed

5. In the ‘Products’ listing, verify the header correctly reflects the number of products in the table

6. In the same section, click the delete button for some rows and verify the product is removed