spa-tutorial/angular.html at master · mmukhin/spa-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!-- Angular version of the NBA Application -->

<!doctype html>
<!-- define angular app module -->
<html lang="en" ng-app="NBAapp">
    <head>
        <meta charset="utf-8">
        <title>NBA Application</title>
        <link rel="stylesheet" href="lib/css/master.css" />
    </head>

    <!-- define angular app controller -->
    <body id="app" ng-controller="NBAController">

        <!-- Navigation -->
        <div class="nav floatleft">
            <a href="angular.html" class="nolink">League</a>
            <a href="index.html#about">About</a>
        </div>

        <div class="nav floatright">
            <a href="index.html">Backbone</a>
            <a href="angular.html" class="nolink">Angular</a>
        </div>

        <div style="clear:both;"></div>

        <!-- App -->
        <hr/>
        <h1>NBA App</h1>

        <!-- Form for creating new teams -->
        <div>
            <fieldset>
                <!-- form for creating new teams -->
                <legend>Team Creation</legend>
                <form id="newTeam">
                    <!-- ng-model is an angular attribute -->
                    <input type="text" id="new-team-city" placeholder="Team City" ng-model="team.city" autofocus />
                    <input type="text" id="new-team-name" placeholder="Team Name" ng-model="team.name" />
                    <!-- ng-click is an angular click-listener -->
                    <input type="submit" id="new-team-add" class="button" ng-click="addTeam($event)" value="Create" />
                </form>
            </fieldset>
        </div>

        <br/>

        <!-- League information -->
        <div id="angular">
            <fieldset>
                <!-- auto-updating count of teams in the league -->
                <legend>
                    Teams in league: {{totalTeams}}
                </legend>

                <form>
                    <!-- team filter by keyword -->
                    <input type="text" ng-model="searchText" placeholder="Search Keyword" />
                    <span ng-if="searchText">
                        {{(teams | filter:searchText).length}} teams found!
                    </span>
                </form>
                <br/>

                <div class="header-row">Link / City / Name</div>
                <!-- loop over teams in $scope.teams -->
                <div ng-repeat="team in teams | filter:searchText | orderBy:'name'">

                    <!-- layout for displaying a team -->
                    <!-- determine whether or not to add the "hide" class -->
                    <div ng-class="{ hide: team.editing == true }">
                        <div style="display:inline-block;min-width: 500px;">
                            <a href="http://nba.com/{{ team.name.toLowerCase() }}" target="_blank">Team Link</a>
                            {{team.city}} {{team.name}}
                        </div>
                        <div style="display:inline-block;min-width: 500px;">
                            <!-- click listeners bound to $scope -->
                            <input type="button" class="button" ng-click="editTeam(team)" value="Edit" />
                            <input type="button" class="button" ng-click="removeTeam(team)" value="Delete" />
                        </div>
                    </div>

                    <!-- layout for editing a team -->
                    <!-- determine whether or not to add the "hide" class -->
                    <form ng-class="{ hide: ! team.editing }">
                        <div style="display:inline-block;min-width: 500px;">
                            <input type="text" ng-model="team.city" placeholder="Team City" />
                            <input type="text" ng-model="team.name" placeholder="Team Name" />
                        </div>
                        <div style="display:inline-block;min-width: 500px;">
                            <!-- click listeners bound to $scope -->
                            <input type="submit" class="button" ng-click="saveEditing(team)" value="Save" />
                            <input type="button" class="button" ng-click="cancelEditing(team)" value="Cancel" />
                        </div>
                    </form>
                </div>
            </fieldset>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
        <script src="lib/scripts/app-angular.js"></script>
    </body>
</html>