«Angular.js опыт использования, проблемы и решения» Виталий Василевский (Минск) Senior Ruby developer/Team lead at Altoros Systems

1. Vasileuski Vitali
@VintJS
real experience, problems & solutions
https://github.com/vasvitaly/tree

2. Why we started using JS framework.

3. Why we started using JS framework.

4. Why Angular?
● Two-way data binding
● Declarative style. Seems like HTML on
steroids.
● Good collection of built-in components.
● Well testable

5. Easy to start
● Tutorial for beginners
● Good enough documentation
● Big and fast-growing community.

6. Important elements of powerful apps
● ng-repeat="item in collection"
● ng-include="expression"
● $resource

7. Problems we faced.
● Convert data, got from server before using
it.
● No if – else in Views
● Rendering trees.
● Dark side of two-way binding
● How to bind Angular to Rails app?
● Using jQuery and jQueryUI in AngularJS app

8. Convert data, got from server before
using it
Just do it in request's callback.
$scope.questions = Question.query(
{screener_id:$scope.screener.id},
function(){
Some convert actions
...
$scope.questions = converted_data;
}
);

9. No if – else in Views
● ng-show | ng-hide – for simple cases
● ng-include=”expression” - for choosing what
partial to render

10. Rendering trees
<div ng-app="treeApp">
<div ng-controller="TreeCtrl">
<script type="text/ng-template" id="node.html">
<span>{{node.name}}</span>
<ul>
<li ng-repeat="node in node.nodes"
ng-include="'node.html'"></li>
</ul>
</script>
<div id=”tree” class=”tree“>
<ul>
<li ng-repeat="node in nodes" ng-include="'node.html'"></li>
</ul>
</div>
</div>

11. Dark side of two-way binding
If you want Angular to not watch your variable,
just initialize it out of scope.

12. How to bind Angular to Rails app?
● gem 'angularjs-rails'
● Configure $httpProvider.defaults in your app or controller
app = angular.module('treeApp',["ngResource"])
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.post['Content-Type'] = 'application/json'
$httpProvider.defaults.headers.put['Content-Type'] = 'application/json'
# assumes the presence of jQuery
token = $("meta[name='csrf-token']").attr("content")
$httpProvider.defaults.headers.post['X-CSRF-Token'] = token
$httpProvider.defaults.headers.put['X-CSRF-Token'] = token
$httpProvider.defaults.headers.common['X-CSRF-Token'] = token
}])

13. jQuery and jQueryUI with AngularJS
angular.module('treeBuilder', [])
.directive('tree', ['$document', function($document){
return {
options: {},
scope: true,
link: function(scope, elm, attrs) {
moveNode = function(moved_node, lnode, rnode) {
scope.moveNodeTo(opts)
}
$document.ready( function() {
$( "#tree" ).sortable(
items: "li",
update: function(event, ui) {
moveNode(moved_node, left_node, right_node);
}
);
}
}
}
}]);

14. What is in a result?
● Angular is a real friend for fast developing real
WEB 3.0 applications.
● Most of problems are already solved, see docs and
Google+
● Most of problems can be solved thinking Angular
way.

15. С чего начать?
http://angularjs.org
Example Editable Tree
application
https://github.com/vasvitaly/tree