AngularJS este un cadru JavaScript. Acesta poate fi adăugat la o pagină HTML cu un <script> tag - ul.
AngularJS extinde HTML atribute cu Directivele și se leagă de date în HTML cu expresii.
AngularJS este un cadru JavaScript
AngularJS este un cadru JavaScript. Este o bibliotecă scrisă în JavaScript.
AngularJS este distribuit ca un fișier JavaScript, și pot fi adăugate la o pagină web cu un etichete de script:
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>AngularJS extinde HTML
AngularJS extinde HTML cu ng-directive.
Directiva privind ng-app definește o aplicație AngularJS.
Directiva privind ng model se leagă valoarea comenzilor HTML (input, select, textarea) de (input, select, textarea) la datele aplicației.
Directiva privind ng-bind se leagă date de aplicație la vizualizarea HTML.
AngularJS Exemplu
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Încearcă - l singur » Exemplu explicat:
AngularJS pornește automat la încărcarea paginii web.
Directiva ng-app spune că AngularJS <div> element este "owner" al unei aplicații AngularJS.
Directiva privind ng model se leagă valoarea câmpului de intrare la numele variabilei aplicație.
Directiva privind ng-bind leagă innerHTML de <p> elementul numele variabilei aplicație.
Directivele AngularJS
După cum ați văzut deja, AngularJS Directivele sunt atribute HTML cu un prefix ng.
Directiva privind ng-init inițializează variabilele aplicației AngularJS.
AngularJS Exemplu
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Încearcă - l singur » Alternativ cu HTML valid:
AngularJS Exemplu
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Încearcă - l singur » Puteți utiliza date NG-, în loc de NG-, dacă doriți să faceți pagina HTML validă.
Vei afla mai multe despre mai multe directive mai târziu în acest tutorial.
Expresii AngularJS
AngularJS expresii sunt scrise în interiorul acolade duble: {{expresie}}.
AngularJS va "output" date exact unde expresia este scris:
AngularJS Exemplu
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Încearcă - l singur » AngularJS expresii se leagă de date AngularJS HTML în același mod ca și directiva ng-bind.
AngularJS Exemplu
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Încearcă - l singur » Vei afla mai multe despre expresiile mai tarziu in acest tutorial.
AngularJS Aplicații
AngularJS module definesc aplicații AngularJS.
AngularJS controlere de control aplicații AngularJS.
Directiva privind ng-app definește aplicarea, directiva ng-controler definește controlerul.
AngularJS Exemplu
<div ng-app=" myApp " ng-controller=" myCtrl ">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module(' myApp ', []);
app.controller(' myCtrl ',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
Încearcă - l singur » AngularJS module definesc aplicații:
Modulul AngularJS
var app = angular.module('myApp', []);
AngularJS aplicații de control controlere:
AngularJS Controler
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Vei afla mai multe despre module și controlere mai târziu în acest tutorial.