AngularJS - Basic

Multiple apps - Bootstrapping

by Ryan Morris

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div ng-app="myApp">
    <div class="container">
         <h1>Todos</h1>

        <form name="todoItem" style="display:none">
             <h2>Add an item</h2>

            <div class="form-group">
                <input type="text" name="title" placeholder="Title" class="form-control" />
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        
        <form class="form-inline" role="form">
            <div class="form-group">
                <input type="text" name="search" class="form-control" placeholder="Type to search" />   
                <button type="button" class="btn btn-primary">+</button>
            </div>
        </form>
        
        <table id="todos" class="table table-striped">
            <thead>
                <tr><th>Description</th>
                    <th>Due</th>
                    <th>Complete?</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>Description?</td>
                    <td>Due?</td>
                    <td>Complete?</td>
                </tr>
            </tbody>
        </table>
        
    </div>
</div>

CSS

.form-inline .btn{
    float:left;
    margin-left:10px;
}

.form-inline .form-control{
    width:75%;
    float:left;
}

.form-inline{
    clear:both;
    overflow:auto;
}
}

JavaScript

// Explore Angular!

// 1
//
// Set up an App and a Controller that will build
// A list of "things" based on a thing of your choice
// You will be storing your things (like "todos")
//    ex: [{title: "Take out trash", complete: false, due: "2015-01-01"}]
// in a local array

// 2
//
// Create a table (it exists already) that builds itself using ng-repeat
// And displays a row for each todo (a cell for each piece
// of data). 

// 3
// 
// Set up the search input field so that a user can filter the 
// table by the todo name/title

// 4
//
// Add a filter so that the table is sorted by "complete"

// 5
//
// Now, try using the $http service to pull data via an
// external API
//     http://jsonplaceholder.typicode.com/todos
//

// 6
//
// There is a hidden "Add item" form in the markup
// Set up the "add/+" button so that displays the form
// Allow the user to submit a new todo item that adds to the table