AngularJS: Q&A

Piotr Kowalski

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?

Blog piecioshka.pl/blog
GitHub github.com/piecioshka
Twitter twitter.com/piecioshka
Soundcloud soundcloud.com/piecioshka

Book: AngularJS

Book: AngularJS

Book: AngularJS. Pierwsze Kroki.

Book: AngularJS. Pierwsze kroki

My private notes... let's go!

Book: AngularJS
Book: AngularJS

Law of Demeter

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

Book: AngularJS

Demo

I was created special project for test that:
Book: AngularJS

Demo

I was created special project for test that:
Book: AngularJS

Demo

I was created special project for test that:
Book: AngularJS
Book: AngularJS

More? Go go go!

Book: AngularJS. Pierwsze kroki
Book: AngularJS. Pierwsze kroki

Code Samples

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

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" }
        
Book: AngularJS. Pierwsze kroki

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
            });
        
Book: AngularJS. Pierwsze kroki
Book: AngularJS. Pierwsze kroki
Book: AngularJS. Pierwsze kroki
Book: AngularJS. Pierwsze kroki

Code Samples

            <!-- interpolation -->
            <span ng-cloak>{{ title }}</span>
             
            <!-- directive ng-bind -->
            <span ng-bind="title"></span>
        
Book: AngularJS. Pierwsze kroki

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>
        
Book: AngularJS. Pierwsze kroki

Code Samples

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

Demo

I was created special project for test that:
Book: AngularJS. Pierwsze kroki
Book: AngularJS. Pierwsze kroki
Book: AngularJS. Pierwsze kroki
Book: AngularJS. Pierwsze kroki
Book: AngularJS. Pierwsze kroki

Last but not least!

Book: AngularJS. Pierwsze kroki

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

Fork me on Github