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 0000000..5008ddf Binary files /dev/null and b/learn-angularjs/.DS_Store differ 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 @@ + + + + Star Wars App + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + \ 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 @@ +
+
+

Loading...

+
+
+ +
+
+ +
+

{{ character.name }}

+
+ +

Home

+ +

+
+ Name: {{ character.name }} +
+
+
+
+ Height: {{ character.height }} +
+
+
+
+ Mass: {{ character.mass }} +
+
+
+
+ Hair Color: {{ character.hair_color }} +
+
+
+
+ Eye Color: {{ character.eye_color }} +
+
+
+
+ Birth Year: {{ character.birth_year }} +
+
+
+
+ Gender: {{ character.gender }} +
+
+ +
+ +
+ +
+

No one by the name {{ id }} exists :(

+
+ + Return Home? + +
+
\ 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 @@ +
+ +
+

Star Wars

+
+ +
+
+ {{ person.name }} +
+
+ +
+
+ +
\ 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 @@ +
+
+

Loading...

+
+
+ +
+
+
+

Episode {{ id }}: {{ movie.title }}

+
+ +

Home

+ +

+
+ Name: {{ movie.title }} +
+
+
+
+ Opening Crawl: +

+ {{ movie.opening_crawl }} +

+
+
+
+
+ Director: {{ movie.director }} +
+
+
+
+ Producer: {{ movie.producer }} +
+
+
+
+ Release Date: {{ movie.release_date }} +
+
+ + +
+ +
+ +
+

There is no Episode {{ id }} yet :(

+
+ + Return Home? + +
+
\ No newline at end of file