AngularJS at PyVo

  • 1,483 views
Uploaded on

Short introduction to AngularJS framework.

Short introduction to AngularJS framework.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,483
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
21
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. PyVo #26Ladislav Prskavec@abtrishttp://blog.prskavec.net
  • 2. Actual versions• 1.0.6 - stable• 1.1.4 - unstable (animations)http://blog.angularjs.org/2012/07/angularjs-10-12-roadmap.html
  • 3. 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/
  • 4. 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>
  • 5. 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/
  • 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 NodeJShttp://plnkr.co/edit/Sh669ScCQRyD513bzsBxhttps://github.com/cheekybastard/django-angularjs-rest
  • 8. Bataranghttps://github.com/angular/angularjs-batarangShow at http://todo.dev/
  • 9. npm install -g yo grunt-cli bowernpm install generator-angular generator-karmayo angularbower install angular-uigrunt testgrunt servergrunt
  • 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_JsA9KsDM
  • 12. Books• AngularJS - Brad Green, Shyam Seshadri• Developing an AngularJS Edge -Christopher Hiller• Instant AngularJS Starter - Dan Menard