Last active
October 20, 2015 22:21
-
-
Save wcalderipe/c67dc617a36d6bfd9cbc to your computer and use it in GitHub Desktop.
minicurso-angularjs_introdução
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Minicurso de AngularJS</title> | |
| </head> | |
| <body> | |
| <script src="scripts/angular.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app> | |
| <head> | |
| <title>Directives e Data Binding</title> | |
| </head> | |
| <body> | |
| <input type="text" ng-model="myVar"> {{ myVar }} | |
| <script src="scripts/angular.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app> | |
| <head> | |
| <meta charset="utf8"> | |
| <title>Filters</title> | |
| </head> | |
| <body ng-init="names=['Jairo', 'Manoel', 'Vasco', 'Adão']"> | |
| <input type="text" ng-model="myVar"> {{ myVar }} | |
| <ul> | |
| <li ng-repeat="name in names | filter:myVar">{{ name | uppercase }}</li> | |
| </ul> | |
| <script src="scripts/angular.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="app"> | |
| <head> | |
| <meta charset="utf8"> | |
| <title>Modules</title> | |
| </head> | |
| <body ng-init="names=['Jairo', 'Manoel', 'Vasco', 'Adão']"> | |
| <input type="text" ng-model="myVar"> {{ myVar }} | |
| <ul> | |
| <li ng-repeat="name in names | filter:myVar">{{ name | uppercase }}</li> | |
| </ul> | |
| <script src="scripts/angular.js"></script> | |
| <script> | |
| var app = angular.module('app', []); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="app"> | |
| <head> | |
| <meta charset="utf8"> | |
| <title>View, Controller e Scope</title> | |
| </head> | |
| <body ng-controller="MainController"> | |
| <input type="text" ng-model="myVar"> {{ myVar }} | |
| <ul> | |
| <li ng-repeat="name in names | filter:myVar">{{ name | uppercase }}</li> | |
| </ul> | |
| <script src="scripts/angular.js"></script> | |
| <script> | |
| var app = angular.module('app', []); | |
| app.controller('MainController', function($scope) { | |
| $scope.names = ['Jairo', 'Manoel', 'Vasco', 'Adão']; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="app"> | |
| <head> | |
| <meta charset="utf8"> | |
| <title>Routes</title> | |
| </head> | |
| <body> | |
| <input type="text" ng-model="myVar"> {{ myVar }} | |
| <ul> | |
| <li ng-repeat="name in names | filter:myVar">{{ name | uppercase }}</li> | |
| </ul> | |
| <ul> | |
| <li><a href="#/view1">view1</a></li> | |
| <li><a href="#/view2">view2</a></li> | |
| </ul> | |
| <div ng-view></div> | |
| <script src="scripts/angular.js"></script> | |
| <script src="scripts/angular-route.js"></script> | |
| <script> | |
| var app = angular.module('app', ['ngRoute']); | |
| app.config(function($routeProvider) { | |
| $routeProvider | |
| .when('/view1', { | |
| controller: 'MainController', | |
| templateUrl: 'views/view1.html' | |
| }) | |
| .when('/view2', { | |
| controller: 'MainController', | |
| templateUrl: 'views/view2.html' | |
| }) | |
| .otherwise({ | |
| redirectTo: '/view1' | |
| }); | |
| }); | |
| app.controller('MainController', function($scope) { | |
| $scope.names = ['Jairo', 'Manoel', 'Vasco', 'Adão']; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="app"> | |
| <head> | |
| <meta charset="utf8"> | |
| <title>Services, Providers e Factories</title> | |
| </head> | |
| <body> | |
| <input type="text" ng-model="myVar"> {{ myVar }} | |
| <ul> | |
| <li ng-repeat="name in names | filter:myVar">{{ name | uppercase }}</li> | |
| </ul> | |
| <ul> | |
| <li><a href="#/view1">view1</a></li> | |
| <li><a href="#/view2">view2</a></li> | |
| </ul> | |
| <div ng-view></div> | |
| <ul> | |
| <li>{{ hello.provider }}</li> | |
| <li>{{ hello.service }}</li> | |
| <li>{{ hello.factory }}</li> | |
| </ul> | |
| <script src="scripts/angular.js"></script> | |
| <script src="scripts/angular-route.js"></script> | |
| <script> | |
| var app = angular.module('app', ['ngRoute']); | |
| app.config(function($routeProvider) { | |
| $routeProvider | |
| .when('/view1', { | |
| controller: 'MainController', | |
| templateUrl: 'views/view1.html' | |
| }) | |
| .when('/view2', { | |
| controller: 'MainController', | |
| templateUrl: 'views/view2.html' | |
| }) | |
| .otherwise({ | |
| redirectTo: '/view1' | |
| }); | |
| }); | |
| app.provider('helloProvider', function() { | |
| return { | |
| $get: function() { | |
| return { | |
| hello: 'Hello PROVIDER!' | |
| } | |
| } | |
| }; | |
| }); | |
| app.service('helloService', function() { | |
| this.hello = function() { | |
| return 'Hello SERVICE!'; | |
| }; | |
| }); | |
| app.factory('helloFactory', function() { | |
| return { | |
| hello: function() { | |
| return 'Hello FACTORY!'; | |
| } | |
| }; | |
| }); | |
| app.controller('MainController', function($scope, helloProvider, helloFactory, helloService) { | |
| $scope.names = ['Jairo', 'Manoel', 'Vasco', 'Adão']; | |
| $scope.hello = { | |
| provider: helloProvider.hello, | |
| service: helloService.hello(), | |
| factory: helloFactory.hello() | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "id": 1, | |
| "model": "Lorem ipsum dolor", | |
| "brand": "Ford", | |
| "year": 2015, | |
| "currency": "R$", | |
| "value": 40000, | |
| "seller": "Revenda Herbie", | |
| "cover_image": "images/demo1.jpg", | |
| "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum adipisci ipsam dolore ullam aperiam autem nesciunt soluta. Rerum illo facilis accusantium quis ducimus earum cumque provident porro nihil quo.", | |
| }, | |
| { | |
| "id": 2, | |
| "model": "Lorem ipsum dolor", | |
| "brand": "Volkswagen", | |
| "year": 2015, | |
| "currency": "R$", | |
| "value": 20500, | |
| "seller": "Revenda Herbie", | |
| "cover_image": "images/demo1.jpg", | |
| "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum adipisci ipsam dolore ullam aperiam autem nesciunt soluta. Rerum illo facilis accusantium quis ducimus earum cumque provident porro nihil quo.", | |
| }, | |
| { | |
| "id": 3, | |
| "model": "Lorem ipsum dolor", | |
| "brand": "Honda", | |
| "year": 2015, | |
| "currency": "R$", | |
| "value": 30000, | |
| "seller": "Revenda Herbie", | |
| "cover_image": "images/demo1.jpg", | |
| "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum adipisci ipsam dolore ullam aperiam autem nesciunt soluta. Rerum illo facilis accusantium quis ducimus earum cumque provident porro nihil quo.", | |
| }, | |
| { | |
| "id": 4, | |
| "model": "Lorem ipsum dolor", | |
| "brand": "Chevrolet", | |
| "year": 2015, | |
| "currency": "R$", | |
| "value": 30500, | |
| "seller": "Revenda Herbie", | |
| "cover_image": "images/demo1.jpg", | |
| "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum adipisci ipsam dolore ullam aperiam autem nesciunt soluta. Rerum illo facilis accusantium quis ducimus earum cumque provident porro nihil quo.", | |
| } | |
| ] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| app.service('helloService', function() { | |
| this.hello = function() { | |
| return 'Hello SERVICE!'; | |
| }; | |
| }); | |
| // e basicamente isso aqui acontece | |
| var service = function() { | |
| this.hello = function() { | |
| return 'Hello SERVICE!'; | |
| }; | |
| }; | |
| new service(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment