Windows 8 App z wykorzystaniem Angulara

Pewien czas temu postanowiłem przeanalizować swoją zawodową listę TODO. Z przykrością zauważyłem, że pomimo dużej rotacji jest na niej jedna rzecz, która wisi już od pewnego czasu. Zrozumiałem, że mniej lub bardziej świadomie unikam tej pozycji. Mogę zrobić wszystko tylko nie to. Tym czymś był JavaScript wraz z wybranym frameworkiem. Postanowiłem, że nie będę robił niczego innego dopóki nie zacznę tej pozycji. Ponieważ jestem człowiekiem, który jak sobie coś postanowi to już nie ma przeproś to … przez pewien czas niczego nie robiłem. Nie wiem skąd taka niechęć do JavaScriptu. Może to pozostałość czasów gdy o JS mówiło się jako zabawce służącej wyłącznie zwiększeniu responsywności stron www (tak kiedyś mnie uczono nic nie poradzę)? Gdy widząc, że metoda na przetrzymanie nie przynosi rezultatów spróbowałem podstępu. Postanowiłem napisać aplikację dla Windows 8 z wykorzystaniem JavaScriptu HTML i CSS. Jak się okazało był to strzał w dziesiątkę (ale tylko dlatego, że sprawiało mi to problemy).

Wybór frameworka

Tutaj jeszcze mój wewnętrzny leń próbował coś opóźnić. Na szczęście szybko go spacyfikowałem. Stwierdziłem, że nie ma sensu dłużej zastanawiać się, który framework wybrać gdyż na razie chciałem zbudować prostą aplikację. Szybki research wśród znajomych, później przeczytany post na stronie Bartka Dybowskiego i zapadła decyzja aby postawić na Angulara. Dlaczego właśnie Angular? W sumie to nie wiem, ale w momencie wyboru było to nieistotne. Liczyło się tylko jedno: kodować.

Pierwszy program

Skoro wybór frameworka mamy już z głowy czas wreszcie coś napisać. Tworzę więc nowy projekt w Visual Studio. Z Templatów wybieram Other Language następnie JavaScript => WindowsStore a na końcu BlankApp (muszę jeszcze tylko uzyskać licencję developerską, ale to żaden problem).
FirstAngularJsProject
Ponieważ już trochę czytałem na ten temat to wiem, że trzeba dodać odwołanie do Angulara

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>

Wszystko fajnie to teraz odpalamy nasz program. I niby wszystko się odpala i działa tylko, że w JavaScript Console pojawił się komunikat o takiej oto treści.

APPHOST9601: Nie można załadować identyfikatora <https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js>. Aplikacja nie może załadować zdalnej zawartości sieci Web w kontekście lokalnym.
File: default.html

No ale przecież wszystko działa (tzn. wyświetla się statyczne Hello World!). Niezrażony olewam błąd. Zatrzymuję proces debugowania w Visual Studio i dodaję prostą funkcjonalność. Chcę aby program przywitał się z osobą, której imię wprowadzimy. Nic trudnego myślę

<div ng-controller="MainCtrl">
    <p>Enter you name:</p>
    <input ng-model="name" type="text" />
    <p>Hello {{name}}!</p>
</div>

Dla tych, którzy nie znają Angulara (jest ktoś poza mną?):

  • ng-controller=”MainCtrl” zadeklarowanie że w wybranym zakresie (tutaj div) będziemy korzystać z MainCtrl
  • ng-model=”name” bindowanie do zmiennej name z modelu
  • {{name}} użyj w tym miejscu wartość zmiennej name z modelu

Poza tym konieczne jest umieszczenie dyrektywy ng-app, za pomocą której określimy, że mamy do czynienia z aplikacją w Angularze. Jej umiejscowienie również jest istotne ponieważ określa jej zasięg np.

<html  ng-app="HelloWorldApp">

Następnie tworzę sobie plik js z moim kontrolerem

var myApp = angular.module('HelloWorldApp');

myApp.controller('MainrCtrl', function ($scope) {
});

Czyli wszystko jest mam aplikację HelloWorldApp, która zawiera kontroler MainrCtrl. Plik ze skryptem jest podpięty do strony więc wszystko powinno grać. Przy czym powinno to właściwe słowo.

Problemy, problemy i jeszcze raz problemy

Builduje moją aplikację, następnie ją odpalam i już na starcie widzę piękny komunikat:
AngularFirstError
No ale jak przecież wszystko jest jak należy wszystko zrobione zgodnie z moją najlepszą wiedzą (a tak przynajmniej wtedy sądziłem). W akcie desperacji odpalam jeszcze stronę html, która jest pierwszą stroną mojej aplikacji a ona działa. Zdezorientowany przypomniałem sobie owcześniej zlekceważonym błędzie chwilka myślenia i jest. Zamiast pobierać każdorazowo angulara z serwera ściągam go do mojego projektu i zmieniam referencje

<script src="./js/angular.min.js"></script>

No jestem z siebie dumny. Otwieram piwo i uruchamiam mój projekt. Starego błędu już nie ma. Jest za to nowy (lecą takie bluzgi, o których znajomość się nie podejrzewałem)
AngularSecondError
Sprawdzam jeszcze czy odpala się html (bez zaskoczenia wszystko ok). Jeszcze raz czytam opis błędu Nie można dodać zawartości dynamicznej. Więc może coś zmieńmy w tym kodzie w końcu dostęp jest do niego otwarty. Tylko że ściągnąłem wersje Minified. Ściągam więc wersję nieskompresowaną i odnajduje funkcję powodującą błąd:

prepend: function(element, node) {
    if (element.nodeType === 1) {
        var index = element.firstChild;
        forEach(new JQLite(node), function(child){
            element.insertBefore(child, index);
        });
    }
},

na szczęście wystarczyło zmienić na

prepend: function(element, node) {
    if (element.nodeType === 1) {
        var index = element.firstChild;
        forEach(new JQLite(node), function(child){
            MSApp.execUnsafeLocalFunction(function () {
                element.insertBefore(child, index);
            });
        });
    }
},

Podsumowanie

Teraz wreszcie wszystko gra. Aplikacja jest “szalenie” skomplikowana, ale przynajmniej działa. Ponieważ zachciało mi się zrobić tą aplikację jako WindowsStore App to natknąłem się na problemy, których normalnie bym nie miał, ale przynajmniej przełamałem jakąś niewidzialną do tej pory barierę. Czas dalej zgłębiać Angulara (póki noc młoda).

3 thoughts on “Windows 8 App z wykorzystaniem Angulara

  1. Pingback: dotnetomaniak.pl
  2. Polecam zamiast blank app wybrać Navigation app. Stworzy nam się aplikacja z jednym prostym widokiem ale dostaniemy już gotowa strukturę dokumentów i wszystko przygotowane na nawigacje między stronami 🙂

Comments are closed.