Search⌘ K
Home
Courses
Developing Robust Web Applications with Ember.js

Setting up Application Controllers

Learn to set up the controllers in an Ember application.

We'll cover the following...

Setting up the add route controller

To add a new product to the database, we need to use the controller to get product details from the add route input. First, we use the command below to create the add route:

ember g controller admin/add

This command creates an add.js file in the app/controllers/admin path. Open the add route template to define the action we want to trigger when the user clicks the “Submit” button:

Node.js
{{page-title "Add"}}
<div class="add">
    <form>
        <div class="form-group">
            <label for="exampleFormControlInput1">Title</label>
            {{input type="text" class="form-control" value=title placeholder = "Add Title..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Description</label>
            {{input type="text" class="form-control" value=desc placeholder = "Add Desc..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Price</label>
            {{input type="number" class="form-control" min = "1" step="any" value=price placeholder = "Add Price..."}}
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Category</label>
            <select class="form-select" aria-label="Default select example" id="category">
                <option selected value="">Select a category</option>
                <option value="men">Men</option>
                <option value="women">Women</option>
                <option value="kids">Kids</option>
                <option value="homeaccessories">Home Accessories</option>
            </select>
        </div>
        <br>
        <div class="form-group">
            <label for="exampleFormControlInput1">Image Link</label>
            {{input type="text" class="form-control" value=imglink placeholder = "Add Image Link..."}}
        </div>
        <br>
        </form>
    
        <button class="btn btn-success" type="submit" {{on 'click' this.addProduct}}>Submit</button> 
        <LinkTo class='btn btn-primary' @route="admin" >Close</LinkTo>
    
</div>

In line 37, we define a click event handle named addProduct on the Submit button.

We need to ...