AngularJS

Components in Angular 1.x

Posted on

Using TypeScript here:

isActionPossible(component) {
return this.someService.isActionPossible(component);
}

In Component (accessible in markup as “$ctrl.isActionPossible(item)”) above code cannot be changed to


isActionPossible = this.someService.isActionPossible;

as this will be broken in method someService.isActionPossible()

Advertisements

AngularJS – Problem z cachowaniem templatów *.html

Posted on Updated on

Problem nie rozwiązany, ale czasem wraca więc go opiszę.

Opis problemu

Pracuję na Visual Studio 2015. Mam angularową dyrektywę (directive), która posiada kod JS oraz plik powiedzmy “/app/directive.html”. Dyrektywa ta jest używana na moim głównym widoku (Index.cshtml, dla głównego kontrollera)
* uruchamiam aplikację i idę do adresu ‘/’ to widzę aktualne dane
* podmieniam coś w pliku “/app/directive.html”
* odświeżam ‘/’, nie widzę zmian w dyrektywie 😦
* wchodzę przeglądarką na adres “/app/directive.html”, widzę nową wersję
* odświeżam ‘/’, widzę zmiany w dyrektywie

NOTE: pisząć odświeżam myślę o twardym reload, Ctrl+R

A gdy problem nie występuję

Jest też sytuacja gdy od razu po zmianach pliku “/app/directive.html”, widzę zmiany po odświeżeniu ‘/’. Nie wiem jeszcze jak nie wiem dlaczego.

Możliwe rozwiązanie

Ma to “jakiś” związek z cachowanie plików html przez przeglądarkę i jeszcze dodatkowo przez silnik angulara. Nie reprodukuje mi się teraz problem ale następnym razem spróbuję skorzystać z ng-template https://docs.angularjs.org/api/ng/directive/script. i wrzucać moje derektywy w pliki *.cshtml. Nie testowane jeszcze – może nawet tak się nie da.

Lepsze możliwe rozwiązanie

Użyję tego: https://www.npmjs.com/package/gulp-angular-templatecache

JSFiddle na problemy z JavaScriptem, Angularem, TypeScriptem

Posted on Updated on

https://jsfiddle.net (i także wiele podobnych tooli/serwisów) jest edytorem w przeglądarce który pozwala odpalić nasz kod napisany w JavaScripcie. Takich tooli jest o wiele więcej dla różnych języków itp, ja skupie się na tym jednym i go opiszę, może są nawet lepsze alternatywy – nie wiem, widzę jednak, że jest najbardziej popularny na StackOverflow.

Składa się z 3 okienek gdzie wpisujemy nasz kod (html, JavaScript, css) oraz czwartego (output) w którym się uruchomi nasz kod:
jsfiddle example panes

Obecnie pozwala wybrać z kilku języków: JavaScript, CoffeeScript, JavaScript 1.7, Babel, TypeScript. Do tego kilkadziesiąt frameworków JS, z tego te bardziej popularne w kilku wersjach, np Angular jest w 4, a jQuery w ok. 20. To jest tylko takie ułatwienie, a nie ograniczenie. Dowolną bibliotekę można też dociągnąć tak jak includujemy każdy nowy scrypt w markupie html.

Debugowanie

Przyda się gdy coś “nie działa”

Najpierw samemu trzeba wyczerpać możliwości, bo często problem leży gdzieś u nas i widząć czysty kod, który działa w JSFiddle mamy pewność że to podejście działa tylko u nas czegoś jeszcze brakuje (gryzą sie zależności, czegoś brakuje, itp, itd). Jeśli już uruchomiliśmy w JSFiddle i nie działa tak jak powinno to wtedy mamy gotowy materiał na pytanie na StackOverflow. Nie możemy oczekiwać że obcy ludzie będą nam pomagać jeśli najpierw sami sobie nie pomogliśmy. Jeśli wrzucimy linka z kodem do uruchomienia na JSFiddle to każdy może na własne oczy zobaczyć co jest grane. I na przykład odpowiedzieć nam poprawioną wersją kodu.

Historia zmian

Nasz kod możemy wersjonować lub forkować, nawet bez zalogowania się.

Angular snippets

Posted on

Watching $scope variables

$scope.$watchCollection(function() { return $scope.productsInAccount; }, function (products) {
  //
});

$scope.$watchCollection('productsInAccount', function (products) {
  //
});

First is better as we have context (better for refactorings and code understanding).

AngularJS pitfall #2

Posted on

Nie działał routing (korzystam z ngRoute). Problemem podczas przekopiowania było to że ścieżki w definicji routingu musza zaczynać się od slasha.

angular.module('app', ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/admin/events/new', { // nie działało gdy było .when('admin/events/new'
                controller: 'EventsNewCtrl',
                templateUrl: '/app/Events/events-details.html',
            })

AngularJS pitfall #1

Posted on Updated on

Nazwy dyrektyw definiujemy Camel Casem:

myModule.directive('digitalPrinting', function () {
    return {
        restrict: 'E',
        templateUrl: 'digitalPrinting.html',
        scope: {
            digitalPrinting: '=',
        },
    };
});

natomiast w markupie używamy snake case (wszędzie w necie snake_case definiuje się z pokreśleniem, natomiast w książce o Angularze chodzi im o snake-case):

<digital-printing ></digital-printing>

Nie zauważyłem że dotyczy to również nazw paparetrów przekazywanych za pomocą atrybutów.

Przeklejałem “digitalPrinting” jako atrybut i dostawałem (VS automatycznie robi covercase na “digitalPrinting”:

<digital-printing digitalprinting="offer.digitalPrinting"></digital-printing>

Tu jednak również trzeba “wężyka”:

<digital-printing digital-printing="offer.digitalPrinting"></digital-printing>