Created
September 10, 2016 21:27
-
-
Save yoshprogrammer/e398a09356201045882a2a1e934ad54b to your computer and use it in GitHub Desktop.
Angular Help
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
| var socialHacks = angular.module('socialHacks', []); | |
| angular.module('socialHacks').controller('SponsorListCtl', | |
| function ($scope, $http) { | |
| 'use strict'; | |
| //download the sponsor list in a JSON file... | |
| $http.get("sponsors.json").success(function(response) { | |
| //You don't need to parse this, you know it's JSON already | |
| $scope.sponsors = response; | |
| }); | |
| // $scope.sponsors = [ | |
| // { | |
| // "name": "Balsamiq", | |
| // "url": "https://balsamiq.com/", | |
| // "logo": "img/balsamiq.svg", | |
| // "tier": "silver", | |
| // "blurb": "Balsamiq is the maker of https://balsamiq.com/products/mockups the rapid wireframing software that combines the simplicity of paper sketching with the power of a digital tool so that teams can focus on what's important. Balsamiq is a small and personable company that competes on usability and customer service. Balsamiq believes work should be fun, and that life is too short for bad software." | |
| // } | |
| // ]; | |
| $scope.baseLogoUrl = "https://aidan-fitz.github.io/angular-demo/"; | |
| }); |
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>Social Hacks</title> | |
| <!-- Angular 1 --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> | |
| <!-- our custom JS code --> | |
| <script src="dynamiclist.js"></script> | |
| </head> | |
| <body ng-app="socialHacks" ng-controller="SponsorListCtl"> | |
| <h1>Sponsors</h1> | |
| <div ng-repeat="sponsor in sponsors"> | |
| <h3><a href="{{sponsor.url}}"><span ng-bind="::sponsor.name"></span></a></h3> | |
| <-- :: means bind-once, https://docs.angularjs.org/guide/expression -> Under "One-Time binding" --> | |
| <p ng-bind="::sponsor.blurb"></p> | |
| <-- Two ways of going about this, set a base url or modify your JSON file to include the full http url --> | |
| <img ng-src="{{baseLogoUrl}}{{sponsor.logo}}" alt="{{sponsor.name}}" /> | |
| <-- This should work as long as that image lives under the /img directory on the webserver root, if not then that'll throw 404 --> | |
| <img ng-src="{{sponsor.logo}}" alt="{{sponsor.name}}" /> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment