angularjs at pyvo
DESCRIPTION
Short introduction to AngularJS framework.TRANSCRIPT
PyVo #26
Ladislav Prskavec@abtris
http://blog.prskavec.net
Actual versions
• 1.0.6 - stable
• 1.1.4 - unstable (animations)
http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.html
Basics1. <!doctype html>2. <html ng-app>3. <head>4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>5. </head>6. <body>7. <div>8. <label>Name:</label>9. <input type="text" ng-model="yourName" placeholder="Enter a name here">10. <hr>11. <h1>Hello {{yourName}}!</h1>12. </div>13. </body>14.</html>
http://jsfiddle.net/abtris/5wHdq/
Add Some Control1. <!doctype html>2. <html ng-app>3. <head>4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>5. <script src="todo.js"></script>6. <link rel="stylesheet" href="todo.css">7. </head>8. <body>9. <h2>Todo</h2>10. <div ng-controller="TodoCtrl">11. <span>{{remaining()}} of {{todos.length}} remaining</span>12. [ <a href="" ng-click="archive()">archive</a> ]13. <ul class="unstyled">14. <li ng-repeat="todo in todos">15. <input type="checkbox" ng-model="todo.done">16. <span class="done-{{todo.done}}">{{todo.text}}</span>17. </li>18. </ul>19. <form ng-submit="addTodo()">20. <input type="text" ng-model="todoText" size="30"21. placeholder="add new todo here">22. <input class="btn-primary" type="submit" value="add">23. </form>24. </div>25. </body>26. </html>
Add Some Control1. function TodoCtrl($scope) {2. $scope.todos = [3. {text:'learn angular', done:true},4. {text:'build an angular app', done:false}];5. 6. $scope.addTodo = function() {7. $scope.todos.push({text:$scope.todoText, done:false});8. $scope.todoText = '';9. };10. 11. $scope.remaining = function() {12. var count = 0;13. angular.forEach($scope.todos, function(todo) {14. count += todo.done ? 0 : 1;15. });16. return count;17. };18. 19. $scope.archive = function() {20. var oldTodos = $scope.todos;21. $scope.todos = [];22. angular.forEach(oldTodos, function(todo) {23. if (!todo.done) $scope.todos.push(todo);24. });25. };26. }
1. .done-true {2. text-decoration: line-through;3. color: grey;4. }
http://jsfiddle.net/abtris/jqAKw/
Directives libraries
• https://github.com/lmc-eu/ngx-library
• http://angular-ui.github.io/bootstrap/
• http://angular-ui.github.io/ng-grid/
• http://angular-ui.github.io/
Backend wiring• https://github.com/mgonto/restangular
• Ruby on Rails
• CakePHP for PHP
• Play1 & 2 for Java & scala
• Restify and Express for NodeJS
http://plnkr.co/edit/Sh669ScCQRyD513bzsBx
https://github.com/cheekybastard/django-angularjs-rest
Batarang
https://github.com/angular/angularjs-batarangShow at http://todo.dev/
npm install -g yo grunt-cli bowernpm install generator-angular generator-karma yo angular bower install angular-ui grunt test grunt server grunt
Karma
• Spectacular Test Runner for JavaScript
• http://karma-runner.github.io/0.8/index.html
• https://github.com/yeoman/generator-karma
ng-animate
• http://yearofmoo-articles.github.io/angularjs-animation-article/app/#/ng-repeat
• http://www.yearofmoo.com/2013/04/animation-in-angularjs.html
• https://www.youtube.com/watch?feature=player_embedded&v=cF_JsA9KsDM
Books
• AngularJS - Brad Green, Shyam Seshadri
• Developing an AngularJS Edge - Christopher Hiller
• Instant AngularJS Starter - Dan Menard