Learn AngularJS with Aashni

README.md

@@ -6,6 +6,7 @@ Missed an LSH tutorial? Check out the source code & slides here.
 ### Past Tutorials
 | Tutorial Title        | Location/Time | Speaker Contact Info | Level | Previous Skills Required |
 | :-------------------: | :-----------: | :------------------: | :---: | :----------------------: |
+| [Learn AngularJS](http://blog.aashni.me/2016/08/angularjs-an-introduction/)      | [Online, Aug 16th @ 5pm EST](https://www.facebook.com/events/1748805382027851) | [email protected] | Beginner | HTML/CSS and some Javascript would be a bonus |
 
 ### Upcoming Tutorials
 | Tutorial Title        | Location/Time | Speaker Contact Info | Level | Previous Skills Required |

learn-angularjs/README.md

@@ -0,0 +1,7 @@
+Hey there! Welcome to this multi-part introduction to [AngularJS](https://angularjs.org/), a Javascript based framework to make some kickass websites.
+
+The [Introduction To AngularJS](http://blog.aashni.me/2016/08/angularjs-an-introduction/) is the start of the tutorial and has all the juicy information that you're looking for!
+
+I've broken down this tutorial into five sections that build on top of each other, and hope to add some more sections in the future.
+
+I originally taught this as a virtual class as part of the [Ladies Storm Hackathons Tutorial](https://github.com/Ladies-Storm-Hackathons/Tutorials) series, and decided to convert it into a written tutorial for anyone looking to start learning AngularJS.

learn-angularjs/app.js

@@ -0,0 +1,23 @@
+var angularApp = angular.module('AngularApp', ['ngRoute', 'swapi']);
+
+angularApp.config(['$routeProvider',
+  function($routeProvider){
+    $routeProvider
+    .when('/', {
+      templateUrl : 'views/main.html',
+      controller : 'MainCtrl',
+      controllerAs : 'main'
+    })
+    .when('/character/:id', {
+      templateUrl: 'views/character.html',
+      controller: 'CharacterCtrl',
+      controllerAs: 'character'
+    })
+    .when('/movie/:id', {
+      templateUrl: 'views/movie.html',
+      controller: 'MovieCtrl',
+      controllerAs: 'movie'
+    })
+    .otherwise('/');
+  }
+]);

learn-angularjs/controllers/character.js

@@ -0,0 +1,22 @@
+angularApp.controller('CharacterCtrl', [
+  '$routeParams',
+  '$scope',
+  'SwapiService',
+  function($routeParams, $scope, SwapiService){
+
+    $scope.character = {};
+    $scope.loading = true;
+    $scope.id = $routeParams.id;
+
+    SwapiService.people()
+      .then(function(data) {
+        angular.forEach(data.data.results, function(person) {
+          if (person.name.toLowerCase() === $routeParams.id.toLowerCase()) {
+            angular.copy(person, $scope.character);
+            console.log(person);
+          }
+        });
+        $scope.loading = false;
+    });
+  }
+]);

learn-angularjs/controllers/main.js

@@ -0,0 +1,38 @@
+angularApp.controller('MainCtrl', [ 
+  '$scope',
+  'SwapiService',
+  function($scope, SwapiService){
+    $scope.heading = "Hello World";
+    $scope.message = "This is me";
+
+    $scope.films = {};
+
+    SwapiService.people()
+      .then(function(data) {
+        $scope.data = data.data.results;
+
+        angular.forEach($scope.data, function(person) {
+          // creating a list of all possible films
+          angular.forEach(person.films, function(film) {
+            $scope.films[film] = '';
+          });
+        });
+    });
+
+    SwapiService.films()
+      .then(function(data) {
+        $scope.filmInfo = data.data.results;
+
+        // adding film names to list of films
+        angular.forEach($scope.filmInfo, function(film) {
+          var api_call = 'http://swapi.co/api/films/' + film.episode_id + '/';
+          $scope.films[api_call] = {
+              'title': film.title,
+              'episode_id': film.episode_id
+            };
+        }); 
+    });
+
+
+  }
+]);

learn-angularjs/controllers/movie.js

@@ -0,0 +1,21 @@
+angularApp.controller('MovieCtrl', [
+  '$routeParams',
+  '$scope',
+  'SwapiService',
+  function($routeParams, $scope, SwapiService){
+
+    $scope.movie = {};
+    $scope.loading = true;
+    $scope.id = $routeParams.id;
+
+    SwapiService.films()
+      .then(function(data) {
+        angular.forEach(data.data.results, function(film) {
+          if (film.episode_id == $routeParams.id) {
+            angular.copy(film, $scope.movie);
+          }
+        });
+        $scope.loading = false;
+    });
+  }
+]);

learn-angularjs/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html ng-app="AngularApp">
+<head>
+  <title>Star Wars App</title>
+
+  <!-- include AngualrJS js -->
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.min.js"></script>
+
+  <!-- our files -->
+  <script type="text/javascript" src="app.js"></script>
+
+  <!-- Controllers -->
+  <script type="text/javascript" src="controllers/main.js"></script>
+  <script type="text/javascript" src="controllers/character.js"></script>
+  <script type="text/javascript" src="controllers/movie.js"></script>
+
+  <!-- Services -->
+  <script type="text/javascript" src="services/swapi.js"></script>
+
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+</head>
+<body>
+
+  <div ng-view></div>
+
+</body>
+</html>

learn-angularjs/services/swapi.js

@@ -0,0 +1,31 @@
+var services = angular.module('swapi', []);
+
+services.factory('SwapiService', ['$http', 
+  function($http){
+    function Swapi(){};
+
+    Swapi.domain = 'http://swapi.co/api';
+
+    Swapi.people = function(){
+      var path = '/people';
+      var url = Swapi.domain + path;
+
+      return $http.get(url)
+        .then(function(response){
+          return response;
+        });
+    };
+
+    Swapi.films = function() {
+      var path = '/films';
+      var url = Swapi.domain + path;
+
+      return $http.get(url)
+        .then(function(response){
+          return response;
+        });
+    };
+
+    return Swapi;
+  }
+]);

learn-angularjs/views/character.html

@@ -0,0 +1,63 @@
+<div class="col-md-10 col-md-offset-1" ng-if="loading">
+  <div class="page-header">
+    <h1>Loading...</h1>
+  </div>
+</div>
+
+<div class="col-md-10 col-md-offset-1" ng-if="!loading">
+  <div ng-if="character.name">
+
+    <div class="page-header">
+      <h1>{{ character.name }}</h1>
+    </div>
+
+    <p><a href="#/">Home</a><p>
+
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Name: {{ character.name }}
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Height: {{ character.height }}
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Mass: {{ character.mass }}
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Hair Color: {{ character.hair_color }}
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Eye Color: {{ character.eye_color }}
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Birth Year: {{ character.birth_year }}
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Gender: {{ character.gender }}
+      </div>
+    </div>
+
+  </div>
+
+  <div ng-if="!character.name">
+
+    <div class="page-header">
+      <h1>No one by the name {{ id }} exists :(</h1>
+    </div>
+
+    <a href="#/">Return Home?</a>
+
+  </div>
+</div>

learn-angularjs/views/main.html

@@ -0,0 +1,22 @@
+<div class="col-md-10 col-md-offset-1">
+
+  <div class="page-header">
+    <h1>Star Wars</h1>
+  </div>
+
+  <div class="panel panel-default" ng-repeat="person in data">
+    <div class="panel-heading">
+      <a href="#/character/{{ person.name }}">{{ person.name }}</a>
+    </div>
+    <div class="panel-body">
+      <ul class="btn-group" ng-repeat="film in person.films">
+        <a href="#/movie/{{ films[film].episode_id }}">
+          <button class="btn btn-primary">
+          {{ films[film].title }}
+          </button>
+        </a>  
+      </ul>
+    </div>
+  </div>
+
+</div>

learn-angularjs/views/movie.html

@@ -0,0 +1,56 @@
+<div class="col-md-10 col-md-offset-1" ng-if="loading">
+  <div class="page-header">
+    <h1>Loading...</h1>
+  </div>
+</div>
+
+<div class="col-md-10 col-md-offset-1" ng-if="!loading">
+  <div ng-if="movie.title">
+    <div class="page-header">
+      <h1>Episode {{ id }}: {{ movie.title }}</h1>
+    </div>
+
+    <p><a href="#/">Home</a><p>
+
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Name: {{ movie.title }}
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Opening Crawl:
+        <p>
+          {{ movie.opening_crawl }}
+        </p>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Director: {{ movie.director }}
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Producer: {{ movie.producer }}
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        Release Date: {{ movie.release_date }}
+      </div>
+    </div>
+
+
+  </div>
+
+  <div ng-if="!movie.title">
+
+    <div class="page-header">
+      <h1>There is no Episode {{ id }} yet :(</h1>
+    </div>
+
+    <a href="#/">Return Home?</a>
+
+  </div>
+</div>