Скачать скрипт | Демо
Как это работает?
Этап 1
Включаем директиву ng-app и id='ng-app' (для Internet Explorer) в тег 'html', чтобы Angular знал, когда и на какой странице нужно запускаться.
<!doctype html>
<html lang="en" ng-app id="ng-app">ng-app – объявляет элемент в качестве root-элемента приложения, что позволяет изменять среду посредством кастомных HTML-тегов.
Этап 2
Вам нужно включить тег 'script' от Angular в раздел 'head'.
<script src="js/angular.js"></script>Этап 3
Доступ к директивам AngularJS осуществляется посредством HTML-атрибутов, здесь директива
<i>ng-controller</i><div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
{{post.description}}
</div>Posts.json
Примерный JSON, содержащий данные из ленты блога.
[
{
"title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",
"url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html",
"banner":"multiple.jpg",
"description":"Some Tesxt",
"time":"Tuesday, August 6, 2013" ,
"author":"Srinivas Tamada"
},
{
"title":"Wall Script 6.0",
"url":"http://www.9lessons.info/2013/07/wall-script.html",
"banner":"WallBanner.jpg",
"description":"Some Text",
"time":"MONDAY, JULY 29, 2013" ,
"author":"Srinivas Tamada"
},
{
"title":"Simple Drop Down Menu with Jquery and CSS",
"url":"http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html",
"banner":"dropdown.png",
"description":"Some Text",
"time":"WEDNESDAY, JUNE 20, 2012" ,
"author":"Ravi Tamada"
},
....
....
....
]Angular javascript
Angular Ajax API-вызов
<script>
function PostsCtrlAjax($scope, $http)
{
$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{
$scope.posts = data; // response data
});
}
</script>HTML – Привязка данных
Мы можем отображать значения JSON-данных путем использования атрибутов в выражениях вроде {{post.title}}, {{post.url}}, и т.д... Здесь id="ng-app" наиболее важен для привязки данных браузера IE.
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
<div ng-repeat="post in posts">
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" />
</div>
</div>ng-controller - определяет класс javascript-контроллера, который определяет HTML-выражения.
ng-repeat – единожды создает экземпляр элемента для коллекции.
Фильтрация данных - ng-show
Директива ng-show помогает вам отображать определенный результат.
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax" ng-show="post.author== 'Ravi Tamada'">* Демо (Отдельный результат)
Верхний регистр
Чтобы получить результат в верхнем регистре, вы можете воспользоваться CSS, прибавив стиль text-transform:uppercase;
<h2>
{{post.title | uppercase}}
</h2>Финальный код – index.html
<!doctype html>
<html lang="en" ng-app id="ng-app">
<head>
<title>Page Title</title>
<script src="js/angular.js"></script>
<script>
function PostsCtrlAjax($scope, $http)
{
$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{
$scope.posts = data; // response data
});
}
</script>
</head>
<body>
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
<div ng-repeat="post in posts" >
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" />
</div>
</div>
</body>
</html>Следующее руководство представит вам больше информации по поводу директив Angular.
