mgarbacz/app.js

## app.js
// enable strict mode, we use this in every JS file
// for more info see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
'use strict';

// declare our module and it's dependencies (empty array because there are no deps)
angular.module('example', []);

## example.css
/* ng-cloak hides our templates until Angular is loaded but it needs some CSS help
 * for more info see https://docs.angularjs.org/api/ng/directive/ngCloak
 */

[ng-cloak] {
  display: none;
}

## exampleController.js
'use strict';

// set up controller code with dep on Angular's $scope and our ExampleService
var controller = function($scope, ExampleService) {
  // empty array of `things`
  $scope.things = [];

  // function that calls on our ExampleService to get things
  // if there is an error, we log it and do nothing else
  // if there is no error, we set our things array to the data we got
  $scope.retrieveThings = function() {
    // pass in a callback that accepts error and data as params
    ExampleService.getThings(function(error, data) {
      if (error) {
        console.log('eep!');
      } else {
        $scope.things = data;
      }
    });
  };
};

// declare our controller to the example module as ExampleController
angular.module('example').controller('ExampleController', controller);

## exampleService.js
'use strict';

// set up service code with dep on Angular's $http
var service = function($http) {
  // expose a GET function for things, taking a callback function
  this.getThings = function(callback) {
    // use $http to make a GET call to the url provided
    // on success, call the callback with a `null` for error and then the data
    // on error, call the callback with the error without caring about data
    $http.get('https://api.github.com/users/mgarbacz/repos')
      .success(function(data) {
        return callback(null, data);
      })
      .error(function(error) {
        return callback(error);
      });
  }
};

// declare our service to the example module as ExampleService
angular.module('example').service('ExampleService', service);

## index.html
<!doctype html>
<html lang="en">
  <head>
    <title>Example</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="example.css">
  </head>
  <!-- initialize app, controller, and cloak the view until Angular loads -->
  <body ng-app="example" ng-controller="ExampleController" ng-cloak>

    <!-- call scope's retrieveThings on init -->
    <ul class="things" ng-init="retrieveThings()">
      <!-- use ng-repeat to loop over all scope's things -->
      <li class="thing" ng-repeat="thing in things">
        <!-- depending on structure of thing, put stuff into HTML -->
        {{thing.name}} is {{thing.description}}
      </li>
    </ul>

    <!-- include Angular and our JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="exampleController.js"></script>
    <script src="exampleService.js"></script>

  </body>
</html>
	// enable strict mode, we use this in every JS file
	// for more info see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
	'use strict';

	// declare our module and it's dependencies (empty array because there are no deps)
	angular.module('example', []);
	/* ng-cloak hides our templates until Angular is loaded but it needs some CSS help
	* for more info see https://docs.angularjs.org/api/ng/directive/ngCloak
	*/

	[ng-cloak] {
	display: none;
	}
	'use strict';

	// set up controller code with dep on Angular's $scope and our ExampleService
	var controller = function($scope, ExampleService) {
	// empty array of `things`
	$scope.things = [];

	// function that calls on our ExampleService to get things
	// if there is an error, we log it and do nothing else
	// if there is no error, we set our things array to the data we got
	$scope.retrieveThings = function() {
	// pass in a callback that accepts error and data as params
	ExampleService.getThings(function(error, data) {
	if (error) {
	console.log('eep!');
	} else {
	$scope.things = data;
	}
	});
	};
	};

	// declare our controller to the example module as ExampleController
	angular.module('example').controller('ExampleController', controller);
	'use strict';

	// set up service code with dep on Angular's $http
	var service = function($http) {
	// expose a GET function for things, taking a callback function
	this.getThings = function(callback) {
	// use $http to make a GET call to the url provided
	// on success, call the callback with a `null` for error and then the data
	// on error, call the callback with the error without caring about data
	$http.get('https://api.github.com/users/mgarbacz/repos')
	.success(function(data) {
	return callback(null, data);
	})
	.error(function(error) {
	return callback(error);
	});
	}
	};

	// declare our service to the example module as ExampleService
	angular.module('example').service('ExampleService', service);
	<!doctype html>
	<html lang="en">
	<head>
	<title>Example</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="example.css">
	</head>
	<!-- initialize app, controller, and cloak the view until Angular loads -->
	<body ng-app="example" ng-controller="ExampleController" ng-cloak>

	<!-- call scope's retrieveThings on init -->
	<ul class="things" ng-init="retrieveThings()">
	<!-- use ng-repeat to loop over all scope's things -->
	<li class="thing" ng-repeat="thing in things">
	<!-- depending on structure of thing, put stuff into HTML -->
	{{thing.name}} is {{thing.description}}
	</li>
	</ul>

	<!-- include Angular and our JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
	<script src="app.js"></script>
	<script src="exampleController.js"></script>
	<script src="exampleService.js"></script>

	</body>
	</html>