Tag Archives: angularjs

Web

OWL Carousel integration with AngularJS

owl
To up to work owl carousel (or other jQuery plugin) with AngularJS you need to perform some actions.
1. Download and include all plugin files:

<html>
<head>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="vendor/owl-carousel/owl.carousel.css" rel="stylesheet"/>
    <link href="vendor/owl-carousel/owl.theme.css" rel="stylesheet"/>

    <script src="vendor/jquery.min.js"></script>
    <script src="vendor/owl-carousel/owl.carousel.js"></script>
</head>
<body>
    ...
</body>
</html>

2. Create directive in AngularJS:

app.directive('wrapOwlcarousel', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var options = scope.$eval($(element).attr('data-options'));
            $(element).owlCarousel(options);
        }
    };
});

3. Place new tag in your page:

<wrap-owlcarousel class="owl-carousel" 
    data-options="{autoPlay: 5000, stopOnHover: true, 
        slideSpeed : 300, paginationSpeed : 400, singleItem : true}">
    <div>
        <img src="img/1.jpg"/>
    </div>
    <div>
        <img src="img/2.jpg"/>
    </div>
</wrap-owlcarousel>

See more about OWL Carousel.

Web

Application configuration in AngularJS

angcfg
If you are developing angular web-application, you ask how to involve configuration in it. I propose next pattern: create constant service and inject it in your other modules, services etc.
About constant in AngularJS.

1. Create app module as app.js file:

var app = angular.module('app', []);

2. Define constant service as config.js file:

app.constant('config', {
    apiUrl: 'http://localhost/api/v1',
});

3. Get your service with injected config as services.js file:

app.factory('userService', ['$http', 'config',
    function ($http, config) {
        return {
            register: function (email, password) {
                return $http({
                    url: config.apiUrl + '/user',
                    method: 'POST',
                    data: {
                        'Email': email,
                        'Password': password
                    }
                });
            },
            login: function (email, password) {
                return $http({
                    url: config.apiUrl + '/auth',
                    method: 'POST',
                    data: {
                        'Email': email,
                        'Password': password
                    }
                });
            },
            logout: function () {
                return $http({
                    url: config.apiUrl + '/auth',
                    method: 'DELETE'
                });
            },
            checkAuth: function () {
                return $http({
                    url: config.apiUrl + '/auth',
                    method: 'GET'
                });
            }
        };
}]);

So, config service is a singleton can be injected in any other services, modules etc.