Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-app="App">
  
  <h1>Page Title</h1>
  
  <div ng-cloak ng-controller="announcementController">
    <div ng-repeat="post in posts">
      <h3>{{ post.title }}</h3>
      <p>{{ post.body }}</p>
    </div>
  </div>
​
</body>
</html>
 
angular.module('App', []);
​
class getService {
     static $inject = ["$http", "$window"]
     baseUrl: string = 'https://jsonplaceholder.typicode.com';
​
​
     urlObject = {
         Announcement:  "/posts",
     };
​
     responseObj = {
         Announcement :[],
​
     };
​
     constructor(
         public $http: any,
         private $window: any
     ) { }
​
​
​
     // method utilizing generic promise object for announcements controller
     public getAnnouncements()
     {
         return this.getRequest(this.baseUrl + this.urlObject.Announcement, "Announcement");
​
     }
​
     public passData()
     { 
         return this.responseObj.Announcement;
     }
​
​
     //Generic angular $http promise object
     private getRequest(url: string, responseType:string)
     {
         return this.$http.get(url)
             .then((response) =>
             {
                 this.responseObj[responseType] = response.data;
​
             },
             function (data) {
                 this.$window.alert("Error: " + data);
             });   
     }
}
​
angular.module('App').service("getService", getService);
​
​
​
class announcementController {
    static $inject = ["$rootScope", "$scope", "$window", "getService" ];
​
    Announcement: any = [
        { Message: "test" }
    ];
    constructor(
        public $rootScope: any,
        public $scope: any,
        private $window: any,
        private getService: any)
    {
      this.init();
    }
​
    public getAnnouncements() {
​
        return this.getService.getAnnouncements();
​
    }
​
    public setAnnouncements() {
        this.Announcement = this.getService.passData();
        this.$scope.posts = this.Announcement;
    }
​
    init() {
        console.log('controller init');
        this.getAnnouncements().then(() => {
            this.setAnnouncements();
        });
    }
}
​
angular.module('App').controller("announcementController", announcementController);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers