AngularJS Samouczek => Rozpoczęcie pracy z AngularJS

Uwagi

AngularJS to platforma aplikacji internetowych zaprojektowana w celu uproszczenia tworzenia bogatych aplikacji po stronie klienta. Ta dokumentacja dotyczy Angular 1.x , poprzednika nowocześniejszego Angulara 2 lub zobacz dokumentację przepełnienia stosu dla Angulara 2 .

Wersje

Wersja	Data wydania
1.6.5	2017-07-03
1.6.4	31.03.2017
1.6.3	2017-03-08
1.6.2	2017-02-07
1.5.11	13.01.2017
1.6.1	23.12.2016
1.5.10	15.12.2016
1.6.0	08.12.2016
1.6.0-rc.2	24.11.2016
1.5.9	24.11.2016
1.6.0-rc.1	21.11.2016
1.6.0-rc.0	26.10.2016
1.2.32	2016-10-11
1.4.13	2016-10-10
1.2.31	2016-10-10
1.5.8	2016-07-22
1.2.30	2016-07-21
1.5.7	2016-06-15
1.4.12	2016-06-15
1.5.6	27.05.2016
1.4.11	27.05.2016
1.5.5	18.04.2016
1.5.4	14.04.2016
1.5.3	2016-03-25
1.5.2	19.03.2016
1.4.10	16.03.2016
1.5.1	16.03.2016
1.5.0	2016-02-05
1.5.0-rc.2	28.01.2016
1.4.9	21.01.2016
1.5.0-rc.1	16.01.2016
1.5.0-rc.0	2015-12-09
1.4.8	2015-11-20
1.5.0-beta.2	18.11.2015
1.4.7	30.09.2015
1.3.20	30.09.2015
1.2.29	30.09.2015
1.5.0-beta.1	30.09.2015
1.5.0-beta.0	17.09.2015
1.4.6	17.09.2015
1.3.19	17.09.2015
1.4.5	28.08.2015
1.3.18	19.08.2015
1.4.4	13.08.2015
1.4.3	2015-07-15
1.3.17	07.07.2015
1.4.2	07.07.2015
1.4.1	16.06.2015
1.3.16	2015-06-06
1.4.0	27.05.2015
1.4.0-rc.2	2015-05-12
1.4.0-rc.1	24.04.2015
1.4.0-rc.0	2015-04-10
1.3.15	17.03.2015
1.4.0-beta.6	17.03.2015
1.4.0-beta.5	24.02.2015
1.3.14	24.02.2015
1.4.0-beta.4	2015-02-09
1.3.13	2015-02-09
1.3.12	2015-02-03
1.4.0-beta.3	2015-02-03
1.3.11	27.01.2015
1.4.0-beta.2	27.01.2015
1.4.0-beta.1	2015-01-20
1.3.10	2015-01-20
1.3.9	2015-01-15
1.4.0-beta.0	14.01.2015
1.3.8	2014-12-19
1.2.28	16.12.2014
1.3.7	15.12.2014
1.3.6	2014-12-09
1.3.5	02.12.2014
1.3.4	25.11.2014
1.2.27	21.11.2014
1.3.3	18.11.2014
1.3.2	07.11.2014
1.3.1	2014-10-31
1.3.0	14.10.2014
1.3.0-rc.5	09.10.2014
1.2.26	03.10.2014
1.3.0-rc.4	02.10.2014
1.3.0-rc.3	24.09.2014
1.2.25	17.09.2014
1.3.0-rc.2	17.09.2014
1.2.24	10.09.2014
1.3.0-rc.1	10.09.2014
1.3.0-rc.0	30.08.2014
1.2.23	23.08.2014
1.3.0-beta.19	23.08.2014
1.2.22	2014-08-12
1.3.0-beta.18	2014-08-12
1.2.21	2014-07-25
1.3.0-beta.17	2014-07-25
1.3.0-beta.16	2014-07-18
1.2.20	11.07.2014
1.3.0-beta.15	11.07.2014
1.2.19	01.07.2014
1.3.0-beta.14	01.07.2014
1.3.0-beta.13	16.06.2014
1.3.0-beta.12	2014-06-14
1.2.18	2014-06-14
1.3.0-beta.11	2014-06-06
1.2.17	2014-06-06
1.3.0-beta.10	2014-05-24
1.3.0-beta.9	17.05.2014
1.3.0-beta.8	2014-05-09
1.3.0-beta.7	26.04.2014
1.3.0-beta.6	22.04.2014
1.2.16	2014-04-04
1.3.0-beta.5	2014-04-04
1.3.0-beta.4	28.03.2014
1.2.15	22.03.2014
1.3.0-beta.3	21.03.2014
1.3.0-beta.2	15.03.2014
1.3.0-beta.1	08.03.2014
1.2.14	01.03.2014
1.2.13	15.02.2014
1.2.12	08.02.2014
1.2.11	03.02.2014
1.2.10	25.01.2014
1.2.9	15.01.2014
1.2.8	10.01.2014
1.2.7	2014-01-03
1.2.6	2013-12-20
1.2.5	2013-12-13
1.2.4	06.12.2013
1.2.3	27.11.2013
1.2.2	22.11.2013
1.2.1	15.11.2013
1.2.0	08.11.2013
1.2.0-rc.3	14.10.2013
1.2.0-rc.2	2013-09-04
1.0.8	22.08.2013
1.2.0rc1	13.08.2013
1.0.7	22.05.2013
1.1.5	22.05.2013
1.0.6	04.04.2013
1.1.4	04.04.2013
1.0.5	2013-02-20
1.1.3	2013-02-20
1.0.4	23.01.2013
1.1.2	23.01.2013
1.1.1	27.11.2012
1.0.3	27.11.2012
1.1.0	04.09.2012
1.0.2	04.09.2012
1.0.1	25.06.2012
1.0.0	14.06.2012
v1.0.0rc12	2012-06-12
Wersja 1.0.0rc11	11.06.2012
Wersja 1.0.0rc10	24.05.2012
Wersja 1.0.0rc9	15.05.2012
Wersja 1.0.0rc8	07.05.2012
Wersja 1.0.0rc7	01.05.2012
Wersja 1.0.0rc6	21.04.2012
Wersja 1.0.0rc5	2012-04-12
Wersja 1.0.0rc4	05.04.2012
Wersja 1.0.0rc3	30.03.2012
Wersja 1.0.0rc2	21.03.2012
g3-v1.0.0rc1	14.03.2012
g3-v1.0.0-rc2	16.03.2012
1.0.0rc1	14.03.2012
0.10.6	17.01.2012
0.10.5	08.11.2011
0.10.4	2011-10-23
0.10.3	14.10.2011
0.10.2	08.10.2011
0.10.1	2011-09-09
0.10.0	02.09.2011
0.9.19	21.08.2011
0.9.18	2011-07-30
0.9.17	30.06.2011
0.9.16	2011-06-08
0.9.15	2011-04-12
0.9.14	01.04.2011
0.9.13	14.03.2011
0.9.12	2011-03-04
0.9.11	2011-02-09
0.9.10	27.01.2011
0,9.9	14.01.2011
0,9,7	2010-12-11
0.9.6	07.12.2010
0,9,5	25.11.2010
0.9.4	19.11.2010
0.9.3	2010-11-11
0.9.2	2010-11-03
0.9.1	27.10.2010
0.9.0	21.10.2010

Pierwsze kroki

Utwórz nowy plik HTML i wklej następującą treść:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello, Angular</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
  <label>Name</label>
  <input ng-model="name" />
  <span>Hello, {{ name }}!</span>
  <p ng-bind="name"></p>
</body>
</html>

Demo na żywo

Po otwarciu pliku w przeglądarce zobaczysz pole wprowadzania, a następnie tekst Hello, World! . Edycja wartości na wejściu spowoduje aktualizację tekstu w czasie rzeczywistym, bez konieczności odświeżania całej strony.

Wyjaśnienie:

Załaduj środowisko Angular z sieci dostarczania treści.

<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

Zdefiniuj dokument HTML jako aplikację Angular dzięki dyrektywie ng-app
```
<html ng-app>
```
Zainicjuj zmienną name za pomocą ng-init
```
<body ng-init=" name = 'World' ">
```
Pamiętaj, że ng-init powinien być używany wyłącznie w celach demonstracyjnych i testowych. Podczas budowania rzeczywistej aplikacji administratorzy powinni zainicjować dane.
Powiąż dane z modelu z widokiem na kontrolkach HTML. Powiązanie <input> z właściwością name pomocą ng-model
```
<input ng-model="name" />
```
Wyświetl zawartość z modelu za pomocą podwójnych nawiasów klamrowych {{ }}
```
<span>Hello, {{ name }}</span>
```
Innym sposobem wiązania właściwości name jest użycie ng-bind zamiast kierownicy "{{ }}"
```
 <span ng-bind="name"></span>
```

Ostatnie trzy kroki ustanawiają dwukierunkowe wiązanie danych . Zmiany wprowadzone na wejściu aktualizują model , co znajduje odzwierciedlenie w widoku .

Istnieje różnica między używaniem kierownicy a ng-bind . Jeśli korzystasz z kierownicy, możesz zobaczyć rzeczywiste Hello, {{name}} podczas ładowania strony przed rozstrzygnięciem wyrażenia (przed załadowaniem danych), a jeśli użyjesz ng-bind , pokaże dane tylko wtedy, gdy nazwa został rozwiązany. Alternatywnie można użyć dyrektywy ng-cloak aby zapobiec wyświetlaniu kierownicy przed jej skompilowaniem.

Prezentacja wszystkich popularnych konstrukcji kątowych

Poniższy przykład pokazuje typowe konstrukcje AngularJS w jednym pliku:

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <style>.started { background: gold; }</style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
      function MyDataService() {
        return {
          getWorlds: function getWorlds() {
            return ["this world", "another world"];
          }
        };
      }

      function DemoController(worldsService) {
        var vm = this;
        vm.messages = worldsService.getWorlds().map(function(w) {
          return "Hello, " + w + "!";
        });
      }

      function startup($rootScope, $window) {
        $window.alert("Hello, user! Loading worlds...");
        $rootScope.hasStarted = true;
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .service("worldsService", [MyDataService])
        .controller("demoController", ["worldsService", DemoController])
        .config(function() {
          console.log('configuring application');
        })
        .run(["$rootScope", "$window", startup]);
    </script>
  </head>
  <body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul>
        <li ng-repeat="msg in vm.messages">{{ msg }}</li>
      </ul>
    </div>
  </body>
</html>

Każda linia pliku jest wyjaśniona poniżej:

Demo na żywo

ng-app="myDemoApp" , dyrektywa ngApp, która ładuje aplikację i mówi angularowi , że element DOM jest kontrolowany przez określony angular.module nazwie "myDemoApp" ;
<script src="angular.min.js"> to pierwszy krok w ładowaniu biblioteki AngularJS ;

Deklarowane są trzy funkcje ( MyDataService , DemoController i startup ), które są używane (i wyjaśnione) poniżej.

angular.module(...) używany z tablicą jako drugi argument tworzy nowy moduł. Ta tablica służy do dostarczania listy zależności modułów. W tym przykładzie wywołujemy łańcuch wywołań funkcji module(...) ;
.service(...) tworzy usługę kątową i zwraca moduł do łączenia;
.controller(...) tworzy kontroler kątowy i zwraca moduł do łączenia;
.config(...) Użyj tej metody do zarejestrowania pracy, którą należy wykonać przy ładowaniu modułu.
.run(...) zapewnia, że kod jest uruchamiany podczas uruchamiania i przyjmuje jako parametr tablicę elementów. Ta metoda służy do rejestrowania pracy, która powinna zostać wykonana po zakończeniu ładowania wtryskiwacza przez wszystkie moduły.
- pierwszy element informuje Angulara, że funkcja startup wymaga wstrzyknięcia $rootScope usługi $rootScope jako argumentu;
- drugi element informuje Angulara, że funkcja startup wymaga wstrzyknięcia wbudowanej usługi $window jako argumentu;
- ostatni element w tablicy, startup , jest faktyczną funkcją, która ma być uruchamiana podczas uruchamiania;
ng-class to dyrektywa ngClass, która ustawia class dynamiczną, aw tym przykładzie hasStarted wykorzystuje hasStarted na $rootScope
ng-cloak to dyrektywa, która ma zapobiegać wyświetlaniu krótkiego szablonu html Angular (np. „ {{ msg }} ”), zanim Angular w pełni załaduje aplikację.
ng-controller to dyrektywa, która prosi Angulara o utworzenie nowego kontrolera o określonej nazwie w celu zaaranżowania tej części DOM;
ng-repeat to dyrektywa, która umożliwia iterację Angulara nad kolekcją i klonowanie szablonu DOM dla każdego elementu;
{{ msg }} pokazuje interpolację : renderowanie na miejscu części zakresu lub kontrolera;

Znaczenie zakresu

Ponieważ Angular używa HTML do rozszerzenia strony internetowej i zwykłego Javascript do dodania logiki, ułatwia tworzenie strony internetowej za pomocą ng-app , ng-kontrolera i niektórych wbudowanych dyrektyw, takich jak ng-if , ng-repeat itp. Dzięki nowej składni kontrolera , nowi użytkownicy Angulara mogą dołączać funkcje i dane do swojego kontrolera zamiast używać $scope .

Jednak prędzej czy później ważne jest, aby zrozumieć, czym dokładnie jest ten $scope . Będzie się pojawiał w przykładach, dlatego ważne jest, aby mieć trochę zrozumienia.

Dobrą wiadomością jest to, że jest to prosta, ale potężna koncepcja.

Podczas tworzenia:

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>

Gdzie mieszka nazwa ?

Odpowiedź jest taka, że Angular tworzy obiekt $rootScope . Jest to po prostu zwykły obiekt Javascript, więc nazwa jest właściwością obiektu $rootScope :

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });

I podobnie jak w przypadku globalnego zakresu w JavaScript, zwykle nie jest dobrym pomysłem dodawanie elementów do globalnego zakresu lub $rootScope .

Oczywiście przez większość czasu tworzymy kontroler i umieszczamy w nim wymaganą funkcjonalność. Ale kiedy tworzymy kontroler, Angular robi magię i tworzy obiekt $scope dla tego kontrolera. Jest to czasami określane jako zasięg lokalny .

Utworzenie następującego kontrolera:

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>

umożliwi dostęp do zasięgu lokalnego za pomocą parametru $scope .

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });

Kontroler bez parametru $scope może po prostu z jakiegoś powodu go nie potrzebować. Należy jednak pamiętać, że nawet przy składni kontrolera kontroler lokalny istnieje.

Ponieważ $scope jest obiektem JavaScript, Angular magicznie konfiguruje go do prototypowego dziedziczenia po $rootScope . I jak możesz sobie wyobrazić, może istnieć łańcuch zakresów. Na przykład możesz utworzyć model w kontrolerze nadrzędnym i dołączyć go do zakresu kontrolera nadrzędnego jako $scope.model .

Następnie za pośrednictwem łańcucha prototypów kontroler podrzędny może uzyskać lokalny dostęp do tego samego modelu za pomocą $scope.model .

Na początku nic z tego nie jest oczywiste, ponieważ tylko Angular robi swoją magię w tle. Ale zrozumienie $scope jest ważnym krokiem w poznaniu, jak działa Angular.

Najprostszy możliwy kątowy świat Hello.

Angular 1 jest sercem kompilatora DOM. Możemy przekazać go HTML jako szablon lub zwykłą stronę internetową, a następnie skompilować aplikację.

Możemy powiedzieć Angularowi, aby traktował region strony jako wyrażenie, używając składni stylu kierownicy {{ }} . Wszystko między nawiasami klamrowymi zostanie skompilowane w następujący sposób:

{{ 'Hello' + 'World' }}

Spowoduje to wygenerowanie:

HelloWorld

ng-app

Mówimy Angularowi, która część naszego DOM ma być traktowana jako szablon główny za pomocą dyrektywy ng-app . Dyrektywa jest niestandardowym atrybutem lub elementem, z którym kompilator szablonów Angular wie, jak sobie radzić. Dodajmy teraz dyrektywę ng-app:

<html>
  <head>
    <script src="/angular.js"></script>
  </head>
  <body ng-app>
    {{ 'Hello' + 'World' }}
  </body>
</html>

Powiedziałem teraz elementowi ciała, aby był szablonem głównym. Wszystko w nim zostanie skompilowane.

Dyrektywy

Dyrektywy są dyrektywami kompilatora. Rozszerzają możliwości kompilatora Angular DOM. Dlatego Misko , twórca Angulara, opisuje Angulara jako:

„Czym byłaby przeglądarka, gdyby została zbudowana dla aplikacji internetowych.

Dosłownie tworzymy nowe atrybuty i elementy HTML, a Angular kompiluje je w aplikację. ng-app to dyrektywa, która po prostu włącza kompilator. Inne dyrektywy obejmują:

ng-click , który dodaje moduł obsługi kliknięć,
ng-hide , który warunkowo ukrywa element, oraz
<form> , który dodaje dodatkowe zachowanie do standardowego elementu formularza HTML.

Angular zawiera około 100 wbudowanych dyrektyw, które pozwalają wykonywać najczęstsze zadania. Możemy również pisać własne, a będą one traktowane w taki sam sposób, jak wbudowane dyrektywy.

Budujemy aplikację Angular z szeregu dyrektyw połączonych przewodowo z HTML.

Minification in Angular

Co to jest Minifikacja?

Jest to proces usuwania wszystkich niepotrzebnych znaków z kodu źródłowego bez zmiany jego funkcjonalności.

Normalna składnia

Jeśli użyjemy normalnej składni kątowej do napisania kontrolera, to po zminimalizowaniu naszych plików spowoduje to uszkodzenie naszej funkcjonalności.

Kontroler (przed minimalizacją):

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});

Po użyciu narzędzia do minimalizacji zostanie ono zminimalizowane jak poniżej.

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})

Tutaj minimalizacja usunęła niepotrzebne spacje i zmienną $ scope z kodu. Kiedy więc użyjemy tego zminimalizowanego kodu, nie będzie on niczego drukować na widoku. Ponieważ $ scope jest kluczową częścią między kontrolerem a widokiem, która jest teraz zastąpiona małą zmienną „e”. Kiedy więc uruchomisz aplikację, pojawi się błąd zależności „Nie” od nieznanego dostawcy.

Istnieją dwa sposoby przypisywania kodu do informacji o nazwie usługi, które są bezpieczne dla minimalizacji:

Wewnętrzna składnia adnotacji

var app = angular.module('mainApp', []);    
app.controller('FirstController', ['$scope', function($scope) {
    $scope.message = 'Hello World !'; 
}]);

$ inject Składnia adnotacji właściwości

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
    $scope.message = 'Hello World !'; 
}

var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);

Po minifikacji ten kod będzie

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);

Tutaj angular będzie traktować zmienną „a” jako $ scope i wyświetli wynik jako „Hello World!”.

Samouczki wideo dla początkujących AngularJS

Istnieje wiele dobrych samouczków wideo dla frameworka AngularJS na egghead.io

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

AngularJS Samouczek
Rozpoczęcie pracy z AngularJS

Szukaj…