Wprowadzenie do AngularJS

AngularJS to Framework JavaScript. Można go dodać do strony HTML za pomocą tagu <script>.

AngularJS poprzezinstrukcjiRozszerza atrybuty HTML i używaWyrażeniaPrzypisuje dane do HTML.

AngularJS to framework JavaScript

AngularJS jest napisany w JavaScript i jest frameworkiem JavaScript.

AngularJS jest dystrybuowany w formie pliku JavaScript i można go dodać do strony internetowej za pomocą tagu <script>:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>

AngularJS rozszerza HTML

AngularJS używa ng-instrukcjaRozszerza HTML.

ng-app Polecenie definiuje aplikację AngularJS.

ng-model Polecenie przypisuje wartość kontrolki HTML (input, select, textarea) do danych aplikacji.

ng-bind Polecenie przypisuje dane aplikacji do widoku HTML.

Przykłady AngularJS

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Nazwa: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
</body>
</html>

Spróbuj sam!

Przykład wyjaśnienia:

Gdy strona internetowa zostanie załadowana, AngularJS automatycznie się uruchomi.

ng-app Polecenie informuje AngularJS, że element <div> jest elementem AngularJS Aplikacjajego „właściciela”.

ng-model Polecenie przypisuje wartość pola wejściowego do zmiennej aplikacji. name.

ng-bind Polecenia wiążą zawartość elementu <p> z zmienną aplikacji name.

Instrukcje AngularJS

Jak widać, polecenia AngularJS są oznaczone ng przedrostkowy atrybut HTML-a.

ng-init Polecenia inicjalizują zmienne aplikacji AngularJS.

Przykłady AngularJS

<div ng-app="" ng-init="firstName='Bill'">
<p>Nazwa to <span ng-bind="firstName"></span></p>
</div>

Spróbuj sam!

lub użyj poprawnego HTML-a:

Przykłady AngularJS

<div data-ng-app="" data-ng-init="firstName='Bill'">
<p>Nazwa to <span data-ng-bind="firstName"></span></p>
</div>

Spróbuj sam!

Jeśli chcesz, aby HTML strony był有效, możesz użyć data-ng- zamiast ng-.

Dowiedz się więcej o poleceniach w dalszej części tego tutoriala.

Wyrażenia AngularJS

Wyrażenia AngularJS pisane są wewnątrz podwójnych nawiasów kwadratowych:{{ expression }}.

AngularJS "wyświetli" dane w miejscu wyrażenia:

Przykłady AngularJS

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Moje pierwsze wyrażenie: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Spróbuj sam!

Wyrażenia AngularJS wiążą dane AngularJS z HTML, podobnie jak ng-bind W sposób podobny do polecenia.

Przykłady AngularJS

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Nazwa: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>
</body>
</html>

Spróbuj sam!

Dowiedz się więcej o wyrażeniach w dalszej części tego tutoriala.

Aplikacje AngularJS

AngularJS ModułDefiniuje aplikację AngularJS.

AngularJS KontrolerKontroluje aplikację AngularJS.

ng-app Polecenie definiuje aplikację,ng-controller Definicja kontrolera polecenia.

Przykłady AngularJS

<div ng-app="myApp" ng-controller="myCtrl">
Imię: <input type="text" ng-model="firstName"><br>
Nazwisko: <input type="text" ng-model="lastName"><br>
<br>
Pełna nazwa: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "Bill";
  $scope.lastName= "Gates";
});
</script>

Spróbuj sam!

Moduły AngularJS definiują aplikację:

Moduły AngularJS

var app = angular.module('myApp', []);

Kontrolery AngularJS kontrolują aplikację:

Kontrolery AngularJS

app.controller('myCtrl', function($scope) {
  $scope.firstName= "Bill";
  $scope.lastName= "Gates";
});

Dowiedz się więcej o modułach i kontrolerach w dalszej części tego tutoriale.