/angularjs/

AngularJS – Example App - Part 1

2014-06-29 10:49:12

In this tutorial I will present you how to start play with AngularJS. "Louis Btbw" is frontend application based on AngularJS. In all stages I will add small descriptions (what was added to applications), but everything you can find on Github.

1) Structure.

You can start from creating project in your IDE and download necessary library. For the begining we need AngularJS v1.2.10 (of course) and Bootstrap v3.1.1.

2) Next, when you know the structure, we can start form main file and this means we have to add app.js to app folder.

var BACKEND_URL = "http://localhost:8080/app";

var louisApp = angular.module('louisApp',
    [
        'LouisApp.controllers.home',
        'LouisApp.controllers.post',
        'LouisApp.factory',

        'ngRoute'
    ])

louisApp.config(function ($routeProvider) {

    $routeProvider.
        when('/', {templateUrl: 'app/tpl/home.tpl.html', controller: 'HomeCtrl'}).
        when('/post', {templateUrl: 'app/tpl/post/list.tpl.html', controller: 'PostListCtrl'}).
        when('/post/:id', {templateUrl: 'app/tpl/post/form.tpl.html', controller: 'PostDetailCtrl'}).
        when('/post-new', {templateUrl: 'app/tpl/post/form.tpl.html', controller: 'PostCreationCtrl'}).
        otherwise({redirectTo: '/'});
});

In this file we create our new app "louisApp" with dependency 'ngRoute'. We need this dependency to work with angular routing.

Other dependencies such as "LouisApp.controllers.home", "LouisApp.controllers.post" and "LouisApp.factory" we will create later on.

About routing. In this code you can find routing configuration. Now we have three pages for post module and one page for home module (our dashboard) .

3)_ Now you can add templates:_ - app/tpl/home.tpl.html - app/tpl/post/list.tpl.html - app/tpl/post/form.tpl.html - app/tpl/post/form.tpl.html

4)Time for controllers.

controllers.home.js

angular.module('LouisApp.controllers.home', [])

    .controller('HomeCtrl', function ($scope, $http) {

    })

;

controllers.post.js

angular.module('LouisApp.controllers.post', [])

    .controller('PostListCtrl', ['$scope', 'PostsFactory', 'PostFactory', '$location',
        function ($scope, PostsFactory, PostFactory, $location) {

            $scope.edit = function (id) {
                $location.path('/post/' + id);
            };

            $scope.delete = function (id) {
                PostFactory.delete({ id: id }, function () {
                    $scope.posts = PostsFactory.all();
                });
            };

            $scope.create = function () {
                $location.path('/post-new');
            };

            $scope.populate = function () {
                var id = new Date().getTime();
                PostsFactory.create({"id": id, "name": "Lorem " + id});
                $scope.posts = PostsFactory.all();
            };

            $scope.posts = PostsFactory.all();
        }])

    .controller('PostDetailCtrl', ['$scope', '$routeParams', 'PostFactory', '$location',
        function ($scope, $routeParams, PostFactory, $location) {

            $scope.save = function () {
                PostFactory.update($scope.post, function () {
                    $location.path('/post');
                });
            };

            $scope.cancel = function () {
                $location.path('/post');
            };

            $scope.post = PostFactory.show({id: $routeParams.id});
        }])

    .controller('PostCreationCtrl', ['$scope', 'PostsFactory', '$location',
        function ($scope, PostsFactory, $location) {

            $scope.save = function () {
                $scope.post.id = new Date().getTime();
                PostsFactory.create($scope.post, function () {
                    $location.path('/post');
                });
            };

            $scope.cancel = function () {
                $location.path('/post');
            };

        }])
;

3) Last step is adding factory, this is our way to send data to server and collect it back. factory.js

angular.module('LouisApp.factory', ['ngResource'])

    .factory('PostsFactory', function ($resource) {
        return $resource(BACKEND_URL + '/posts/', {}, {
            all: { method: 'GET', isArray: true },
            create: { method: 'POST' }
        })
    })

    .factory('PostFactory', function ($resource) {
        return $resource(BACKEND_URL + '/posts/:id', {}, {
            show: { method: 'GET' },
            update: { method: 'PUT', params: {id: '@id'} },
            delete: { method: 'DELETE', params: {id: '@id'} }
        })
    })

;

As you can see this is very short code, but this is enough to Create, Update, Delete and Show Post from data base.

List page

Edit page

All files from this stage you can find on GitHub: AngularJS – Example App - Part 1 and example here but you must know that in this example backend doesn't exist. To display data I used mock data (static json files).

Oh, one more thing. Of course you have to have backend code to expose rest for post module. You can use any language you want, but if you know the javaee I have post for you.