More Related Content
Similar to AngularJS at PyVo (20)
More from Ladislav Prskavec (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/
- 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
- 12. Books
• AngularJS - Brad Green, Shyam Seshadri
• Developing an AngularJS Edge -
Christopher Hiller
• Instant AngularJS Starter - Dan Menard
