From 1b47ddae7c5e062b0a78820683db06af8cf87a19 Mon Sep 17 00:00:00 2001
From: Aashni Shah <contact@aashni.me>
Date: Sun, 21 Aug 2016 03:37:12 +0300
Subject: [PATCH] Learn AngularJS with Aashni

---
 README.md                                |   1 +
 learn-angularjs/.DS_Store                | Bin 0 -> 6148 bytes
 learn-angularjs/README.md                |   7 +++
 learn-angularjs/app.js                   |  23 +++++++++
 learn-angularjs/controllers/character.js |  22 ++++++++
 learn-angularjs/controllers/main.js      |  38 ++++++++++++++
 learn-angularjs/controllers/movie.js     |  21 ++++++++
 learn-angularjs/index.html               |  33 ++++++++++++
 learn-angularjs/services/swapi.js        |  31 +++++++++++
 learn-angularjs/views/character.html     |  63 +++++++++++++++++++++++
 learn-angularjs/views/main.html          |  22 ++++++++
 learn-angularjs/views/movie.html         |  56 ++++++++++++++++++++
 12 files changed, 317 insertions(+)
 create mode 100644 learn-angularjs/.DS_Store
 create mode 100644 learn-angularjs/README.md
 create mode 100644 learn-angularjs/app.js
 create mode 100644 learn-angularjs/controllers/character.js
 create mode 100644 learn-angularjs/controllers/main.js
 create mode 100644 learn-angularjs/controllers/movie.js
 create mode 100644 learn-angularjs/index.html
 create mode 100644 learn-angularjs/services/swapi.js
 create mode 100644 learn-angularjs/views/character.html
 create mode 100644 learn-angularjs/views/main.html
 create mode 100644 learn-angularjs/views/movie.html

diff --git a/README.md b/README.md
index 991b809..2b325ec 100644
--- a/README.md
+++ b/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) | contact@aashni.me | Beginner | HTML/CSS and some Javascript would be a bonus |
 
 ### Upcoming Tutorials
 | Tutorial Title        | Location/Time | Speaker Contact Info | Level | Previous Skills Required |
diff --git a/learn-angularjs/.DS_Store b/learn-angularjs/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6
GIT binary patch
literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I

literal 0
HcmV?d00001

diff --git a/learn-angularjs/README.md b/learn-angularjs/README.md
new file mode 100644
index 0000000..1c99071
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/learn-angularjs/app.js b/learn-angularjs/app.js
new file mode 100644
index 0000000..ec61c1d
--- /dev/null
+++ b/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('/');
+  }
+]);
\ No newline at end of file
diff --git a/learn-angularjs/controllers/character.js b/learn-angularjs/controllers/character.js
new file mode 100644
index 0000000..f79f9da
--- /dev/null
+++ b/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;
+    });
+  }
+]);
\ No newline at end of file
diff --git a/learn-angularjs/controllers/main.js b/learn-angularjs/controllers/main.js
new file mode 100644
index 0000000..0c27a6a
--- /dev/null
+++ b/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
+            };
+        }); 
+    });
+
+ 
+  }
+]);
\ No newline at end of file
diff --git a/learn-angularjs/controllers/movie.js b/learn-angularjs/controllers/movie.js
new file mode 100644
index 0000000..8253ede
--- /dev/null
+++ b/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;
+    });
+  }
+]);
\ No newline at end of file
diff --git a/learn-angularjs/index.html b/learn-angularjs/index.html
new file mode 100644
index 0000000..d94f60f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/learn-angularjs/services/swapi.js b/learn-angularjs/services/swapi.js
new file mode 100644
index 0000000..6232a15
--- /dev/null
+++ b/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;
+  }
+]);
\ No newline at end of file
diff --git a/learn-angularjs/views/character.html b/learn-angularjs/views/character.html
new file mode 100644
index 0000000..b7d39f7
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/learn-angularjs/views/main.html b/learn-angularjs/views/main.html
new file mode 100644
index 0000000..f0d26f3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/learn-angularjs/views/movie.html b/learn-angularjs/views/movie.html
new file mode 100644
index 0000000..6e53668
--- /dev/null
+++ b/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>
\ No newline at end of file