Dyrektywy
{{}}
Data binding - bindują dane modelu do widoku np {{message}}
ng-model
Wstawianie danych z widoku (formularz) do modelu np:
{{username}}
<form name="searchUser"> <input type="search" placeholder="User name to find" ng-model="username"/> <input type="submit" value="Search"/> </form>
ng-click
Zdarzenie obsługujące kliknięcie np <input type="submit" value="Search" ng-click="search(username)"/>
Parametr username nie jest potrzebny ponieważ istnieje już w modelu.
ng-submit
Zdarzenie obsługujące zatwierdzenie formularza np <form name="searchUser" ng-submit="search(username)">
Przykład:
indeks.html:
<!DOCTYPE html> <html ng-app="githubViewer"> <head> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> <script src="app.js"></script> </head> <body ng-controller="MainController"> <h1>{{message}}</h1> <div>{{error}}</div> <form name="searchUser" ng-submit="search(username)"> <input type="search" required placeholder="User name to find" ng-model="username" /> <input type="submit" value="Search"/> </form> <div> <h2>{{user.name}}</h2> <img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}} "> </div> </body> </html>
app.js:
(function() { var app = angular.module("githubViewer", []); var MainController = function($scope, $http) { var onUserComplete = function(response) { $scope.user = response.data; }; var onError = function(reason) { $scope.error = "Could not fetch the user." } $scope.search = function(username) { $http.get("https://api.github.com/users/" + username) .then(onUserComplete, onError); }; $scope.username = "angular"; $scope.message = "GitHub Viewer"; }; app.controller("MainController", MainController); }());
ng-repeat
Służy do iterowania po kolekcjach (jak pętla foreach) np:
<table>
<thead>
<th>Name</th>
<th>Stars</th>
<th>Language</th>
</thead>
<tbody>
<tr ng-repeat="repo in repos">
<td>{{repo.name}}</td>
<td>{{repo.stargazers_count | number}}</td>
<td>{{repo.language}}</td>
</tr>
</tbody>
</table>
ng-show / ng-hide
Dyrektywy służące do pokazywania/chowania elementu. Po znaku równości dajemy wyrażenie bool które musi być spełnione.
<div ng-show="user">...</div><table ng-hide="!user">...</table>
ng-include
Pozwala na załączenie istniejącego już pliku do widoku, ponowne użycie kodu.
<div ng-include="'strona.html'"></div>
Filtry
Pozwalają na stosowanie pewnych zachowań w wyrażeniach.
Podstawowy format: expression|filterName:parameter
- number - jest to filtr który formatuje liczbę {{repo.stargazers_count | number}}
- currency - filtr dodający walutę {{ammount|currency:"USD$"}}
- date - formatuje datę {{startDate | date:'short'}}
- filter - filtruje kolekcje repo in repos|filter:searchTerm
- json - {{repo|json}}
- limitTo - ogranicza liczbę wystąpień repo in repos|limitTo:10
- lowercase - małe litery {{user.name|uppercase}}
- uppercase - duże litery {{user.name|uppercase}}
- orderBy -sortuje repo in repos|orderBy:'name' aby sortować malejąco należy użyć - przed name, analogicznie + dla rosnąco
Przykład:
indeks.html:
<!DOCTYPE html> <html ng-app="githubViewer"> <head> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> <script src="app.js"></script> </head> <body ng-controller="MainController"> <h1>{{message}}</h1> <div>{{error}}</div> <form name="searchUser" ng-submit="search(username)"> <input type="search" required placeholder="User name to find" ng-model="username" /> <input type="submit" value="Search"/> </form> <div ng-show="user">
<h2>{{user.name}}</h2> <img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}} "> Order: <select ng-model="repoSortOrder"> <option value="+name">Name</option> <option value="-stargazers_count">Stars</option> <option value="+language">Language</option> </select>
</div><table ng-hide="!user">
<thead> <tr> <th>Name</th> <th>Stars</th> <th>Language</th> </tr> </thead> <tbody> <tr ng-repeat="repo in repos | orderBy:repoSortOrder"> <td>{{repo.name}}</td> <td>{{repo.stargazers_count | number}}</td> <td>{{repo.language}}</td> </tr> </tbody> </table> </body> </html>
app.js:
(function() {
var app = angular.module("githubViewer", []);
var MainController = function($scope, $http) {
var onUserComplete = function(response) {
$scope.user = response.data;
$http.get($scope.user.repos_url)
.then(onRepos, onError);
};
var onRepos = function(response){
$scope.repos = response.data;
};
var onError = function(reason) {
$scope.error = "Could not fetch the data."
}
$scope.search = function(username) {
$http.get("https://api.github.com/users/" + username)
.then(onUserComplete, onError);
};
$scope.username = "angular";
$scope.message = "GitHub Viewer";
$scope.repoSortOrder = '-stargazers_count';
};
app.controller("MainController", MainController);
}());