Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS Best Practices

24,794 views

Published on

Here is a compilation of best practices at Betclic on Angular JS

Published in: Internet
  • Download your Automated game predictor software for NFL, MLB and NCAA! ➤➤ http://ishbv.com/zcodesys/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 99% Win Rate is REAL or a Myth? ●●● http://scamcb.com/zcodesys/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here. We are providing AngularJs training in velachery. For more details: AngularJs training in chennai
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • For AngularJS Online Course Coupons and Discounts Visit http://www.todaycourses.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

AngularJS Best Practices

  1. 1. AngularJs Best Practices
  2. 2. • File Organization • Namespacing and File naming • Understanding Modules • Organizing modules • Minification • Definitions and roles • Controllers • Services • Directives • Scope • Communicating between components • Avoiding FOUC • Thinking Declaratively • Directives as a DSL • Breaking Down A Page into Components • $resource • Restangular • Betclic best practices • Conclusion Agenda Note: all screenshots are copyright from their respective owners.
  3. 3. • Basic Only for a small POC app 3 File Organization
  4. 4. • By feature 4 File Organization
  5. 5. • By feature then type If more than 15 files , split by type Don’t forget that the file organization doesn’t reflect how code is delivered 5 File Organization
  6. 6. • Miror app file organization for unit test • Keep same file name + ‘Test’ 6 File Organization
  7. 7. • Why naming ? – Object type reading – Avoid collisions (silent with Ajs!) 7 Namespacing and File naming
  8. 8. • NameSpacing solution (2 or 3 letters pre-fix) : 8 Namespacing and File naming
  9. 9. • Controllers : ScheduleCtrl • Services : ScheduleSvc • Filters : RatingFilter • Directives : small-schedule • Partials : – if my controller is ScheduleCtrl  ScheduleCtrl.html – If my directives is small-schedule  small-schedule.html 9 Namespacing and File naming
  10. 10. 10 Understanding Modules
  11. 11. • Modules have nothing to do with object naming (so far…) • The Injector has the list of all the objects in our application • Only one injector exists in each Angular application 11 Understanding Modules Modules
  12. 12. • One Module + it's the simplest option by far you don't have to worry about how your module organization reflects the organization of your files and folders, and you still only need to deliver the code you want running in the browser. - if you have code that you are sharing amongst several applications, then they all need to have the same module name. - delivering code as a third party or publishing it to the open source community is not really a possibility. 12 Organizing modules
  13. 13. • Two Modules One for code custom to the current application, and one for any shared code. + simplicity - increased complexity, and some rigidity when sharing or publishing code. This strategy works best if you will be building multiple applications that may share some code, or if you intend to publish a portion of your code to third parties, or you plan to open source it, say a library of widgets. 13 Organizing modules
  14. 14. • MainModule with several sub-modules The MainModule may or may not have any actual objects in it, it might just be a collection of sub-modules. + you have tons of organization for your code Modules become an extra way to organize and deliver just the parts of your application that you want to deliver. - increased complexity of managing those different modules. - build system will have to be more complex as well 14 Organizing modules
  15. 15. var servicesA = angular.module('servicesA', []); var servicesB = angular.module('servicesB', []); var serviceApp = angular.module('serviceApp', ['servicesA‘, 'servicesB']); 15 MainModule with several sub-modules Example
  16. 16. • removing all unnecessary whitespace • rename variables and parameters to short names. Problem : Angular uses reflection to look at parameter names of certain functions like controllers and services, so that its dependency injector can provide the correct dependency angular.module('app').controller('Controller1',function($scope, mySvc) { $scope.val = mySvc.val; }) .NET bundling  angular.module('app').controller('Controller1',function(a, b) { a.val = b.val; }) 16 Minification
  17. 17. • Node solution : ng-min • Our solution : classic .net bundling on fly Constraints , we need to write that way: angular.module('app').controller('Controller1', ['$scope','mySvc', function($scope, mySvc) { $scope.val = mySvc.val;}]) I 17 Minification
  18. 18. • Controllers – setup the scope – view interaction • Services – handle non-view logic – communicate with the server – hold data & state (not the only one) – DOM manipulation (code smell ;)) – Business • Directives – Manipulate DOM – Receive View Events 18 Definitions and roles • Views – Display the application – Declare bindings & directives
  19. 19. • coordinate View and Model Nothing else, the ctrl shouldn’t knwon the business logic or the model structure angular.module('app').controller('scheduleCtrl',function($scope, schedule) { $scope.schedule = schedule; $scope.register = function(newClass) { $scope.schedule.register(newClass); } }); • Limited # of collaborators  split the ctrl in smaller ones  Facade pattern • Testable 19 Controllers – Design guidelines
  20. 20. A service is treated as a singleton, that is there is only one instance of a specific service available during the whole lifetime of the Angular application. This is different from e.g. a controller of which many instances can be created. app.service(‘registration’, function() { return { title: ‘Service from Service’ } }); But in Angular there are actually sevral ways to create a service 20 Services - creation
  21. 21. app.value(‘myValService’, ‘someValue’); What the value function does is create a service that is exactly what you passed into the value function. We can define any string, number, date-time, array or object as a value. We can even register a function as a value This could be things like the full name of the user, it’s role and so on. Typically we would load this data after the user has successfully logged into the system and keep this data around as long as the user remains logged in. Dependancy Injection is not possible. 21 Services –value
  22. 22. The constant function is essentially the same as the value function, except it's available during the app configuration phase. app.constant(‘myValService’, ‘someValue’); The difference between a value and a constant service is that the former can only be injected (and thus be used) in a service or a controller while the latter can also be injected into a module configuration function.. Dependancy Injection is not possible. 22 Services – constant
  23. 23. Example app.constant(‘myValService’, ‘someValue’);  var app = angular.module('app', []); app.config(function ($provide) { $provide.constant('movieTitle', 'The Matrix'); }); app.controller('ctrl', function (movieTitle) { expect(movieTitle).toEqual('The Matrix'); }); 23 Services – constant
  24. 24. The purpose of the factory function is to generate the single object, or function, that represents the service to the rest of the application. app.factory('profile', function() { return { "name": "Anonymous", "Id": null, "login": function(){…}, "logout": function(){…} } }); So the factory function is simply just the normal way to create a service. Notice that the factory function can ask for other dependencies. 24 Services - factory
  25. 25. The service function is a lot like the factory function with one difference. The service function will take the function you give it and call new on it. Then it will cache the result of that function and give you the result every time you ask for that service. monApp.service('profile', function() { this.name = "Anonymous"; this.id = null; this.login = function(){…} this.logout = function(){…} }); « return » isn’t required. Generally factory is all you need. No question regarding the “this” ! 25 Services - service
  26. 26. This function is ultimately what all those other functions use under the covers. This allows you to create a service from a much lower level. What you have to do is give the provider function another function whose return value must have a $get function. A provider is actually a configurable factory. The provider accepts an object or a constructor. The benefit here is that using provider, you have the option to make your service configurable and configure it before it is created. Offical Reco : You should use the Provider recipe only when you want to expose an API for application-wide configuration that must be made before the application starts. This is usually interesting only for reusable services whose behavior might need to vary slightly between applications. 26 Services - provider
  27. 27. angular.module('app').controller('scheduleCtrl',function($scope, registration) { $scope.title = registration.title; }); app.config(function($provide) { $provide.provider('registration', function() { var type; return { setType: function(value) { type = value; }, $get: function() { return { title: 'Service from Provider ' + type } } } })}) app.config(function(registrationProvider) { registrationProvider.setType('Angular'); }) 27 Services - provider
  28. 28. A decorator can modify or encapsulate other providers. There is one exception and that a constant cannot be decorated 28 Services - Decorator var app = angular.module('app', []); app.value('movieTitle', 'The Matrix'); app.config(function ($provide) { $provide.decorator('movieTitle', function ($delegate) { return $delegate + ' - starring Keanu Reeves'; }); }); app.controller('myController', function (movieTitle) { expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves'); });
  29. 29. Filters are really just a service with a specific kind of name. 29 Services – filters as services app.factory("ratingsFilter", function() { return function(input) { var rating = parseInt(input); var result = ""; for(var i=0; i < rating; i++) { result += "*"; } return result; } }); app.filter("ratings", function() { return function(input) { var rating = parseInt(input); var result = ""; for(var i=0; i < rating; i++) { result += "*"; } return result; } });
  30. 30. • SRP : single responsability ! • Cohesive : having all the functionality of an object relate to the primary purpose of the object • Loosely Coupled : A good service should be loosely coupled to any dependencies that it has. • Good interface : Any situation where you call multiple methods to do a single job is less effective. • Testable 30 Services – Design Guidelines
  31. 31. function Course(title, instructorIds, id) { this.title = title; this.instructorIds = instructorIds; this.id = id; } Course.prototype.displayName = function() { // code } … app.value('courseFactory', { createCourse: function(title, credits, department, instructors) { var instructorIds = []; for(var i=0; i < instructors.length; i++) { instructorIds.push(instructors[i].id); } return new Course(title, instructorIds, -1); } }) 31 Services - Specific Types - Factories
  32. 32. app.value('schedule', { classes: [], addClass: function(newClass) { for(var i=0; i < this.classes.length; i++) { if(this.classes[i] === newClass) { return; } } this.classes.push(newClass); }, dropClass: function(classToDrop) { for(var i=0; i < this.classes.length; i++) { if(this.classes[i] === classToDrop) { this.classes.splice(i, 1); } } } }) 32 Services - Specific Types - Stateful Singletons
  33. 33. app.value('grades', []); app.value('calculateGPA', function(grades) { // implementation return "4.0"; }) app.controller('userCtrl',function($scope, grades, calculateGPA) { $scope.GPA = calculateGPA(grades); }); 33 Services - Specific Types - Functions
  34. 34. • Services Syntax: module.service( 'serviceName', function ); Result: When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService(). • Factories Syntax: module.factory( 'factoryName', function ); Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory. • Providers Syntax: module.provider( 'providerName', function ); Result: When declaring providerName as an injectable argument you will be provided with ProviderFunction().$get(). The constructor function is instantiated before the $get method is called - ProviderFunction is the function reference passed to module.provider. 34 Services - Summary
  35. 35. • Purposes of directives piece of visible display that may or not be reusable, but whose functionality is encapsulated and an interface provided so that the widget can easily represent a piece of display and functionality of your app • Classic Error : In The javascript : myDirective (CamelCase) In the view : my-directive (snake case)  First thing to check in case of error : check the names  • Naming Convention: prefix : bc/bcsp ? A directive should be unique because Ajs doesn’t override, but stack. 35 Directives
  36. 36. JS: app.directive(‘bcHelloWorld', function() { return { restrict: 'E', replace: 'true', template: '<h3>Hello World!!</h3>' }; }); Html: <bc-hello-world/> 36 Directives
  37. 37. • restrict: 'E' => Element : <date-picker></date-picker> • restrict: ‘A' => Attributes: <input type="text" date-picker/> • restrict: 'C' => class : <input type="text" class="date-picker"/> • restrict: 'M' => comment : <!--directive:date-picker--> Combine possible, for example : restrict: 'AE‘ Html5 compliant : <input type="text" data-date-picker/> 37 Directives - restrict
  38. 38. • Template : inline • TemplateUrl : path to html file 38 Directives – template / templateUrl
  39. 39. True : <h3>Hello World!!</h3> False: <hello-world><h3>Hello World!!</h3></hello-world> 39 Directives – replace
  40. 40. app.directive('helloWorld', function() { return { restrict: 'AE', replace: true, template: '<p style="background-color:{{color}}">Hello World', link: function(scope, elem, attrs) { elem.bind('click', function() { elem.css('background-color', 'white'); scope.$apply(function() { scope.color = "white"; }); }); elem.bind('mouseover', function() { elem.css('cursor', 'pointer'); }); } }; 40 Directives – Link
  41. 41. It takes three arguments: • scope – The scope passed to the directive. In this case it’s the same as the parent controller scope. • elem – The jQLite (a subset of jQuery) wrapped element on which the directive is applied. If you have included jQuery in the HTML before AngularJS is included, this becomes jQuery wrapped instead of jQLite. As the element is already wrapped with jQuery/jQLite, there is no need to again wrap it inside $() for DOM manipulations. • attrs – An object representing normalized attributes attached to the element on which the directive is applied. For example, you can attach attributes in HTML like: <hello-world some-attribute></hello-world> and access it in the link function as attrs.someAttribute. 41 Directives – Link
  42. 42. return { restrict:'E', require: 'nameOfSiblingController' } Ability to require in a controller from another directive, Return null if the required isn’t here. Require on parent : return { restrict:'E', require: '^nameOfParentController' } 42 Directives – Require
  43. 43. 2 solutions : • put the functionality into the link function of the directive • create a controller and put that functionality into the controller (can be no inline to reuse it) controller: function($scope) { $scope.viewClassDetails = function(classToView) { // do something console.log('viewing details for ' + classToView.name); } <=> link: function(scope) { scope.viewClassDetails = function(classToView) { // do something console.log('viewing details for ' + classToView.name); } } 43 Directives - Controllers vs Link
  44. 44. Ask yourself “when do I want my code to run?” Before compilation? – Controller After compilation? – Link  Never condone putting DOM manipulation in an angular controller “Am I just doing template and scope things?” – goes into controller “Am I adding some coolbeans jquery library?” – goes in link http://jasonmore.net/angular-js-directives-difference-controller-link/ 44 Directives - Controllers vs Link
  45. 45. there are 3 ways for a directive to interface with a containing scope: 1. share the scope 2. create an inherited scope 3. create an isolated scope 1&2 : the directive simply has access to all the objects in the containing scope Stop !!!! What is the scope ?? 45 Directives - interfaces
  46. 46. In Angular, the scope is the magic. All binding happens through a scope, all interaction happens through a scope.  very important to understand Help to debug : chrome extension « AngularJS Batarang » 1. on top i have the root scope / ng-app correspond to the root scope 2. all scopes belong to exactly 1 Element 3. 1 scope <=> 1 ng-controller 46 Scope - Dealing with scope
  47. 47. 47 Scope - Dealing with scope
  48. 48. • By default 48 Scope - Sharing scope
  49. 49. app.directive('scInstructorCount', function() { return { scope: true, link: function(scope) { scope.instructorList.push({id:4, name: 'Professor Lockhart'}); scope.CurrentInstructorId = 22; } } }); Example : only the directive see the CurrentInstructorId 49 Scope - inherited scope
  50. 50. WARING EASY BUG !! how do you correctly bind an ngModel to a parent scope item => make sure there is a dot in the binding 50 Scope - inherited scope
  51. 51. app.directive('scInstructorCount', function() { return { restrict: 'A', replace: true, templateUrl: 'scInstructorCount.html', scope: { instructorList: '=', title: '=' }, link: function(scope) { scope.title = "My New Title"; } } }); <div sc-instructor-count instructor-list="instructorList" title="title" sc-new- instructor></div> 51 Scope - Isolating scope WARNING snake-case / camel- case Two way binding !
  52. 52. + : easy - : hidden dependencies - : put things in the parent useless for him, here only for the childs 52 Communicating between components Communicating with Inherited Scopes
  53. 53. • Use global bus: $rootScope.$broadcast("course:registered", course);  $scope.$on('course:registered', function(event, course) { $scope.notify('You have registered for ' + course.name); }) + : logic, responsability inside the ctrl - : add $rootscope to every listeners, a listener could cancel the event - : warning to the string name of the event 53 Communicating between components Communicating with Events
  54. 54. A service is a singleton so it’s the same for every body. + : business logic is in the right place - : more set-up work - : difficult to draw the line between display logic and business logic 54 Communicating between components Communicating with Services
  55. 55. I see dead brackets !!!! It happen more for classic website, not for SPA. Solution 1: ngCloak Need to add style in css : [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } We add the directive ngCloak on the place we want to hide before the binding ( not too high, to not display too much white space) 55 Avoiding FOUC Flash of Unstyled Content
  56. 56. Solution 2: ngBind <h1>{{name}}</h1>  <h1 ng-bind="name">&nbsp;</h1> But we still have a problem with ng-hide, which hide nothing until the binding, 56 Avoiding FOUC Flash of Unstyled Content
  57. 57. Solution 3: Waiting image <img src="spinner.gif" ng-hide="ready" style="width:400px" /> <div ng-cloak ng-show="ready" class="jumbotron">..</div> The « ready » variable is set to true when the data are loaded, 57 Avoiding FOUC Flash of Unstyled Content
  58. 58. old way : write Html, write Jquery to manipulate the DOM Angular Way: • Put declarative View Logic in the View • Don't put imperative logic in the view  imperative code belongs in the controller, declarative code belongs in the view Thinking about how to do something with the view might lead us down the wrong road Thinking declaratively,what we want to do is represent our state in our controller and then get the view to manipulate itself based on that state. The controler should not take control of the view but the view should listen to the scope !  clean code. 58 Thinking Declaratively
  59. 59. create custom HTML through directives  not only powerful, it is truly paradigm changing when it comes to web development your HTML turn a low-level description of the layout of a web page into a domain-specific language that describes the functionality of your application  Primary type to object !  HTML not only technic, it has to be readable ! 59 Directives as a DSL
  60. 60. • Inline controllers (only js) • Controllers and ngInclude (html) • Directives (js + html) 60 Breaking Down A Page into Components
  61. 61. • Manage deferred tasks (e.g. asynchronous tasks) • Methods – then(successCallback, errorCallback, notifyCallback): callback for successfully resolved promise, callback for error (optional), and notify (optionnal, see « deferred ») – catch(errorCallback): callback for error – finally(callback): callback for either success or error but with no data modification (?) • Promises can be chained. 61 Promises
  62. 62. • Creates and manipulates a promise • Methods: – resolve(value): ends the promise (success) with the given value – reject(reason): same but with an error – notify(value): updates promise without ending it • Promise : property that gives the associated promise object • $q (injectable) – create a deferred object: $q.defer() – Method “all”: Use to combine multiple promises into a single one (resolved when all promises are resolved; rejected when any promise is rejected), 62 Deferred
  63. 63. • Factory AngularJS to interact with RESTful APIs • Module: ‘ngResource’ • Basic usage: • Returns object with defaults methods: { 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} } • Possible to add custom methods with options (url, HTTP method, cache, …) 63 $resource
  64. 64. • Get the resource: myResource.get({userId: 1234}) • $resource “magic object”: Calling a $resource method returns immediately an empty response object. That object will be filled when the response is received. • This object has also a $promise property which is a promise that will be resolved when the response arrives • So both usages are possible: – $scope.myResources = myResource.get(…); => Simple. The view will display returned data when it’s available. – myResource.get(…).$promise().then([success], [error]); => More advanced. Manage loader image, errors, … 64 $resource (2)
  65. 65. • It’s an AngularJs service that simplifies requesting a RESTful API. • No $resource bugs (?) • It supports all HTTP methods. • It supports self-linking elements • It uses promises, instead of $resource ‘s “magic object”. – But there is still a “magic object” available (“$object” property) ;-) • Possible to extends API results (extendModel and extendCollection) • Configuration (global and/or by service) – setBaseUrl – setDefaultHttpFields – Response/request interceptors – etc 65 RestAngular
  66. 66. • Web API exemple: http://myapi/accounts/45/buildings/1234 • Using RestAngular : – Restangular.all('accounts') => “/accounts” route – No request sent – Restangular.all('accounts').getList() => Request the API and returns a promise for the list. – Restangular.one('accounts', 1234) => “/accounts/1234” route – No request sent – Restangular.one('accounts', 1234).get() => Request the API and returns a promise for the element. – Restangular.one('accounts', 123).one('buildings', 456).get() => Chaining methods to get that element (“/accounts/123/buildings/456”) • It’s also possible to call a specific URL: Restangular.allUrl('searches', 'http://google.com/‘); 66 RestAngular (2)
  67. 67. • same template for all js file: (function (undefined) { 'use strict'; … })(); include in the great SideWaffle visual studio extension : http://sidewaffle.com/ Here this the JavaScript IIFE template. • use JS Hint with Web Essentials for visual studio (http://vswebessentials.com/features/javascript) and customize the settings with the json provided at the end of this document.  check your messages in error list ! 67 Betclic Best practices - Javascript
  68. 68. • never create variable to get the module : avoid : var app = angular.module("sportWebApp"); app.controller('watheverCtrl').... recommended : angular.module("sportWebApp").controller('watheverCtrl').... • directive convention : use replace true use E for templating use A for behavior never use Class or Comment always use data-xxx to pass param to an isolated scope  W3C  ! 68 Betclic Best practices - AngularJs coding
  69. 69. • use $inject , to remove the [] inline • use named functions instead of passing anonymous function to get cleaner code, better readability, easier debug and reduces the nested callback code .controller('myCtrl',['$scope','toto',function ($scope,toto){ .... }])  .controller('myCtrl',myCtrl); myCtrl.$inject=['$scope','toto']; function myCtrl($scope,toto){ .... } 69 Betclic Best practices - AngularJs coding
  70. 70. • add comments for each js file , with this template /** * @desc [un casing name] that [display/filter/use for] [functionality detail] * @file [file name (no path)] * @example [example of using in html for directive/filter or in js for service] */ 70 Betclic Best practices - AngularJs coding
  71. 71. • naming convention : controller : file name : xxxCtrl.js object name : xxxCtrl service : file name : xxxSvc.js object name : xxxSvc directive : file name : [domaine/page prefix]xxxCtrl.js object name : bcsp[domaine/page prefix]xxxx (bcsp stand for betclic sport) example : evtCompetitionHeaderDir.js / bcspEvtCompetitionHeader using in the html example : <bcsp-evt-competition-header></bcsp-evt-competition-header> 71 Betclic Best practices - Naming , solution organization
  72. 72. • 'shared' folder at the root of the 'app' : all the common directives, service, filters etc ... [domaine/page prefix] is here the full name, ex : market/marketDir.js • Mirror the app to an app folder in the unit test project  a xxx.js file in the web app should have a xxxTest.js file in the Test project. • Single Responsibility , Rule of 1: Define 1 component per file. • Directives, Limit 1 Per File: Create one directive per file. Name the file for the directive. 72 Betclic Best practices - Naming , solution organization
  73. 73. 73 Conclusion
  74. 74. • http://blog.xebia.com/2013/09/01/differences-between-providers-in- angularjs/ • http://www.synbioz.com/blog/la_creation_de_service_avec_angularjs • http://www.frangular.com/2012/12/differentes-facons-de-creer-un-service- angularjs.html • http://lostechies.com/gabrielschenker/2014/02/26/angular-jspart-13- services/ • http://stackoverflow.com/questions/15666048/angular-js-service-vs- provider-vs-factory • http://sametmax.com/service-factory-et-provider-dans-angularjs/ • http://www.johnpapa.net/angular-style-guide/ 75 Reference Services
  75. 75. • http://mgonto.github.io/restangular-talk-with-image-right/#28 • http://www.ng-newsletter.com/posts/restangular.html • http://ath3nd.wordpress.com/2013/08/05/15/ • https://github.com/mgonto/restangular • http://ath3nd.wordpress.com/2013/08/05/15/ 76 Restangular
  76. 76. • Settings recommended : 77 .jshintrc
  77. 77. Find out more • On https://techblog.betclicgroup.com/
  78. 78. We want our Sports betting, Poker, Horse racing and Casino & Games brands to be easy to use for every gamer around the world. Code with us to make that happen. Look at all the challenges we offer HERE We are hiring ! Check our Employer Page Follow us on LinkedIn
  79. 79. About Us • Betclic Everest Group, one of the world leaders in online gaming, has a unique portfolio comprising various complementary international brands: Betclic, Everest, Bet-at-home.com, Expekt, Monte-Carlo Casino… • Through our brands, Betclic Everest Group places expertise, technological know-how and security at the heart of our strategy to deliver an on-line gaming offer attuned to the passion of our players. We want our brands to be easy to use for every gamer around the world. We’re building our company to make that happen. • Active in 100 countries with more than 12 million customers worldwide, the Group is committed to promoting secure and responsible gaming and is a member of several international professional associations including the EGBA (European Gaming and Betting Association) and the ESSA (European Sports Security Association).

×