AngularJS at PyVo
Upcoming SlideShare
Loading in...5
×
 

AngularJS at PyVo

on

  • 1,791 views

Short introduction to AngularJS framework.

Short introduction to AngularJS framework.

Statistics

Views

Total Views
1,791
Views on SlideShare
1,714
Embed Views
77

Actions

Likes
1
Downloads
17
Comments
0

4 Embeds 77

http://lanyrd.com 44
http://blog.prskavec.net 27
https://twitter.com 4
http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

AngularJS at PyVo AngularJS at PyVo Presentation Transcript

  • PyVo #26Ladislav Prskavec@abtrishttp://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 NodeJShttp://plnkr.co/edit/Sh669ScCQRyD513bzsBxhttps://github.com/cheekybastard/django-angularjs-rest
  • Bataranghttps://github.com/angular/angularjs-batarangShow at http://todo.dev/
  • npm install -g yo grunt-cli bowernpm install generator-angular generator-karmayo angularbower install angular-uigrunt testgrunt servergrunt
  • 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