AngularJSRozpoczę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

Samouczki wideo dla początkujących AngularJS

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

wprowadź opis zdjęcia tutaj

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:

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

    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
     
  2. Zdefiniuj dokument HTML jako aplikację Angular dzięki dyrektywie ng-app

    <html ng-app>
     
  3. 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.

  4. 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" />
     
  5. Wyświetl zawartość z modelu za pomocą podwójnych nawiasów klamrowych {{ }}

    <span>Hello, {{ name }}</span>
     
  6. 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.

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!”.

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

  1. 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" ;
  2. <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.

  1. 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(...) ;

  2. .service(...) tworzy usługę kątową i zwraca moduł do łączenia;

  3. .controller(...) tworzy kontroler kątowy i zwraca moduł do łączenia;

  4. .config(...) Użyj tej metody do zarejestrowania pracy, którą należy wykonać przy ładowaniu modułu.

  5. .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;
  6. ng-class to dyrektywa ngClass, która ustawia class dynamiczną, aw tym przykładzie hasStarted wykorzystuje hasStarted na $rootScope

  7. 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ę.

  8. ng-controller to dyrektywa, która prosi Angulara o utworzenie nowego kontrolera o określonej nazwie w celu zaaranżowania tej części DOM;

  9. ng-repeat to dyrektywa, która umożliwia iterację Angulara nad kolekcją i klonowanie szablonu DOM dla każdego elementu;

  10. {{ 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.