Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to AngularJS at PyVo
Similar to AngularJS at PyVo (20)
More from Ladislav Prskavec
More from Ladislav Prskavec (20)
Recently uploaded
Recently uploaded (20)
AngularJS at PyVo
- 2. Actual versions • 1.0.6 - stable • 1.1.4 - unstable (animations) http://blog.angularjs.org/2012/07/angularjs-10-12- roadmap.html
- 3. Basics 1. <!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/
- 4. Add Some Control 1. <!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>
- 5. Add Some Control 1. 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/
- 6. 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/
- 7. 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
- 9. npm install -g yo grunt-cli bower npm install generator-angular generator-karma yo angular bower install angular-ui grunt test grunt server grunt
- 10. Karma • Spectacular Test Runner for JavaScript • http://karma-runner.github.io/0.8/index.html • https://github.com/yeoman/generator-karma
- 11. 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_JsA9KsD M
- 12. Books • AngularJS - Brad Green, Shyam Seshadri • Developing an AngularJS Edge - Christopher Hiller • Instant AngularJS Starter - Dan Menard