Angular 101

by Laura Kishimoto

HTML

<div class="wrap" data-ng-app="lessonFiveApp">
    <h1>ANGULAR&zwnj;<span>101</span></h1>

    <div class="lesson1">
        <h2>Lesson 1: ng-model and input box</h2>

        <p>Bind the input text to the content of the span.</p>
        <input type="text" data-ng-model="testname" /> <span class="result">{{ testname }}</span>

    </div>
    <div class="lesson2" data-ng-init="array=['Laura Kishimoto', 'Caolan McMahon', 'Red Panda']">
        <h2>Lesson 2: ng-init, ng-repeat, and arrays</h2>

        <p>Repeat elements based off a declared array.</p>
        <ul>
            <li data-ng-repeat="person in array">{{ person }}</li>
        </ul>
    </div>
    <div class="lesson3" data-ng-init="people=[{name:'Laura Kishimoto',city:'Toronto'}, {name:'Caolan McMahon',city:'Farnsfield'}, {name:'Sumi Kishimoto',city:'Toronto'}, {name:'Red Panda',city:'Everywhere'}, {name:'Julia Jung',city:'Toronto'}]">
        <h2>Lesson 3: filters</h2>

        <p>Applying case changes and filters to an array of objects.</p>
        <h3>Applying lowercase, orderBy name</h3>

        <ul>
            <li data-ng-repeat="person in people | orderBy:'name'">{{ person.name | lowercase }}</li>
        </ul>
        <h3>Filtering, orderBy city</h3>

        <input type="text" data-ng-model="name" />
        <ul>
            <li data-ng-repeat="person in people | filter:name | orderBy:'city'"><b>{{ person.name }}</b> from {{ person.city }}</li>
        </ul>
    </div>
    <div class="lesson4" data-ng-controller="lessonFourController">
        <h2>Lesson 4: controllers and $scope</h2>

        <p>Using controllers to set scope and use external data.</p>
        <input type="text" data-ng-model="fname" />
        <ul>
            <li data-ng-repeat="customer in lessonFour | filter:fname | orderBy:'from'"><b>{{ customer.fname }}</b> from {{customer.from }}</li>
        </ul>
    </div>
    <script>
    function lessonFourController($scope) {
        $scope.lessonFour = [{
            fname: 'Ben...

CSS

.wrap {
    font-family: sans-serif;
    color: #555;
    max-width: 1000px;
    padding: 40px;
    margin: 0 auto;
}
.wrap div {
    padding: 20px 0;
    border-top: 1px solid #ddd;
}
h1, h2, h3 {
    margin-bottom: 0.25em;
    font-size: 5em;
    color: #888;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
h1 {
    font-family: Impact;
    text-align: center;
}
h1 span {
    color: #d4e05c;
}
h2 {
    font-size: 1.2em;
    color: teal;
    font-weight: 600;
}
h3 {
    margin: 1.5em 0 0.5em;
    font-size: 0.75em;
    color: #888;
    text-transform: uppercase;
}
p {
    font-size: 0.8em;
    margin-bottom: 1em;
    font-style: italic;
}
ul {
    margin: 4px 0;
    border-left: 3px solid #ccc;
    padding: 6px 12px;
}
li {
    font-size: 0.8em;
    padding: 0.15em 0;
}
input {
    margin-bottom: 0.5em;
}
pre {
    margin-bottom: 1em;
    padding: 12px 16px;
    border: 1px dashed #ccc;
    color: #888;
}
.lesson1 input, .lesson1 .result {
    display: inline-block;
    margin-right: 20px;
}