MEAN Machine - A beginner's practical guide to the JavaScript stack (2015)

---

To finish off the home page, let’s add some custom CSS stylings to our CSS file.

public/assets/css/style.css

1 main {

2 padding-top:30px;

3 }

4

5 /* HEADER

6 ===================== */

7 header .navbar {

8 border-radius:0;

9 }

Since we aren’t logged in, we won’t see the navbar and our users will just see the welcome text and the link to the home page.

Home Page

Let’s move onto creating the login page now so that our users will actually be able to login.

Login Page

We will need to do two things to create our login page:

· Create the login route

· Create the login view

We’ll add the login route under the home page route to our app.routes.js file:

1 // route for the home page

2 .when('/', {

3 templateUrl : 'app/views/pages/home.html'

4 })

5

6 // login page

7 .when('/login', {

8 templateUrl : 'app/views/pages/login.html',

9 controller : 'mainController',

10 controllerAs: 'login'

11 });

We are applying the mainController to this route in addition to the overall site except we are naming the controllerAs attribute login. This allows us to access the mainControllers functions using login.doLogin().

Let’s create the login view now:

app/views/pages/login.html

1 <div class="row col-sm-6 col-sm-offset-3">

2

3 <div class="jumbotron">

4 <h1>Login</h1>

5

6 <form ng-submit="login.doLogin()">

7

8 <!-- USERNAME INPUT -->

9 <div class="form-group">

10 <label>Username</label>

11 <input type="text" class="form-control"

12 ng-model="login.loginData.username">

13 </div>

14

15 <!-- PASSWORD INPUT -->

16 <div class="form-group">

17 <label>Password</label>

18 <input type="password" class="form-control"

19 ng-model="login.loginData.password">

20 </div>

21

22 <!-- LOGIN BUTTON -->

23 <button type="submit" class="btn btn-block btn-primary">

24 <span>Login</span>

25 </button>

26

27 </form>

28 </div>

29

30 </div>

We have added line breaks in the <input> tags to make them easier to read.

We have created a normal login form and bound our Angular functions and variables using ng-submit and ng-model. Our user form will look clean and simple:

Login Page

If we go ahead and enter our credentials (chris, supersecret), then we will be redirected to the /users page. That behavior was set in the doLogin() function we created in mainController. The users page doesn’t exist yet since we haven’t created the route or views.

Let’s add a few things to our login page like a processing icon and handling error messages.

Adding a Processing Icon

It makes sense to show a processing indicator when our form is processing. We can do this with two steps:

1. Creating a variable called processing

2. Adding spinning icons in our views

Whenever a user clicks Login, we want the view to show a processing icon. When the form is done processing, we want the processing button to disappear.

We will show and hide the processing icon using ngIf and bind it to a variable called processing. Let’s update the doLogin() function in our mainController file to add this variable.

1 // function to handle login form

2 vm.doLogin = function() {

3 vm.processing = true;

4

5 Auth.login(vm.loginData.username, vm.loginData.password)

6 .success(function(data) {

7 vm.processing = false;

8

9 // if a user successfully logs in, redirect to users page

10 $location.path('/users');

11 });

12 };

When a user clicks Login, we have set the processing variable to true. When the function is done processing, we will set the variable to false.

Now all well have left to do is create the processing icon and show it.

In our login.html file, let’s add the icon to the Login button.

1 <button type="submit" class="btn btn-block btn-primary">

2

3 <span ng-if="!login.processing">Login</span>

4

5 <span ng-if="login.processing" class="spinner"><span class="glyphicon glyphico\

6 n-repeat"></span></span>

7

8 </button>

If the variable is true, we will show the spinner. Otherwise, our button will always say Login.

Just a little CSS to handle the spinning animation and we should be good. Add the following to style.css:

1 /* ANIMATIONS

2 ====================== */

3 .spinner {

4 animation:spin 1s infinite;

5 -webkit-animation:spin 1s infinite;

6 -moz-animation:spin 1s infinite;

7 }

8

9 @keyframes spin {

10 from { transform:rotate(0deg); }

11 to { transform:rotate(360deg); }

12 }

13

14 @-webkit-keyframes spin {

15 from { -webkit-transform:rotate(0deg); }

16 to { -webkit-transform:rotate(360deg); }

17 }

18

19 @-moz-keyframes spin {

20 from { -moz-transform:rotate(0deg); }

21 to { -moz-transform:rotate(360deg); }

22 }

Whatever element we add this spinner class to will start spinning. If we click the Login button now, we will see the spinner.

Login Spinner

This technique can be used throughout our entire application.

Adding a Login Error Message

If login is not successful, we will want to let our users know. Since our API already gives back error messages, all we have to do is display them.

Inside of our login function, we will check for the success variable that was returned to us by the API.

1 vm.doLogin = function() {

2 vm.processing = true;

3

4 // clear the error

5 vm.error = '';

6

7 Auth.login(vm.loginData.username, vm.loginData.password)

8 .success(function(data) {

9 ...

10

11 // if a user successfully logs in, redirect to users page

12 if (data.success)

13 $location.path('/users');

14 else

15 vm.error = data.message;

16 });

Every time we click login, the error message will be cleared so we don’t see an out-of-date error message. In our view, we just have to check for that error. Above the login button, add the following:

1 <div class="alert alert-danger" ng-if="login.error">

2 {{ login.error }}

3 </div>

If the error variable exists, then we will display this div.

User Doesn’t Exist

Wrong Password

With our foundation of the site and login ready to go, we will now want to handle a little more authentication and then create the pages that will show our users.

Authentication

We have already used the Auth factory in our mainController. We’ve called all the functions including isLoggedIn, login, logout, and getUser.

Our user can login and their token is stored in localStorage. If you check your browser’s local storage, you will be able to see the token. Before we can get our list of users for the users pages, we must attach this token to every request. This is where the AuthInterceptor we created in ourauthService comes in handy.

We will use this in the main app.js file. Let’s look at how it is applied:

1 angular.module('userApp', [

2 'ngAnimate',

3 'app.routes',

4 'authService',

5 'mainCtrl',

6 'userCtrl',

7 'userService'

8 ])

9

10 // application configuration to integrate token into requests

11 .config(function($httpProvider) {

12

13 // attach our auth interceptor to the http requests

14 $httpProvider.interceptors.push('AuthInterceptor');

15

16 });

Just like we create .controllers and .factorys on our angular.modules, we can use .config to add extra configurations to our application. In this case, we are adding the AuthInterceptor to the $httpProvider.

The $httpProvider will attach the token to each request. We’ll see exactly where this happens when we request user information in the next section.

Now that we are authenticated, we will be redirected to a page that lists all users in the database.

User Pages

To create each user page, we will need a new controller, route, and view. Let’s start by showing all the users on a single page.

All Users

We will need to go into our userCtrl.js file and add a controller for this page.

All Users Controller

1 // start our angular module and inject userService

2 angular.module('userCtrl', ['userService'])

3

4 // user controller for the main page

5 // inject the User factory

6 .controller('userController', function(User) {

7

8 var vm = this;

9

10 // set a processing variable to show loading things

11 vm.processing = true;

12

13 // grab all the users at page load

14 User.all()

15 .success(function(data) {

16

17 // when all the users come back, remove the processing variable

18 vm.processing = false;

19

20 // bind the users that come back to vm.users

21 vm.users = data;

22 });

23

24 })

When the user page loads, we will use the User factory to go and grab all of our users. Those users will be bound to the vm.users variable so that we can use them in our view. Like the login page, we are using the processing variable to show loading icons.

All Users View (pages/users/all.html)

Our main view will contain a few different components.

· A header with a button to create a new user

· A message that says “Loading Users…”

· A table of our users

· Button to edit a user

1 <div class="page-header">

2 <h1>

3 Users

4 <a href="/users/create" class="btn btn-default">

5 <span class="glyphicon glyphicon-plus"></span>

6 New User

7 </a>

8 </h1>

9

10 </div>

11

12 <!-- LOADING MESSAGE -->

13 <div class="jumbotron text-center" ng-show="user.processing">

14 <span class="glyphicon glyphicon-repeat spinner"></span>

15 <p>Loading Users...</p>

16 </div>

17

18 <table class="table table-bordered table-striped" ng-show="user.users">

19 <thead>

20 <tr>

21 <th>_id</th>

22 <th>Name</th>

23 <th>Username</th>

24 <th class="col-sm-2"></th>

25 </tr>

26 </thead>

27 <tbody>

28

29 <!-- LOOP OVER THE USERS -->

30 <tr ng-repeat="person in user.users">

31 <td>{{ person._id }}</td>

32 <td>{{ person.name }}</td>

33 <td>{{ person.username }}</td>

34 <td class="col-sm-2">

35 <a ng-href="/users/{{ person._id }}" class="btn btn-danger">Edit</a>

36 </td>

37 </tr>

38

39 </tbody>

40 </table>

This will show all of our users in a table. We will only show the loading message if the processing variable is true. We will also only show the user table if the users object has users.

We will use the ng-repeat directive as a table row to loop over all our users. There is also an edit button that will link to the edit user page and pass in the user’s id into the URL.

The last part needed to see this users page is to create the route.

All Users Route

In our app.routes.js file, add the following below the login route:

1 // show all users

2 .when('/users', {

3 templateUrl: 'app/views/pages/users/all.html',

4 controller: 'userController',

5 controllerAs: 'user'

6 });

That will use the controller and view we just created. Visit http://localhost:8080/users in your browser and you will see all the work we’ve done come together.

All Users

Another thing to note is that if we go into our Chrome network tools and look at the request to get all the users, we will see that Angular did in fact attach our token.

Access Token

There is one more thing left to do on this page and that is to provide the functionality to delete a user.

Delete a User

We will need two things to add delete functionality.

1. A function in our controller

2. A button in our view

Let’s create the function first. In our userCtrl.js, add the function:

1 // function to delete a user

2 vm.deleteUser = function(id) {

3 vm.processing = true;

4

5 // accepts the user id as a parameter

6 User.delete(id)

7 .success(function(data) {

8

9 // get all users to update the table

10 // you can also set up your api

11 // to return the list of users with the delete call

12 User.all()

13 .success(function(data) {

14 vm.processing = false;

15 vm.users = data;

16 });

17

18 });

19 };

This deleteUser function will call the delete function in our User factory. When that call is successful, we will make a call to grab all our users and then update the users object, which in turn will update our table.

All that’s needed now is a delete button in the view. In your user table in views/pages/users/all.html, add the following right next to the edit button:

1 <a href="#"

2 ng-click="user.deleteUser(person._id)"

3 class="btn btn-primary">Delete</a>

We are passing in the person._id and we’ll call the deleteUser function when this button is clicked thanks to the ngClick Angular directive.

Now when we click delete, the user will be deleted and our table will be updated. Next up, let’s make the create a user components.

Create a User

Just like the list all users page, we will need a controller, route, and view for the create user page.

Create User Controller

We will add a controller to the userCtrl.js file beneath the first controller we created. We’ll call this one userCreateController.

1 // controller applied to user creation page

2 .controller('userCreateController', function(User) {

3

4 var vm = this;

5

6 // variable to hide/show elements of the view

7 // differentiates between create or edit pages

8 vm.type = 'create';

9

10 // function to create a user

11 vm.saveUser = function() {

12 vm.processing = true;

13

14 // clear the message

15 vm.message = '';

16

17 // use the create function in the userService

18 User.create(vm.userData)

19 .success(function(data) {

20 vm.processing = false;

21

22 // clear the form

23 vm.userData = {};

24 vm.message = data.message;

25 });

26

27 };

28

29 })

This is a pretty standard process to us by now. We have a function called saveUser that will be used in a form in our view. We are also calling the User.create() function in our userService. After a user is created, we will show a message and clear the form so that we will be able to enter a new user.

We are passing in the entire userData object into the create user function which includes:

1 // all info is bound to our form using ng-model

2 {

3 name: "Holly",

4 username: "hollylawly",

5 password: "supersecret"

6 }

The other addition here is the type variable. This will be used in our view. Since we are using the same file (views/pages/users/single.html) for both the creation and the editing pages, we will need a way to differentiate between the two. Sure you could create two separate view files for these pages, but there will only really be 2 minor differences in the view. We are eliminating some repeated code by doing it this way.

Create User Route

1 // form to create a new user

2 // same view as edit page

3 .when('/users/create', {

4 templateUrl: 'app/views/pages/users/single.html',

5 controller: 'userCreateController',

6 controllerAs: 'user'

7 })

Create User View (pages/users/single.html)

1 <div class="page-header">

2 <h1 ng-if="user.type == 'create'">Create User</h1>

3 <h1 ng-if="user.type == 'edit'">Edit User</h1>

4 </div>

5

6 <form class="form-horizontal" ng-submit="user.saveUser()">

7

8 <div class="form-group">

9 <label class="col-sm-2 control-label">Name</label>

10 <div class="col-sm-6">

11 <input type="text"

12 class="form-control"

13 ng-model="user.userData.name">

14 </div>

15 </div>

16

17 <div class="form-group">

18 <label class="col-sm-2 control-label">Username</label>

19 <div class="col-sm-6">

20 <input type="text"

21 class="form-control"

22 ng-model="user.userData.username">

23 </div>

24 </div>

25

26 <div class="form-group">

27 <label class="col-sm-2 control-label">Password</label>

28 <div class="col-sm-6">

29 <input type="password"

30 class="form-control"

31 ng-model="user.userData.password">

32 </div>

33 </div>

34

35 <div class="form-group">

36 <div class="col-sm-offset-2 col-sm-6">

37 <button type="submit"

38 class="btn btn-success btn-lg btn-block"

39 ng-if="user.type == 'create'">Create User</button>

40 <button type="submit"

41 class="btn btn-success btn-lg btn-block"

42 ng-if="user.type == 'edit'">Update User</button>

43 </div>

44 </div>

45

46 </form>

47

48 <div class="row show-hide-message" ng-show="user.message">

49 <div class="col-sm-6 col-sm-offset-2">

50

51 <div class="alert alert-info">

52 {{ user.message }}

53 </div>

54

55 </div>

56 </div>

We have our basic form here with inputs bound using ngModel, the form being submitted using ngSubmit, and our error message being shown using ngShow.

The thing to notice here is that we are checking for that type variable and showing Create User vs. Edit User and the button of the form will show Create User or Update User.

Create User

When we add information into our form and click Create User, the user will be created and the form will be cleared. Our message will also show up.

Edit a User

Let’s run through the edit user page. We will use the same view as the create user page. The only differences are that:

· we have to pass a parameter into the URL (/users/user_id)

· we have to get the users information on page load

· we have to bind that information to our form

Edit User Controller

Since we are being passed the user ID through the URL, we will need to inject Angular’s $routeParams module to get URL parameters.

We will know what the specific parameter is called based on what we name it in our routes file. In this case, we are grabbing $routeParams.user_id.

1 // controller applied to user edit page

2 .controller('userEditController', function($routeParams, User) {

3

4 var vm = this;

5

6 // variable to hide/show elements of the view

7 // differentiates between create or edit pages

8 vm.type = 'edit';

9

10 // get the user data for the user you want to edit

11 // $routeParams is the way we grab data from the URL

12 User.get($routeParams.user_id)

13 .success(function(data) {

14 vm.userData = data;

15 });

16

17 // function to save the user

18 vm.saveUser = function() {

19 vm.processing = true;

20 vm.message = '';

21

22 // call the userService function to update

23 User.update($routeParams.user_id, vm.userData)

24 .success(function(data) {

25 vm.processing = false;

26

27 // clear the form

28 vm.userData = {};

29

30 // bind the message from our API to vm.message

31 vm.message = data.message;

32 });

33 };

34

35 });

When the edit user page loads, we will go and grab that user’s data by using the User.get() function. This will hit our API and grab the user info. We will then bind that object to vm.userData.

Since userData is the object that we used in our views/pages/users/single.html, our form will automatically populate with this data!

Edit User Route

This is where we define the parameter name. We will pass in the :user_id here and that lets $routeParams know that $routeParams.user_id exists in the controller we just made.

1 // page to edit a user

2 .when('/users/:user_id', {

3 templateUrl: 'app/views/pages/users/single.html',

4 controller: 'userEditController',

5 controllerAs: 'user'

6 });

Edit User View (pages/users/single.html)

1 <div class="page-header">

2 <h1 ng-if="user.type == 'create'">Create User</h1>

3 <h1 ng-if="user.type == 'edit'">Edit User</h1>

4 </div>

5

6 <form class="form-horizontal" ng-submit="user.saveUser()">

7

8 <div class="form-group">

9 <label class="col-sm-2 control-label">Name</label>

10 <div class="col-sm-6">

11 <input type="text"

12 class="form-control"

13 ng-model="user.userData.name">

14 </div>

15 </div>

16

17 <div class="form-group">

18 <label class="col-sm-2 control-label">Username</label>

19 <div class="col-sm-6">

20 <input type="text"

21 class="form-control"

22 ng-model="user.userData.username">

23 </div>

24 </div>

25

26 <div class="form-group">

27 <label class="col-sm-2 control-label">Password</label>

28 <div class="col-sm-6">

29 <input type="password"

30 class="form-control"

31 ng-model="user.userData.password">

32 </div>

33 </div>

34

35 <div class="form-group">

36 <div class="col-sm-offset-2 col-sm-6">

37 <button type="submit"

38 class="btn btn-success btn-lg btn-block"

39 ng-if="user.type == 'create'">Create User</button>

40 <button type="submit"

41 class="btn btn-success btn-lg btn-block"

42 ng-if="user.type == 'edit'">Update User</button>

43 </div>

44 </div>

45

46 </form>

47

48 <div class="row show-hide-message" ng-show="user.message">

49 <div class="col-sm-6 col-sm-offset-2">

50

51 <div class="alert alert-info">

52 {{ user.message }}

53 </div>

54

55 </div>

56 </div>

This is the exact same view as the create users page. What is neat here is that since our inputs are data-bound to the userData object and we made the call to grab data in our controller, the user’s information will automatically show in our form.

Edit User

Our password of course won’t be shown for security purposes since our API does not return that data.

Animating the Message

Since we already pulled in animate.css via CDN in our index.html file, we can use its classes to animate our Angular directives.

We just have to add some custom CSS. We’ll use the animate.css class to have our message zoom in.

1 /* NGANIMATE

2 ====================== */

3

4 /* show and hide */

5 .show-hide-message.ng-hide-remove {

6 -webkit-animation:zoomIn 0.3s both ease;

7 -moz-animation:zoomIn 0.3s both ease;

8 animation:zoomIn 0.3s both ease;

9 }

To add animations to the ngShow and ngHide directives, the classes are .ng-hide-remove and .ng-hide-add.

Our message will now fly in using this CSS animation.

Conclusion

We now have all the pages done and can handle CRUD on our users. By applying the Node API through the use of Angular services, we are able to create an entire frontend application!

These concepts can be applied to more than just users and you can duplicate these across many types of resources to create a larger application. Hopefully seeing how an entire MEAN application comes together from the backend to the frontend will help understand many things including:

· the separation of backend and frontend

· how using an API can help speed up workflow

· the mechanics of using an API

· creating an Angular application that uses services

· handling frontend Angular authentication

· and much more…

Recap of the Process

Although we have only dealt with users here, this is the foundation for how you can add components to your site. Let’s say you wanted to add a resource to your site like Articles. You will want to perform the same CRUD options on this resource.

Here are the main steps for creating this new component:

Node.js Side

1. Create the Mongoose Model

2. Create the API endpoints as routes

AngularJS Side

1. Create the service to communicate with the API

2. Create controllers for all the different pages (all, create, edit)

3. Set up your views and routes and assign controllers

4. Polish your application with loading icons, animations, and more

The steps above recap the steps we have taken throughout this book. It doesn’t seem like much when broken down into 6 bullet points, but there is a lot of knowledge necessary to execute all those points.