People coming from Ruby on Rails, web2py, and other opinionated frameworks to Angular and Node.js will surely miss some great features such as built-in OAuth, synchronization, and security. One of these modules things that is absolutely essential for a front-end application is the useful "Session Flash". In the next two blog posts, I'll show you step-by-step, with explanation, how to build a fully customizable Session Flash with Angular and Bootstrap.

Who is this tutorial for?

Anyone who has a basic understanding of web development (html, css, javascript). If you have a basic understanding of Angular, you'll rock this tutorial. If you don't know what a webserver is or how to use one, this tutorial may be hard to follow. However, everything you need to know is here and a beginner could successfully complete the tutorial.

What you'll be making:

Click for a demo

What you'll learn:

  • Angular - a little bit of everything, and enough to build a basic app. Some advanced topics - events and directives.
  • Bootstrap - working with modals.
  • Other nuances of app development, such as how to structure your project directories and how to properly include javascript libraries
Ready to go!? Let's do this.

In part 1, we'll set up an Angular app with some user-input features

Let's make a to-do list app. Our directory structure will look like this to start out: 

index.html
views
    - list.html
js
    - app.js
    - controllers.js
    - directives.js

We'll define our angular app module first. We're defining a module 'todoApp' which has dependencies of modules 'todoControllers' and 'todoDirectives'. To start, we we'll just set up the "shells" of the modules.

app.js

    (function(angular) {

        angular.module('todoApp', ['todoControllers', 'todoDirectives']);

    })(angular);

controllers.js

Note: we have added a default to-do item in our list, which we'll use to validate that angular is up an running as expected in the next section. 
    (function(angular) {

        angular.module('todoControllers', [])
            .controller('MainController', ['$scope', function($scope) {

            $scope.items = [
                {
                    task: "Groceries",
                    due: "Tomorrow"
                }
            ]

            }])

    })(angular);

directives.js

    (function(angular) {

        angular.module('todoDirectives', []);

    })(angular);

Next, let's write our html. This will be the view template for our to-do list. We'll start with a very basic layout, and try to load our default item which we defined in MainController

list.html

    <h3>My to-do list</h3>
    <ul>
        <li ng-repeat="item in items">
            Task: {{item.task}}<br>
            Due: {{item.due}}
        </li>
    </ul>

index.html

Note: we're getting Bootstrap css & js, jQuery js, and Angular js via CDN. You must have all these libraries, and include them in this order. 
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>ToDo</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>
    <body ng-app="todoApp">

    <div class="container" ng-controller="MainController">
        <div class="row">
            <div class="col-md-12">
                <ng-include src="'views/list.html'"></ng-include>
            </div>
        </div>
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="/code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
    <script type="text/javascript" src="js/directives.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    </body>
    </html>

Now if you serve index.html, you should see this Angular is up and running!
We still, however, need to add a form so someone can add new items. Let's do this now.

Add inputs to list.html

We want to add a field for task and a field for due. Here's the new list.html: 
<input type="text" placeholder="Task" ng-model="task">
<input type="text" placeholder="Due" ng-model="due">
<button ng-click="makeItem()">Add item</button>

<h3>My to-do list</h3>
<ul>
    <li ng-repeat="item in items">
        Task: <br>
        Due: 
    </li>
</ul>

And the new look: We'll now hook up the functionality our MainController

Push to-do item to list

We need two more 2-way-bound scope variables, task and due. In our function makeItem, we take these two variables, append them to the list, and reset their values. 
(function(angular) {

    angular.module('todoControllers', [])
        .controller('MainController', ['$scope', function($scope) {

            $scope.items = [
                {
                    task: "Groceries",
                    due: "Tomorrow"
                }
            ]

            $scope.task = "";
            $scope.due = "";

            $scope.makeItem = function() {
                this.items.push({
                    task: this.task,
                    due: this.due
                })
                this.task = this.due = "";
            }
    }])

})(angular);

We now have in fully functioning to-do list Angular app. In Part 2 , we'll implement our "Session Flash" module.