AngularJS Zelfstudie => Aan de slag met AngularJS

Opmerkingen

AngularJS is een webapplicatiekader ontworpen om de ontwikkeling van rijke client-side applicaties te vereenvoudigen. Deze documentatie is voor Angular 1.x , de voorloper van de modernere Angular 2 of zie de Stack Overflow-documentatie voor Angular 2 .

versies

Versie	Publicatiedatum
1.6.5	2017/07/03
1.6.4	2017/03/31
1.6.3	2017/03/08
1.6.2	2017/02/07
1.5.11	2017/01/13
1.6.1	2016/12/23
1.5.10	2016/12/15
1.6.0	2016/12/08
1.6.0-rc.2	2016/11/24
1.5.9	2016/11/24
1.6.0-rc.1	2016/11/21
1.6.0-rc.0	2016/10/26
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	2016/05/27
1.4.11	2016/05/27
1.5.5	2016/04/18
1.5.4	2016/04/14
1.5.3	2016/03/25
1.5.2	2016/03/19
1.4.10	2016/03/16
1.5.1	2016/03/16
1.5.0	2016/02/05
1.5.0-rc.2	2016/01/28
1.4.9	2016/01/21
1.5.0-rc.1	2016/01/16
1.5.0-rc.0	2015/12/09
1.4.8	2015/11/20
1.5.0-beta.2	2015/11/18
1.4.7	2015/09/30
1.3.20	2015/09/30
1.2.29	2015/09/30
1.5.0-beta.1	2015/09/30
1.5.0-beta.0	2015/09/17
1.4.6	2015/09/17
1.3.19	2015/09/17
1.4.5	2015/08/28
1.3.18	2015/08/19
1.4.4	2015/08/13
1.4.3	2015/07/15
1.3.17	2015/07/07
1.4.2	2015/07/07
1.4.1	2015/06/16
1.3.16	2015/06/06
1.4.0	2015/05/27
1.4.0-rc.2	2015/05/12
1.4.0-rc.1	2015/04/24
1.4.0-rc.0	2015/04/10
1.3.15	2015/03/17
1.4.0-beta.6	2015/03/17
1.4.0-beta.5	2015/02/24
1.3.14	2015/02/24
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	2015/01/27
1.4.0-beta.2	2015/01/27
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	2015/01/14
1.3.8	2014/12/19
1.2.28	2014/12/16
1.3.7	2014/12/15
1.3.6	2014/12/09
1.3.5	2014/12/02
1.3.4	2014/11/25
1.2.27	2014/11/21
1.3.3	2014/11/18
1.3.2	2014/11/07
1.3.1	2014/10/31
1.3.0	2014/10/14
1.3.0-rc.5	2014/10/09
1.2.26	2014/10/03
1.3.0-rc.4	2014/10/02
1.3.0-rc.3	2014/09/24
1.2.25	2014/09/17
1.3.0-rc.2	2014/09/17
1.2.24	2014/09/10
1.3.0-rc.1	2014/09/10
1.3.0-rc.0	2014/08/30
1.2.23	2014/08/23
1.3.0-beta.19	2014/08/23
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	2014/07/11
1.3.0-beta.15	2014/07/11
1.2.19	2014/07/01
1.3.0-beta.14	2014/07/01
1.3.0-beta.13	2014/06/16
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	2014/05/17
1.3.0-beta.8	2014/05/09
1.3.0-beta.7	2014/04/26
1.3.0-beta.6	2014/04/22
1.2.16	2014/04/04
1.3.0-beta.5	2014/04/04
1.3.0-beta.4	2014/03/28
1.2.15	2014/03/22
1.3.0-beta.3	2014/03/21
1.3.0-beta.2	2014/03/15
1.3.0-beta.1	2014/03/08
1.2.14	2014/03/01
1.2.13	2014/02/15
1.2.12	2014/02/08
1.2.11	2014/02/03
1.2.10	2014/01/25
1.2.9	2014/01/15
1.2.8	2014/01/10
1.2.7	2014/01/03
1.2.6	2013/12/20
1.2.5	2013/12/13
1.2.4	2013/12/06
1.2.3	2013/11/27
1.2.2	2013/11/22
1.2.1	2013/11/15
1.2.0	2013/11/08
1.2.0-rc.3	2013/10/14
1.2.0-rc.2	2013/09/04
1.0.8	2013/08/22
1.2.0rc1	2013/08/13
1.0.7	2013/05/22
1.1.5	2013/05/22
1.0.6	2013/04/04
1.1.4	2013/04/04
1.0.5	2013/02/20
1.1.3	2013/02/20
1.0.4	2013/01/23
1.1.2	2013/01/23
1.1.1	2012/11/27
1.0.3	2012/11/27
1.1.0	2012/09/04
1.0.2	2012/09/04
1.0.1	2012-06-25
1.0.0	2012-06-14
v1.0.0rc12	2012-06-12
v1.0.0rc11	2012-06-11
v1.0.0rc10	2012-05-24
v1.0.0rc9	2012-05-15
v1.0.0rc8	2012-05-07
v1.0.0rc7	2012-05-01
v1.0.0rc6	2012-04-21
v1.0.0rc5	2012-04-12
v1.0.0rc4	2012-04-05
v1.0.0rc3	2012-03-30
v1.0.0rc2	2012-03-21
g3-v1.0.0rc1	2012-03-14
g3-v1.0.0-RC2	2012-03-16
1.0.0rc1	2012-03-14
0.10.6	2012-01-17
0.10.5	2011-11-08
0.10.4	2011-10-23
0.10.3	2011-10-14
0.10.2	2011-10-08
0.10.1	2011-09-09
0.10.0	2011-09-02
0.9.19	2011-08-21
0.9.18	2011-07-30
0.9.17	2011-06-30
0.9.16	2011-06-08
0.9.15	2011-04-12
0.9.14	2011-04-01
0.9.13	2011-03-14
0.9.12	2011-03-04
0.9.11	2011-02-09
0.9.10	2011-01-27
0.9.9	2011-01-14
0.9.7	2010-12-11
0.9.6	2010-12-07
0.9.5	2010-11-25
0.9.4	2010-11-19
0.9.3	2010-11-11
0.9.2	2010-11-03
0.9.1	2010-10-27
0.9.0	2010-10-21

Ermee beginnen

Maak een nieuw HTML-bestand en plak de volgende inhoud:

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

Live demonstratie

Wanneer u het bestand met een browser opent, ziet u een invoerveld gevolgd door de tekst Hello, World! . Als u de waarde in de invoer bewerkt, wordt de tekst in realtime bijgewerkt, zonder dat de hele pagina hoeft te worden vernieuwd.

Uitleg:

Laad het Angular-framework van een Content Delivery Network.

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

Definieer het HTML-document als een hoektoepassing met de ng-app richtlijn
```
<html ng-app>
```
Initialiseer de name variabele met behulp van ng-init
```
<body ng-init=" name = 'World' ">
```
Merk op dat ng-init alleen voor demonstratieve en testdoeleinden mag worden gebruikt. Bij het bouwen van een daadwerkelijke toepassing moeten controllers de gegevens initialiseren.
Bind gegevens van het model aan de weergave op HTML-besturingselementen. Bind een <input> naar de name pand met ng-model
```
<input ng-model="name" />
```
Inhoud van het model weergeven met dubbele accolades {{ }}
```
<span>Hello, {{ name }}</span>
```
Een andere manier om de eigenschap name ng-bind is door ng-bind plaats van het stuur "{{ }}"
```
 <span ng-bind="name"></span>
```

De laatste drie stappen bepalen de bidirectionele gegevensbinding . Wijzigingen die in de invoer zijn aangebracht, werken het model bij , wat wordt weerspiegeld in de weergave .

Er is een verschil tussen het gebruik van het stuur en ng-bind . Als u het stuur gebruikt, ziet u mogelijk de werkelijke Hello, {{name}} wanneer de pagina wordt geladen voordat de uitdrukking wordt opgelost (voordat de gegevens worden geladen), terwijl als u ng-bind , de gegevens alleen worden weergegeven wanneer de naam is opgelost. Als alternatief kan de richtlijn ng-cloak worden gebruikt om te voorkomen dat het stuur wordt weergegeven voordat het wordt gecompileerd.

Presentatie van alle gebruikelijke hoekige constructies

Het volgende voorbeeld toont veelgebruikte AngularJS-constructies in één bestand:

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

Elke regel van het bestand wordt hieronder uitgelegd:

Live demonstratie

ng-app="myDemoApp" , de ngApp-instructie die de toepassing bootstrapt en hoekig vertelt dat een DOM-element wordt bestuurd door een specifieke angular.module genaamd "myDemoApp" ;
<script src="angular.min.js"> is de eerste stap bij het opstarten van de AngularJS-bibliotheek ;

Drie functies ( MyDataService , DemoController en startup ) worden gedeclareerd, die hieronder worden gebruikt (en uitgelegd).

angular.module(...) gebruikt met een array als het tweede argument maakt een nieuwe module. Deze array wordt gebruikt om een lijst met module-afhankelijkheden te leveren. In dit voorbeeld koppelen we aanroepen op het resultaat van de module(...) functie;
.service(...) maakt een Angular Service en retourneert de module voor chaining;
.controller(...) maakt een Angular Controller en retourneert de module voor chaining;
.config(...) Gebruik deze methode om werk te registreren dat moet worden uitgevoerd bij het laden van modules.
.run(...) zorgt ervoor dat code wordt uitgevoerd bij het opstarten en neemt een reeks items als parameter. Gebruik deze methode om werk te registreren dat moet worden uitgevoerd wanneer de injector klaar is met het laden van alle modules.
- het eerste item wordt laten Angular weten dat de startup functie vereist de ingebouwde $rootScope dienst te injecteren als een argument;
- het tweede item is Angular laten weten dat de startup vereist dat de ingebouwde $window service als argument wordt geïnjecteerd;
- het laatste item in de array, startup , is de daadwerkelijke functie die bij het opstarten wordt uitgevoerd;
ng-class is de ngClass richtlijn om een dynamische set class , en in dit voorbeeld gebruikt hasStarted op de $rootScope dynamisch
ng-cloak is een richtlijn om te voorkomen dat de niet-weergegeven Angular html-sjabloon (bijvoorbeeld " {{ msg }} ") kort wordt weergegeven voordat Angular de toepassing volledig heeft geladen.
ng-controller is de instructie die Angular vraagt om een nieuwe controller met een specifieke naam te instantiëren om dat deel van de DOM te orkestreren;
ng-repeat is de richtlijn om Angular iteratie over een verzameling te maken en voor elk item een DOM-sjabloon te klonen;
{{ msg }} toont interpolatie : weergave ter plaatse van een deel van de scope of controller;

Het belang van scope

Omdat Angular HTML gebruikt om een webpagina uit te breiden en gewone Javascript om logica toe te voegen, maakt het het gemakkelijk om een webpagina te maken met ng-app , ng-controller en een aantal ingebouwde richtlijnen zoals ng-if , ng-repeat , enz. Met de nieuwe controllerAls syntaxis kunnen nieuwkomers van Angular-gebruikers functies en gegevens aan hun controller koppelen in plaats van $scope .

Vroeg of laat is het echter belangrijk om te begrijpen wat precies dit $scope ding is. Het zal in voorbeelden blijven verschijnen, dus het is belangrijk om enig begrip te hebben.

Het goede nieuws is dat het een eenvoudig maar krachtig concept is.

Wanneer u het volgende maakt:

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

Waar woont naam ?

Het antwoord is dat Angular een $rootScope object maakt. Dit is gewoon een gewoon Javascript-object en dus is naam een eigenschap van het $rootScope object:

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

En net als bij de globale scope in Javascript is het meestal niet zo'n goed idee om items toe te voegen aan de wereldwijde scope of $rootScope .

Natuurlijk maken we meestal een controller en stoppen we de vereiste functionaliteit in die controller. Maar wanneer we een controller maken, doet Angular zijn magie en maakt een $scope object voor die controller. Dit wordt soms de lokale scope genoemd .

Dus, het maken van de volgende controller:

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

zou het lokale bereik toegankelijk maken via de parameter $scope .

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

Een controller zonder de parameter $scope kan deze om een of andere reden gewoon niet nodig hebben. Maar het is belangrijk om te beseffen dat, zelfs met de syntaxis van controller , de lokale scope bestaat.

Omdat $scope een JavaScript-object is, stelt Angular het op magische wijze in om prototypisch te erven van $rootScope . En zoals u zich kunt voorstellen, kan er een reeks scopes zijn. U kunt bijvoorbeeld een model in een bovenliggende controller maken en dit als $scope.model de scope van de bovenliggende controller $scope.model .

Via de prototypeketen kon een onderliggende controller datzelfde model lokaal $scope.model met $scope.model .

Dit is in eerste instantie niet evident, want het is gewoon Angular dat zijn magie op de achtergrond doet. Maar het begrijpen van $scope is een belangrijke stap om te leren hoe Angular werkt.

De eenvoudigst mogelijke hoekige Hallo wereld.

Hoek 1 is in wezen een DOM-compiler. We kunnen het HTML doorgeven, als een sjabloon of gewoon als een gewone webpagina, en dan een app laten compileren.

We kunnen Angular vertellen een deel van de pagina als een uitdrukking te behandelen met behulp van de syntaxis van de stuurstijl {{ }} . Alles tussen de accolades wordt als volgt gecompileerd:

{{ 'Hello' + 'World' }}

Dit levert het volgende op:

HelloWorld

ng-app

We vertellen Angular welk deel van onze DOM moet worden behandeld als de hoofdsjabloon met behulp van de ng-app richtlijn . Een richtlijn is een aangepast kenmerk of element waarmee de Angular-sjablooncompiler weet hoe ermee om te gaan. Laten we nu een ng-app-richtlijn toevoegen:

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

Ik heb nu het body-element verteld als root-sjabloon. Alles erin zal worden gecompileerd.

richtlijnen

Richtlijnen zijn compilerrichtlijnen. Ze breiden de mogelijkheden van de Angular DOM-compiler uit. Dit is de reden waarom Misko , de maker van Angular, Angular beschrijft als:

"Wat een webbrowser zou zijn geweest als deze was gebouwd voor webapplicaties.

We maken letterlijk nieuwe HTML-kenmerken en -elementen en laten Angular deze compileren in een app. ng-app is een richtlijn die eenvoudig de compiler inschakelt. Andere richtlijnen omvatten:

ng-click , waarmee een klikhandler wordt toegevoegd,
ng-hide , waardoor een element voorwaardelijk wordt verborgen, en
<form> , dat extra gedrag toevoegt aan een standaard HTML-formulierelement.

Angular wordt geleverd met ongeveer 100 ingebouwde richtlijnen waarmee u de meest voorkomende taken kunt uitvoeren. We kunnen ook de onze schrijven, en deze zullen op dezelfde manier worden behandeld als de ingebouwde richtlijnen.

We bouwen een Angular-app op basis van een reeks richtlijnen, bedraad samen met HTML.

Minification in Angular

Wat is Minification?

Het is het proces waarbij alle onnodige tekens uit de broncode worden verwijderd zonder de functionaliteit te wijzigen.

Normale syntaxis

Als we normale hoeksyntaxis gebruiken voor het schrijven van een controller, dan zal het na onze bestanden onze functionaliteit breken.

Controller (vóór minificatie):

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

Na het gebruik van de Minification-tool, wordt deze verkleind zoals hieronder.

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

Hier heeft minificatie onnodige spaties en de $ scope-variabele uit de code verwijderd. Dus wanneer we deze geminimaliseerde code gebruiken, wordt er niets zichtbaar afgedrukt. Omdat $ scope een cruciaal onderdeel is tussen controller en weergave, die nu wordt vervangen door de kleine 'e'-variabele. Dus wanneer u de toepassing uitvoert, geeft deze de onbekende afhankelijkheidsfout 'Provider'.

Er zijn twee manieren om uw code te annoteren met servicenaaminformatie die veilig zijn voor minificatie:

Inline annotatiesyntaxis

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

$ inject Syntaxis van onroerendgoedaantekening

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

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

Na minificatie zal deze code zijn

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

Hier beschouwt angular variabele 'a' die moet worden behandeld als $ scope en wordt de uitvoer weergegeven als 'Hallo wereld!'.

AngularJS Aan de slag Video-tutorials

Er zijn veel goede video-tutorials voor het AngularJS-framework op egghead.io

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

AngularJS Zelfstudie
Aan de slag met AngularJS

Zoeken…