• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
AngularJS at PyVo
 

AngularJS at PyVo

on

  • 1,620 views

Short introduction to AngularJS framework.

Short introduction to AngularJS framework.

Statistics

Views

Total Views
1,620
Views on SlideShare
1,544
Embed Views
76

Actions

Likes
1
Downloads
15
Comments
0

4 Embeds 76

http://lanyrd.com 43
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