AngularJS
6 likes4,110 views
Luka gave an introduction to AngularJS, an open-source JavaScript framework. Some key points included: - AngularJS aims to decouple DOM manipulation from application logic for cleaner code. - Modules allow splitting applications into multiple files without namespace issues. - Scopes provide isolated contexts for controllers and directives to share data. - Data binding synchronizes JavaScript models with HTML views. - Routing maps URLs to templates and controllers. - Controllers retrieve and manipulate data to populate views. - Factories provide reusable data services. - Filters transform output for views. - Directives create custom elements and attributes. - Testing ensures correct behavior.
![URL ROUTING
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeController'
});
$routeProvider.when('/comments', {
templateUrl: 'partials/comments.html',
controller: 'CommentsController'
});
$routeProvider.otherwise({
redirectTo: '/home'
});
}]);](https://image.slidesharecdn.com/angularjs-130430155228-phpapp02/85/AngularJS-8-320.jpg)
AngularJS
- 1. ANGULARJS Luka Zakraj邸ek @bancek First JavaScript meetup in Ljubljana April 30, 2013
- 2. HI I'm Luka In web development for more than 7 years I work at Koofr
- 3. JAVASCRIPT APPS DON'T HAVE TO BE MESSY
- 4. ANGULAR'S PHILOSOPHY Decouple DOM manipulation from app logic Code reusage Make common tasks trivial and difficult tasks possible Not a library
- 5. MODULES Split your application into multiple files No global namespace manipulation Doesn't limit you with files structure
- 6. $SCOPE One $rootScope Every controller gets its own scope and inherits data from parent controller Every directive gets new $scope that is isolated from others
- 7. DATA BINDING JS: $scope.comment.user = 'Author' HTML: {{ comment.user }}
- 8. URL ROUTING .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/home', { templateUrl: 'partials/home.html', controller: 'HomeController' }); $routeProvider.when('/comments', { templateUrl: 'partials/comments.html', controller: 'CommentsController' }); $routeProvider.otherwise({ redirectTo: '/home' }); }]);
- 9. CONTROLLERS .controller('CommentsController', function($scope, Comment) { Comment.query(function(res) { res.reverse(); $scope.comments = res; }); $scope.post = function(){ $scope.comments.unshift({ name: $scope.user.name, email: $scope.user.email, content: $scope.comment }); $scope.comment = ''; } })
- 10. MODELS .factory('Comment', function($resource) { return $resource('/app/api/comments.json'); })
- 11. FILTERS .filter('gravatar', function() { return function(email, size) { var hash = $().crypt({ method: 'md5', source: email }); return "http://secure.gravatar.com/avatar/" + hash + ".jpg?s=" + size + "&d=identicon"; }; })
- 12. DIRECTIVES .directive('hasFocus', function($timeout) { return function(scope, elm, attrs) { scope.$watch(attrs.hasFocus, function(value) { if (value) { $timeout(function(){ elm.focus(); }, 0); } }); }; })
- 13. DIRECTIVES .directive('debug', function() { return { restrict: 'E', scope: { data: '=', title: '@', }, templateUrl: 'partials/debug.html', controller: function($scope, $element) { } }; })
- 14. DIRECTIVES debug.html Usage: <h4>{{ title }}:</h4> <pre>{{ data | cleanData | json }}</pre> <debug data="user" title="User"></debug>
- 15. TESTING Unit testing End to end testing it('should reverse greeting', function() { expect(binding('greeting|reverse')).toEqual('olleh'); input('greeting').enter('ABC'); expect(binding('greeting|reverse')).toEqual('CBA'); });
- 16. DEMO Sample application Some code Chrome plugin Code available on Github: https://github.com/bancek/angularjs-talk