AngularJS: Q&A

Who am I?

Kierownik Działu Aplikacji Webowych

Cyfrowy Polsat, Warsaw

JavaScript Ninja. Mac lover. Open source fan.
Organizer WarsawJS

"Kto chce szuka sposobu, kto nie chce szuka powodu."

Piotr Kowalski

JavaScript Ninja

Where am I?

piecioshka.pl/blog

github.com/piecioshka

twitter.com/piecioshka

soundcloud.com/piecioshka

Book: AngularJS

Book: AngularJS. Pierwsze Kroki.

My private notes... let's go!

Law of Demeter

Object itself
Method's parameters
Any objects created/instantiated within m
Object's direct component objects
A global variable, accessible by Object, in the scope of method

Reference: https://en.wikipedia.org/wiki/Law_of_Demeter

Demo

I was created special project for test that:

https://github.com/piecioshka/test-angular-update-model-and-view

Demo

I was created special project for test that:

https://github.com/piecioshka/test-angular-directive-execution-order

Demo

I was created special project for test that:

https://github.com/piecioshka/test-angular-un-register-watch

More? Go go go!

Code Samples

            $scope.title = 'Function';
             
            // Mozilla Firefox support Arrow Function natively.
            setTimeout(() => {
                $scope.title = 'Arrow Function?';
            }, 1000);

Code Samples

            // Controller
            $scope.dataStructure = { foo: 'bar' };
             
            // View
            <span ng-bind="dataStructure"></span>
            {{ dataStructure }}
            {{ dataStructure | json }}

Code Samples: Results

            // View (compiled)
            [object Object]
            {"foo":"bar"}
            { "foo": "bar" }

Code Samples: Use other controller

            mod.controller('HelperController', function ($scope) {
                $scope.helper = 1;
            });
            mod.controller('DependencyController', function ($scope, $controller) {
                var $newScope = $scope.$new();
                $controller('HelperController', {
                    $scope: $newScope
                });
                console.log($newScope.helper); // 1
            });

Code Samples

            <!-- interpolation -->
            <span ng-cloak>{{ title }}</span>
             
            <!-- directive ng-bind -->
            <span ng-bind="title"></span>

Code Samples

            <ng-switch on="foo">
                <span ng-switch-when="bar">Bar</span>
                <span ng-switch-when="baz">Baz</span>
                <span ng-switch-when="abc">Abc</span>
                <span ng-switch-default>...</span>
            </ng-switch>

Code Samples

            <body ng-init="cut = false;">
                <div ng-cut="cut = true">
                    Lorem ipsum...
                </div>
                Cut? {{ cut }}
            </body>

Demo

I was created special project for test that:

https://github.com/piecioshka/test-angular-disable-watchers

Last but not least!

Thanks!

Links

Slides: https://github.com/piecioshka/slides/angularjs-q-and-a
Post about AngularJS training:: http://piecioshka.pl/blog/2015/06/27/szkolenie-angularjs-podstawy-relacja-live.html
My private projects for testing AngularJS (7):: https://github.com/search?q=user:piecioshka+angular