Implementing the user View

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.

Listing 26.13 user.html: Implementing the user EJS HTML template


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>


Image

Figure 26.4 The rendered user view allows you to edit and delete the user.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.104.158