В последнее время мы играли с EmberJS, чтобы собрать приятные клиентские приложения. Но меня беспокоит то, насколько тяжелым он кажется. Меня также беспокоит то, что AngularJS действительно привлекает много внимания, и я хочу убедиться, что я не скучаю по лодке! Вот, посмотрите, просто посмотрите на график Google Trends emberjs / angularjs:
Так как все мои основные жизненные решения продиктованы графиками Google Trends, на этих выходных я потратил немного времени, чтобы ознакомиться с AngularJS. И, честно говоря, я впечатлен!
При создании JavaScript-фреймворка проектировщик фреймворка должен найти тонкий баланс между мощью и весом (то есть, насколько навязчивым и тяжелым является фреймворк). Обычно, чем мощнее фреймворк, тем больше вы инвестируете в фреймворк, тем труднее его изучать, и тем больше вам просто нужно принять его мнение как правильный путь (даже если вы тайно не согласны ). AngularJS, каким-то чудесным образом, кажется одновременно и мощным, и легким! После случайной прогулки по главной странице сайта AngularJS я сразу же смог начать работать с ним.
В настоящее время одной из моих любимых особенностей AngularJS является возможность создавать свои собственные HTML-теги. Например, в создаваемом мной прототипе я просто использовал AngularJS для создания нового <lawsearch>элемента, который загружает набор результатов поиска и отображает их на странице. Давайте посмотрим, как это работает.
Сначала я создаю код, который определяет этот новый элемент, включает привязку данных и управляет их поведением (обязательно прочитайте комментарии здесь):
//define a module (yay! modular code!)
angular.module('law', [])
//within that module, define the idea of a lawsearch element
directive('lawsearch', function () {
return {
restrict: 'E', // this indicates that we're describing a new element
scope: {}, //every element will have its own scope
//this is where the behavior is defined
controller: function ($scope, $element) {
$scope.init = function (q) {
$scope.q = q;
//here we issue the actual query using jQuery
$.ajax({
url: "http://ec2-75-101-214-153.compute-1.amazonaws.com:8983/solr/statedecoded/search",
data: {
"q": $scope.q,
"wt": "json",
"rows":3
},
traditional: true,
cache: true,
async: true,
dataType: 'jsonp',
success: function (data) {
//and when we get the query back we
//stick the results in the scope
$scope.$apply(function () {
$scope.results = data.response.docs;
});
},
jsonp: 'json.wrf'
});
}
},
//finally, here's the presentation our new lawsearch element
template:
'<div>'+
' <h1>{{q}}</h1>'+
' <ul class="unstyled">'+
//check out how easy it is to iterate through elements
' <li ng-repeat="result in results">'+
' <h4>{{result.catch_line}}</h4>'+
' <p>{{result.text}}</p>'+
' </li>'+
' </ul>'+
'</div>',
replace: true
};
})
Мне нравится, что AngularJS полностью прибил паттерн модель-представление-контроллер. Обычно, когда кто-то говорит, что использует основанную на MVC инфраструктуру, мне нравится спрашивать его, что это значит и как их среда соответствует шаблону MVC. Я предполагаю, что я садист, но мне нравится слышать, как они бормочут и брызгают, когда они пытаются ответить на вопрос.
Но здесь AngularJS прояснил это. Модель представляет собой данные , которые скрываются за элементом lawsearch (это данные , которые мы храним толкая в объект $ области видимости), вид шаблона , который описывает , как будет представлена данные и контроллер функция (помеченный «контроллер Выше), который выступает в качестве посредника между моделью и представлением. Когда модель изменяется, контроллер передает необходимую информацию представлению, а когда пользователи взаимодействуют с представлением, контроллер может передавать изменения обратно в модель. Я люблю это.
Теперь, когда часть JavaScript готова, давайте посмотрим, как можно использовать это (опять же, прочитайте комментарии здесь):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Law Search</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script>
<!-- We've got to include angular... duh... -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app="law"><!-- this extra bit indicates that the law
module is in charge of everythin in this tag -->
<!-- and then we just create several searches!
the init calls code in the controller -->
<lawsearch ng-init="init('vehicle')"></lawsearch>
<lawsearch ng-init="init('house')"></lawsearch>
<lawsearch ng-init="init('pet')"></lawsearch>
</body>
</html>
Трудно стать намного проще, чем это. Хотите увидеть это в действии? Вот оно, живи .
И … если вы не находите это впечатляющим, вам обязательно понравится это: я использовал AngularJS, чтобы восстановить мерцание!