AngularJS Handledning => Komma igång med AngularJS

Anmärkningar

AngularJS är ett webbapplikationsramverk för att förenkla den rika applikationsutvecklingen på klientsidan. Denna dokumentation är avsedd för Angular 1.x , föregångaren till den mer moderna Angular 2 eller se Stack Overflow-dokumentationen för Angular 2 .

versioner

Version	Utgivningsdatum
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

Komma igång

Skapa en ny HTML-fil och klistra in följande innehåll:

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

När du öppnar filen med en webbläsare ser du ett inmatningsfält följt av texten Hello, World! . Att redigera värdet i ingången kommer att uppdatera texten i realtid, utan att behöva uppdatera hela sidan.

Förklaring:

Ladda vinkelramen från ett innehållsleveransnätverk.

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

Definiera HTML-dokumentet som en vinkelapplikation med ng-app direktivet
```
<html ng-app>
```
Initiera name med ng-init
```
<body ng-init=" name = 'World' ">
```
Observera att ng-init endast ska användas för demonstrations- och teständamål. När man bygger en faktisk applikation bör kontroller initiera uppgifterna.
Bind data från modellen till vyn på HTML-kontroller. Bind en <input> till name fastighet med ng-model
```
<input ng-model="name" />
```
Visa innehåll från modellen med dubbla hängslen {{ }}
```
<span>Hello, {{ name }}</span>
```
Ett annat sätt att binda name egenskapen använder ng-bind stället för styret "{{ }}"
```
 <span ng-bind="name"></span>
```

De tre sista stegen fastställer tvåvägs databindande . Ändringar i ingången uppdaterar modellen , vilket återspeglas i vyn .

Det finns en skillnad mellan att använda styret och ng-bind . Om du använder styret kan du se den verkliga Hello, {{name}} när sidan laddas innan uttrycket är upplöst (innan data laddas) medan om du använder ng-bind , kommer det bara att visa data när namnet är löst. Alternativt kan direktivet ng-cloak användas för att förhindra att styret visas innan det sammanställs.

Visar upp alla vanliga vinkelkonstruktioner

Följande exempel visar vanliga AngularJS-konstruktioner i en fil:

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

Varje rad i filen förklaras nedan:

Live-demo

ng-app="myDemoApp" , ngApp-direktivet som startar om applikationen och säger vinkeln att ett DOM-element styrs av en specifik angular.module namnet "myDemoApp" ;
<script src="angular.min.js"> är det första steget i att starta om AngularJS-biblioteket ;

Tre funktioner ( MyDataService , DemoController och startup ) deklareras som används (och förklaras) nedan.

angular.module(...) används med en matris som det andra argumentet skapar en ny modul. Den här matrisen används för att tillhandahålla en lista över modulberoenden. I det här exemplet kedjar vi upp resultatet av module(...) ;
.service(...) skapar en Angular Service och returnerar modulen för kedja;
.controller(...) skapar en vinkelstyrenhet och returnerar modulen för kedja;
.config(...) Använd denna metod för att registrera arbete som måste utföras vid modulbelastning.
.run(...) ser till att koden körs vid starttid och tar en rad objekt som en parameter. Använd den här metoden för att registrera arbete som ska utföras när injektorn är klar med att ladda alla moduler.
- det första objektet låter Angular veta att startup kräver att den inbyggda $rootScope tjänsten injiceras som ett argument;
- det andra objektet låter Angular veta att startup kräver att den inbyggda $window tjänsten injiceras som ett argument;
- det sista objektet i arrayen, startup , är den faktiska funktionen som ska köras vid start;
ng-class är ngClass-direktivet för att ställa in en dynamisk class , och i detta exempel använder hasStarted på $rootScope dynamiskt
ng-cloak är ett direktiv för att förhindra att den oåtergivna Angular html-mallen (t.ex. " {{ msg }} " visas kort innan Angular har laddat applikationen helt.
ng-controller är det direktiv som ber Angular att instansera en ny controller med specifikt namn för att orkestrera den delen av DOM;
ng-repeat är direktivet att göra vinkelformat iterera över en samling och klona en DOM-mall för varje objekt;
{{ msg }} visar interpolering : återgivning på plats av en del av omfattningen eller kontrollern;

Vikten av omfattning

Eftersom Angular använder HTML för att utöka en webbsida och vanligt Javascript för att lägga till logik, gör det det enkelt att skapa en webbsida med ng-app , ng-controller och några inbyggda direktiv som ng-if , ng-repetera , etc. Med den nya controllerAs- syntaxen kan nykomlingar till Angular-användare ansluta funktioner och data till sin controller istället för att använda $scope .

Förr eller senare är det emellertid viktigt att förstå vad exakt denna sak för $scope är. Det kommer att fortsätta att dyka upp i exempel så det är viktigt att ha viss förståelse.

Den goda nyheten är att det är ett enkelt men ändå kraftfullt koncept.

När du skapar följande:

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

Var bor namnet ?

Svaret är att Angular skapar ett $rootScope objekt. Detta är helt enkelt ett vanligt Javascript-objekt och namnet är så en egenskap på $rootScope objektet:

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

Och precis som med global räckvidd i Javascript är det vanligtvis inte så bra att lägga till objekt till det globala räckvidden eller $rootScope .

Naturligtvis skapar vi för det mesta en kontroller och lägger den nödvändiga funktionaliteten i den kontrollern. Men när vi skapar en controller gör Angular det magiskt och skapar ett $scope objekt för den kontrollenheten. Detta kallas ibland den lokala räckvidden .

Så skapar du följande controller:

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

skulle tillåta att det lokala omfånget är tillgängligt via parametern $scope .

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

En controller utan en parameter för $scope kanske helt enkelt inte behöver den av någon anledning. Men det är viktigt att inse att även med controllerAs syntax finns det lokala räckvidden.

Eftersom $scope är ett JavaScript-objekt, sätter Angular det på magiskt sätt att ärva från $rootScope . Och som du kan föreställa dig kan det finnas en kedja av omfattningar. Till exempel kan du skapa en modell i en överordnad kontroller och koppla till den i överordnade kontrollerns räckvidd som $scope.model .

Sedan via prototypkedjan kunde en barnkontroll åtkomst till samma modell lokalt med $scope.model .

Inget av detta är initialt uppenbart, eftersom det bara är Angular som gör sin magi i bakgrunden. Men att förstå $scope är ett viktigt steg för att lära känna hur Angular fungerar.

Den enklaste möjliga vinklade Hello World.

Vinkel 1 är i grunden en DOM-kompilator. Vi kan skicka den HTML, antingen som en mall eller bara som en vanlig webbsida, och sedan låta den sammanställa en app.

Vi kan säga Angular att behandla en region på sidan som ett uttryck med hjälp av {{ }} styrsyntax. Allt mellan de lockiga hängslen kommer att sammanställas, så:

{{ 'Hello' + 'World' }}

Detta kommer att matas ut:

HelloWorld

ng-app

Vi berättar för Angular vilken del av vår DOM som ska behandlas som huvudmall med ng-app direktivet . Ett direktiv är ett anpassat attribut eller element som vinkelformatkompilatorn vet hur man hanterar. Låt oss lägga till ett ng-app-direktiv nu:

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

Jag har nu sagt att kroppselementet ska vara rotmallen. Allt i det kommer att sammanställas.

direktiven

Direktiv är kompilatordirektiv. De utökar kapaciteten hos Angular DOM-kompilatorn. Det är därför Misko , skaparen av Angular, beskriver Angular som:

"Vilken webbläsare hade varit om den hade byggts för webbapplikationer.

Vi skapar bokstavligen nya HTML-attribut och element och har Angular att sammanställa dem till en app. ng-app är ett direktiv som helt enkelt sätter på kompilatorn. Andra direktiv inkluderar:

ng-click , som lägger till en klickhanterare,
ng-hide , som villkorligt döljer ett element, och
<form> , som lägger till ytterligare beteende till ett standard HTML-formelement.

Angular har cirka 100 inbyggda direktiv som gör att du kan utföra de vanligaste uppgifterna. Vi kan också skriva våra egna, och dessa kommer att behandlas på samma sätt som de inbyggda direktiven.

Vi bygger en Angular-app av en serie direktiv, kopplade tillsammans med HTML.

Minifiering i vinkel

Vad är Minification?

Det är processen att ta bort alla onödiga tecken från källkoden utan att ändra dess funktionalitet.

Normal syntax

Om vi använder normal vinkelsyntax för att skriva en styrenhet kommer det att bryta vår funktionalitet efter att minifiltera våra filer.

Controller (före minifiering):

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

Efter att ha använt minifieringsverktyget kommer det att minifieras på samma sätt som nedan.

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

Här har minifiering tagit bort onödiga utrymmen och $ scope-variabeln från koden. Så när vi använder den här förminskade koden kommer den inte att skriva ut något i vyn. Eftersom $ scope är en avgörande del mellan controller och view, som nu ersätts av den lilla 'e' variabeln. Så när du kör applikationen kommer det att ge Unknown Provider "e" beroende-fel.

Det finns två sätt att kommentera din kod med information om tjänstenamn som är minifieringssäker:

Inline Annotation Syntax

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

$ injicera syntax för egendomskommentarer

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

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

Efter minifiering kommer den här koden att vara

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

Här kommer vinkeln att betrakta variabeln 'a' som ska behandlas som $ scope, och den kommer att visa utdata som 'Hello World!'.

AngularJS Komma igång Videotutorials

Det finns många bra videohandledning för AngularJS-ramverket på egghead.io

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

AngularJS Handledning
Komma igång med AngularJS

Sök…