Why AngularJs ?

• Single page application
  • no need to reload the page
  • faster, better
  • only API calls
• Powerfull framework from Google
• Easy data-Binding
• MVC / MVVM
• Clean DOM Manipulation
• End to end testing

Examples

AngularJS: Let's go

• Module
• Routing
• Controllers
• Templates
• Services
• Directives

Module

Creation de l'application

    myapp = angular.module 'myapp',
        'ng'
        'ui.router'
        'ui.bootstrap'
        'pascalprecht.translate'
        'ngBootstrap'
        'app.templates'

                    

Routing

$stateProvider

            myapp.config ($stateProvider, $urlRouterProvider) ->
                $stateProvider
                .state 'search',
                    url: '/search'
                    controller: 'SearchCtrl'
                    templateUrl: 'search/main.html'

               .state 'error',
                    url: '/error'
                    templateUrl: 'error.html'

               $urlRouterProvider.otherwise '/search'
                    

Controllers

    myapp.controller 'CashbackCtrl', ($scope, cashback, sponsorship) ->
        $scope.user_email = ""

        $scope.sendMail = () ->
            sponsorship.sendMail($scope.user_email)

        cashback.get (data) ->
            $scope.cashbacks = data
            return
            

Templates

        doctype html
        html(lang="en", ng-app="name-of-application")
            head
                title Store
                meta(charset="utf-8")
                link(rel="stylesheet", href="/css/app.css")
            body(ng-class="$state.current.name")
                header.main-header

            section.main-section
            main.container(ui-view)

            script(src="/js/vendor.js")
            script(src="/js/templates.js")
            script(src="/js/app.js")
            

Templates

    table.table
        tr
            th Room
            th Price
            th
        tr(ng-repeat='room in rooms')
            td {[{ room.name }]}
            td {[{ room.price  / 100 | currency }]}
            td
                button.btn.btn-primary(ng-click="share(room)")
                    i.fa.fa-share-alt
                |  Share

    a(ng-click="purchase()")
        button.btn.btn-success() {[{ 'Pay the selected rooms'|trans }]}
            

Services

Use services to organize and share code across your app. Make your controllers lighter!

    angular.module('myapp').factory 'cart', ($q, $http) ->
        add: (room) ->
            data =
                token: room.token
            $http.post('cart/', data)
            .success (data)->
                data
            .error (data, status)->
                console.log 'server returned '+status+' error code'

Directives

Use a directive for a DOM manipulation

    app.directive 'dateFormatter', ->
        require: 'ngModel'
        link: (scope, element, attrs, controller) ->
            controller.$formatters.push (value) ->
                return '' unless value?
                value.format 'DD/MM/YYYY'
            controller.$parsers.push (value) ->
                moment value

Let's see some code

Last tricks

• The official documentation : https://docs.angularjs.org/api
  Beware of Angular version !
• Angular Batarang (browser extension) to inspect scopes