For the user
view, Listing 26.13 implements two simple forms. The first allows you to modify the email
and color
preferences of the user. The body contains a <div>
element that creates an instance of an AngularJS controller that gets the user information from the webserver. The username <input>
element is set to disabled
to prevent the user from changing the username.
Notice that the inputs are bound to the $scope.user
value in the AngularJS scope by using ng-model
. Also notice that the form methods are POST
but also include the action
attribute, which specifies the route to use to save or delete the user. Remember that using the action
attribute overrides the AngularJS suppression of the normal <form>
functionality. This page also includes the <%=msg>
EJS script element to display the message if one exists on the session. Figure 26.4 shows the rendered user
view.
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>User Login and Sessions</title>
05 <link rel="stylesheet" type="text/css"
06 href="/static/css/styles.css" />
07 </head>
08 <body>
09 <div class="form-container" ng-controller="myController">
10 <p class="form-header">User Profile</p>
11 <form method="POST" action="/user/update">
12 <label>Username:</label>
13 <input type="text" name="username"
14 ng-model="user.username" disabled><br>
15 <label>Email:</label>
16 <input type="email" name="email"
17 ng-model="user.email"><br>
18 <label>Favorite Color:</label>
19 <input type="text" name="color"
20 ng-model="user.color"><br>
21 <input type="submit" value="Save">
22 </form>
23 </div>
24 <form method="POST" action="/user/delete">
25 <input type="submit" value="Delete User">
26 </form>
27 <hr><%= msg %>
28 <hr>{{error}}
29 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
30 <script src="/static/js/my_app.js"></script>
31 </body>
32 </html>