Angular js vs. Facebook react
•
1 like•1,775 views
The document compares the JavaScript frameworks AngularJS and Facebook React. It provides an overview of key differences between the frameworks, including how they handle data binding, routing, and component architecture. It also includes code examples for basic "Hello World" components in each framework and a TODO list application. The document concludes with recommendations for tutorials and documentation resources for learning more about AngularJS and React.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Angular js vs. Facebook react
Similar to Angular js vs. Facebook react (20)
More from Keyup
Recently uploaded
Recently uploaded (20)
Angular js vs. Facebook react
- 1. AngularJS vs. Facebook React David Pohan a Standa Jaša
- 2. Today’s Agenda 1. Obecně Angular vs React 2. Hello World 3. Nahrání partialu stránky 4. Todo aplikace 5. Literatura a bitka
- 3. Motivace “Miško Hevery (autor Angularu) se vsadil o $10k, že přepíše DoubleClick z 19 tis. loc v GWT na 1700 loc v angularu za 14 dní.” (Nakonec to trvalo tři týdny.)
- 4. Angular vs React (obecně) ● V Googlu ~ 1200 aplikací ● HTML tagy ● Testování ~ docs ● Two-way databinding ● AngularDart ● Sublime + Idea OK ● JSX skript ● Virtuální dom -> update pomocí diffu ● One-way reactive data flow
- 5. Hello World <html ng-app> <head><script src=”angular.js” ></script> </head><body> <input ng-model=”name” placeholder=”your name”> <h1>Hello {{name}}</h1> </body></html> <script type=”text/jsx”> var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name} </div>; } }); React.render(<HelloMessage name=" John" />, mountNode); </script>
- 6. Nahrání partialu - routing v Angularu // partial.html------------------------------- <div>param: {{params.bookId}}</div> // index.html-------------------------------- <div ng-controller=”MainController”> <a href=”Book/Gatsby”>Gatsby</a> <div ng-view></div> </div> // script.js----------------------------------- angular.module(‘ngRouteExample’, [‘ngRoute’]) .controller(‘MainController’, function ($scope, $route) { $scope.$route = $route; }) .controller(‘BookController’, function ($scope, $routeParams) { $scope.params = $routeParams;}) .config(function($routeProvider) { $routeProvider.when(‘/Book/:bookId’, { templateUrl: ‘partial.html’, controller: ‘BookController’});
- 7. ToDo aplikace <div ng-controller=”TodoController”> <ul><li ng-repeat=”todo in todos”> {{todo}}</li></ul> </div> <script>angular.module(‘todoApp’, []) .controller(‘TodoController’, [‘$scope’, function ($scope) { $scope.todos = [‘todo1’, ‘todo2’, …]; }]);</script> <script type=”text/jsx”> var TodoList = React.createClass({ render: function() { var createItem = function(itemText) { return <li>{itemText}</li>; }; return <ul>{this.props.items.map(createItem)}</ul>; } }); var TodoApp = React.createClass({ getInitialState: function() { return {items: [], text: ''}; }, onChange: function(e) { this.setState({text: e.target.value}); }, handleSubmit: function(e) { e.preventDefault(); var nextItems = this.state.items.concat([this.state.text]);
- 8. Bonus pro Viktora (a zbytek hate party) angular.noop - function in module ng A function that performs no operations. This function can be useful when writing code in the functional style. function foo(callback) { var result = calculateResult(); (callback || angular.noop)(result); } WTF?
- 9. Literatúra ● https://www.youtube.com/watch? v=tnXO-i7944M (Angular in 20 mins) ● https://www.youtube.com/watch? v=M-MuOU3My-Y (Vojta Jína v Liberci) ● http://facebook.github. io/react/docs/tutorial.html (úvodní tutorial) ● http://facebook.github. io/react/docs/thinking-in-react. html (filosofie Reactu) ● http://facebook.github. io/flux/docs/overview.html (Flux architekura)