Created
February 16, 2016 16:03
-
-
Save MagnusThor/afa60c748d614dc0910d to your computer and use it in GitHub Desktop.
a goatish favour for JJ
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
| // Skapa vår app | |
| angular.module("jonas.app", []); | |
| // the controller | |
| (function (angular) { | |
| var myController = function($scope,myService) { | |
| // peker på service's "modell", | |
| $scope.lesson = myService.lesson; | |
| // Hämta "lessons" , förmodligen behvöver du routeParams i controller... | |
| myService.getLessons(); | |
| $scope.poll = function (event) { | |
| myService.pollForLessons("Goats never die..."); | |
| event.target.style.display = "none"; | |
| }; | |
| } | |
| angular.module("jonas.app") | |
| .controller("myController", ["$scope","myService", myController]); | |
| })(angular); | |
| // the service | |
| (function (angular) { | |
| var myService = function ($http, $interval) { | |
| var self = this; | |
| var randomString = function (len) { | |
| return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, len); | |
| }; | |
| // Skapar en exempel modell här , bör ligga i en egen modul, som du injectar | |
| var Lesson = (function () { | |
| // constructor funktionen | |
| var ctor = function (id, title, description, duration) { | |
| this.id = id; | |
| this.title = title; | |
| this.description = description; | |
| this.duration = duration | Math.random() * 60; | |
| }; | |
| return ctor; | |
| })(); | |
| // detta är en mock , borde kanska placeras | |
| // i en egen modul, dvs modellen , lesson | |
| this.lesson = { | |
| title: "Foo Course - Learn to speak goatish..", | |
| updated: new Date(), | |
| description: "Foo is bar ...Goats are nice, nice is goat..", | |
| lessons: [] | |
| }; | |
| this.pollForLessons = function () { | |
| $interval(function () { | |
| // töm array .lesson på lesson | |
| self.lesson.lessons.length = 0; | |
| // hämta datat | |
| self.getLessons(); | |
| }, 4000); | |
| }; | |
| this.getLessons = function() { | |
| $http.get("/foo").then(function(result) { | |
| }).catch(function (err) { | |
| self.lesson.updated = new Date(); | |
| for (var i = 0; i < 10; i++) { | |
| var lesson = new Lesson( | |
| i, | |
| randomString(25), randomString(200)); | |
| self.lesson.lessons.push(lesson); | |
| console.log(lesson); | |
| } | |
| }); | |
| } | |
| } | |
| angular.module("jonas.app").service("myService", ["$http", "$interval", myService | |
| ]); | |
| })(angular); |
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>Strax dags för DH i Järvsö grabben!</title> | |
| <meta charset="utf-8" /> | |
| </head> | |
| <body ng-app="jonas.app"> | |
| <section ng-controller="myController"> | |
| <h1> | |
| {{::lesson.title}} | |
| <small> | |
| {{lesson.updated |date:'HH:mm:ss'}} | |
| </small> | |
| </h1> | |
| <p>{{::lesson.description}}</p> | |
| <p ng-show="!isPolling"> | |
| <button ng-click="poll($event)">Start poll</button> | |
| </p> | |
| <hr /> | |
| <ul> | |
| <li ng-repeat="lesson in lesson.lessons track by $index"> | |
| <span>{{lesson.title}}</span> | |
| <mark>{{lesson.duration}}</mark> | |
| </li> | |
| </ul> | |
| <pre> | |
| {{lesson | json}} | |
| </pre> | |
| </section> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script> | |
| <script src="sample/app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment