AngularJS introduktion
- Föregående sida AngularJS教程
- Nästa sida AngularJS uttryck
AngularJS är en JavaScript-kalenderDet kan läggas till i en HTML-sida med en <script>-tagg.
AngularJS genominstruktionerUtökar HTML-egenskaper och använderUttryckBinder data till HTML.
AngularJS är en JavaScript-kalender
AngularJS är en JavaScript-kalender som är skriven i JavaScript.
AngularJS distribueras som JavaScript-filer och kan läggas till på webbsidan med en <script>-tagg:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
AngularJS utökar HTML
AngularJS använder ng-instruktionUtökar HTML.
ng-app Instruktionen definierar ett AngularJS-applikation.
ng-model Instruktionen binder värdet för HTML-kontrollen (input, select, textarea) till applikationsdata.
ng-bind Instruktionen binder applikationsdata till HTML-vy.
AngularJS exempel
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
Exempel förklaring:
När webbsidan har laddats, startar AngularJS automatiskt.
ng-app Instruktionen informerar AngularJS att <div>-elementet är ett AngularJS Applikationägaren.
ng-model Instruktionen binder värdet för den inmatade fältet till en applikationsvariabel name。
ng-bind Instruktioner binder innehållet i <p>-elementet till applikationens variabler name。
AngularJS instruktioner
Som du ser är AngularJS-instruktioner med ng HTML-attribut med prefix.
ng-init Instruktioner initierar AngularJS-applikationens variabler.
AngularJS exempel
<div ng-app="" ng-init="firstName='Bill'"> <p>Namnet är <span ng-bind="firstName"></span></p> </div>
eller använda giltig HTML:
AngularJS exempel
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>Namnet är <span data-ng-bind="firstName"></span></p> </div>
Om du vill att HTML-sidan ska vara giltig, kan du använda data-ng- istället för ng-。
Du kommer att lära dig mer om instruktioner i den senare delen av denna tutorial.
AngularJS uttryck
AngularJS-uttryck skrivs inom dubbla stora klamrar:{{ uttryck }}。
AngularJS kommer att "uttrycka" data på platsen där uttrycket finns:
AngularJS exempel
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Min första uttryck: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS-uttryck binder AngularJS-data till HTML, och ng-bind Instruktionerna definieras på samma sätt.
AngularJS exempel
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Du kommer att lära dig mer om uttryck i denna tutorial senare.
AngularJS applikation
AngularJS ModulDefiniera AngularJS-applikationen.
AngularJS KontrollerKontrollera AngularJS-applikationen.
ng-app Definiera applikationen genom att använda instruktioner,ng-controller Definiera kontrollern.
AngularJS exempel
<div ng-app="myApp" ng-controller="myCtrl">
Namn: <input type="text" ng-model="firstName"><br>
Efternamn：<input type="text" ng-model="lastName"><br>
<br>
Fullständigt namn：{{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
AngularJS modul definierar applikationen:
AngularJS moduler
var app = angular.module('myApp', []);
AngularJS kontroller styr applikationen:
AngularJS kontroller
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
Du kommer att lära dig mer om moduler och kontroller i detta tutorial.
- Föregående sida AngularJS教程
- Nästa sida AngularJS uttryck
