{"id":28365102,"url":"https://github.com/webmakaka/learn-angular-2-development-by-building-12-apps","last_synced_at":"2026-04-28T01:32:36.796Z","repository":{"id":56449847,"uuid":"310616040","full_name":"webmakaka/Learn-Angular-2-Development-By-Building-12-Apps","owner":"webmakaka","description":"[Eduonix] Learn Angular 2 Development By Building 12 Apps [ENG, 2016]","archived":false,"fork":false,"pushed_at":"2020-11-06T17:00:16.000Z","size":4503,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-12T20:02:55.100Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webmakaka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-06T14:15:27.000Z","updated_at":"2024-06-13T20:15:48.000Z","dependencies_parsed_at":"2022-08-15T19:00:42.444Z","dependency_job_id":null,"html_url":"https://github.com/webmakaka/Learn-Angular-2-Development-By-Building-12-Apps","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webmakaka/Learn-Angular-2-Development-By-Building-12-Apps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmakaka%2FLearn-Angular-2-Development-By-Building-12-Apps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmakaka%2FLearn-Angular-2-Development-By-Building-12-Apps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmakaka%2FLearn-Angular-2-Development-By-Building-12-Apps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmakaka%2FLearn-Angular-2-Development-By-Building-12-Apps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webmakaka","download_url":"https://codeload.github.com/webmakaka/Learn-Angular-2-Development-By-Building-12-Apps/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmakaka%2FLearn-Angular-2-Development-By-Building-12-Apps/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32362781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T20:07:02.737Z","status":"ssl_error","status_checked_at":"2026-04-27T20:07:00.910Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular"],"created_at":"2025-05-28T21:09:52.462Z","updated_at":"2026-04-28T01:32:36.789Z","avatar_url":"https://github.com/webmakaka.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Eduonix] Learn Angular 2 Development By Building 12 Apps [ENG, 2016]\n\n\n![Learn Angular 2 Development By Building 12 Apps](/img/angular-js.png?raw=true)\n\n\n\u003cbr/\u003e\n\n**[InfoLink] Learn Angular 2 Development By Building 12 Apps**  \nhttps://www.kickstarter.com/projects/1311831077/learn-angular-2-development-by-building-10-apps\n\n\u003cbr/\u003e\n\n**Important!**   \nIn the video presents angular 2 RC4!!!\n\nI'm planning to work with Angular 2.0.1 and update projects if necessary to newest versions of angular\n\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\nI'm working on Ubuntu in docker container with debian jessie:\n\n    $ lsb_release -a\n    Description:\tUbuntu 14.04.5 LTS\n    Codename:\ttrusty\n\n\u003cbr/\u003e\n\n    $ docker -v\n    Docker version 1.9.1, build a34a1d5\n\n\n\u003ca href=\"http://jsdev.org/env/docker/run-container/linux/\"\u003eHow to run docker container for start development\u003c/a\u003e\n(If link will not work give me to know about it)\n\n\u003cbr/\u003e\n\n    $ node -v\n    v4.5.0\n\n\u003cbr/\u003e\n\n    # npm -v\n    2.15.9\n\n\n\u003cbr/\u003e\n\n### 01 Simple Angular 2 website\n\nTechnologies: Twitter Bootstrap\n\n\u003cbr/\u003e\n\n02 A2 Quickstart Setup Explanation\n\n\nhttps://angular.io/docs/ts/latest/quickstart.html\n\n    $ cd /project/01_Simple_Angular_2_website/\n    $ npm init\n\n    $ npm install\n    $ npm start\n\n**Error**:\n\n    app/main.ts(1,10): error TS2305: Module '\"/project/01_Simple_Angular_2_website/node_modules/@angular/platform-browser-dynamic/index\"' has no exported member 'bootstrap'.\n\n\nWe update all project.\n\n![Application](/img/project_01_img_01.png?raw=true)\n\n\n\u003cbr/\u003e\n\n03 Navbar Component\n\nhttps://www.bootstrapcdn.com/  \nhttps://code.jquere.com/\n\nhttp://getbootstrap.com/examples/starter-template/\n\n\n![Application](/img/project_01_img_02.png?raw=true)\n\n\n\u003cbr/\u003e\n\n04 Jumbotron Page Components\n\nhttp://getbootstrap.com/components/#jumbotron\n\n\n\u003cbr/\u003e\n\n05 Angular 2 Router\n\nhttps://angular.io/docs/ts/latest/tutorial/toh-pt5.html\n\n![Application](/img/project_01_img_03.png?raw=true)\n\n\n\n\u003cbr/\u003e\n\n### 02 Github Profile Searcher\n\n**Technologies:** Twitter Bootstrap\n\n\u003cbr/\u003e\n\n02 QuickStart Profile Component Setup\n\nhttps://github.com/angular/quickstart\n\n    $ cd 02_Github_Profile_Searcher/\n    $ git clone --depth=1 https://github.com/angular/quickstart .\n    $ npm install\n    $ npm start\n\nhttp://localhost:3000/\n\n\n![Application](/img/project_02_img_01.png?raw=true)\n\n\u003cbr/\u003e\n\n03 Github Service Get User\n\n![Application](/img/project_02_img_02.png?raw=true)\n\n\n\u003cbr/\u003e\n\n04 Displaying Profile Data\n\n![Application](/img/project_02_img_03.png?raw=true)\n\n\n\u003cbr/\u003e\n\n05 Displaying User Repos\n\n![Application](/img/project_02_img_04.png?raw=true)\n\n\n\u003cbr/\u003e\n\n06 Search User Functionality\n\nLooks like i had been banned on github, because I made so many connection to github api.\n\n![Application](/img/project_02_img_05.png?raw=true)\n\n\n\u003cbr/\u003e\n\n### 03 Spotify App\n\n**Technologies:** Bootswatch\n\n\n\u003cbr/\u003e\n\n02 Navbar Router Setup\n\n    $ cd 03_Spotify_App/\n    $ git clone --depth=1 https://github.com/angular/quickstart .\n    $ npm install\n    $ npm start\n\n\u003cbr/\u003e\n\nhttps://bootswatch.com/cyborg/  \nhttp://getbootstrap.com/examples/starter-template/  \n\n\u003cbr/\u003e\n\n![Application](/img/project_03_img_01.png?raw=true)\n\n\n\u003cbr/\u003e\n\n03 Search Component Service\n\nhttps://developer.spotify.com/web-api/endpoint-reference/\n\n\u003cbr/\u003e\n\n![Application](/img/project_03_img_02.png?raw=true)\n\n\n\u003cbr/\u003e\n\n04 Search Results\n\n![Application](/img/project_03_img_03.png?raw=true)\n\n\n\u003cbr/\u003e\n\n05 Artist Component Route\n\n![Application](/img/project_03_img_04.png?raw=true)\n\n\u003cbr/\u003e\n\n06 Artist Page Album List\n\n![Application](/img/project_03_img_05.png?raw=true)\n\n\u003cbr/\u003e\n\n07 Album Component Route\n\n![Application](/img/project_03_img_06.png?raw=true)\n\n\n\u003cbr/\u003e\n\n### 04 MEAN Todos App\n\n**Technologies:** angular2, nodejs, express, mlab\n\n\u003cbr/\u003e\n\n02 Node.js Express Server Setup\n\n    $ cd 04_MEAN_Todos_App/\n    $ npm init\n\n    $ npm install --save body-parser\n    $ npm install --save ejs\n    $ npm install --save express\n    $ npm install --save mongojs\n\n\u003cbr/\u003e\n\n    # npm install -g nodemon\n    $ nodemon server.js\n\n\nhttp://localhost:3000/  \nhttp://localhost:3000/api/v1/todos\n\n\n\u003cbr/\u003e\n\n03 Backend API Routes\n\nhttps://mlab.com/\n\nCreate new --\u003e Single-node --\u003e Sandbox\n\nDatabase name: meantodosapp\n\nAdd dabase user: marley\n\nAdd collection: todos\n\nAdd document:\n\n    {\n        \"text\" : \"Go Out To Dinner\",\n        \"isCompleted\" : false\n    }\n\n\u003cbr/\u003e    \n\n    {\n        \"text\" : \"Go Food Shopping\",\n        \"isCompleted\" : false\n    }\n\n\u003cbr/\u003e   \n\n{\n    \"text\" : \"Meeting At Work\",\n    \"isCompleted\" : false\n}\n\n\u003cbr/\u003e\n\nhttp://localhost:3000/api/v1/todos/  \nhttp://localhost:3000/api/v1/todo/57fc0b30dcba0f6a8b615e7c\n\n\n![Application](/img/project_04_img_01.png?raw=true)\n\n\u003cbr/\u003e\n\n04 Client Side Setup Bower\n\n    $ cd client/\n    $ npm init\n    $ git clone --depth=1 https://github.com/angular/quickstart .\n    $ npm install\n\n    // to compile tsc\n    $ npm run tsc:w\n\n\n    # npm install -g bower\n    $ cd 04_MEAN_Todos_App/\n    $ bower init\n\n    $ bower install --save bootstrap\n\n\n![Application](/img/project_04_img_02.png?raw=true)\n\n\n\u003cbr/\u003e\n\n05 Todos Component UI\n\n![Application](/img/project_04_img_03.png?raw=true)\n\n\u003cbr/\u003e\n\n06 Display Todos From MongoDB\n\n![Application](/img/project_04_img_04.png?raw=true)\n\n\u003cbr/\u003e\n\n07 Saving Todos\n\n\u003cbr/\u003e\n\n08 Updating Todos\n\nUpdate rows by Enter button\n\n![Application](/img/project_04_img_05.png?raw=true)\n\n\u003cbr/\u003e\n\n09 Deleting Todos\n\n![Application](/img/project_04_img_06.png?raw=true)\n\n\u003cbr/\u003e\n\n### 05 Firebase Business Listings\n\n**Technologies:** Angular CLI, Firebase, Foundation\n\n\u003cbr/\u003e\n\n02 AngularFire2 Firebase Setup\n\n    // to update\n    # npm install -g npm\n\n    # npm install -g angular-cli\n    $ cd 05_Firebase_Business_Listings\n    $ ng init --name \"firebase_business_listings\"\n    $ ng serve --host 0.0.0.0 --port 3000 --live-reload-port 1337\n\n\nhttp://localhost:3000/\n\n\n![Application](/img/project_05_img_01.png?raw=true)\n\n\n    $ npm install --save angularfire2\n    $ npm install --save firebase\n\nhttps://github.com/angular/angularfire2/\n\n\n\u003cbr/\u003e\n\n    # npm install -g typings\n    # npm install -g typescript\n    $ typings install dt~firebase --global --save\n\n\u003cbr/\u003e\n\n    $ ng build\n\n\u003cbr/\u003e\n\nhttps://console.firebase.google.com\n\n\u003cbr/\u003e\n\nCreate a project: businesscontacts\n\nWelcome to Firebase page -- \u003e Add Firebaset to your web app\n\n\nDatabase --\u003e https://businesscontacts-443c0.firebaseio.com/items --\u003e Import JSON\n\n\n    {\n      \"Item One\" : \"This is the body\",\n      \"Item Two\" : \"This is the body\"\n    }\n\n\n\nDatabase --\u003e RULES\n\nreplace\n\n    {\n      \"rules\": {\n        \".read\": \"auth != null\",\n        \".write\": \"auth != null\"\n      }\n    }\n\non\n\n    {\n      \"rules\": {\n        \".read\": \"true\",\n        \".write\": \"true\"\n      }\n    }\n\nPUBLISH\n\n\n![Application](/img/project_05_img_02.png?raw=true)\n\n\n\u003cbr/\u003e\n\n03 Business Service\n\n\nDatabase --\u003e https://businesscontacts-443c0.firebaseio.com/businesses --\u003e Import JSON\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n    {\n        \"0\": {\n            \"category\": \"Retail\",\n            \"city\": \"Milwaukee\",\n            \"company\": \"Google\",\n            \"description\": \"Nulla ut erat id mauris vulputate elementum. Nu...\",\n            \"email\": \"kshaw@phoca.cz\",\n            \"phone\": \"1-(414)274-3262\",\n            \"state\": \"Wisconsin\",\n            \"street_address\": \"569 Sheriden Terrace\",\n            \"years_in_business\": \"7\",\n            \"zipcode\": \"63454\"\n\n        },\n\n        \"1\": {\n            \"category\": \"IT\",\n            \"city\": \"Milwaukee\",\n            \"company\": \"Apple\",\n            \"description\": \"Nulla ut erat id mauris vulputate elementum. Nu...\",\n            \"email\": \"kshaw@phoca.cz\",\n            \"phone\": \"1-(414)274-3262\",\n            \"state\": \"Wisconsin\",\n            \"street_address\": \"569 Sheriden Terrace\",\n            \"years_in_business\": \"7\",\n            \"zipcode\": \"63454\"\n\n        },\n\n        \"2\": {\n            \"category\": \"IT\",\n            \"city\": \"Milwaukee\",\n            \"company\": \"Microsoft\",\n            \"description\": \"Nulla ut erat id mauris vulputate elementum. Nu...\",\n            \"email\": \"kshaw@phoca.cz\",\n            \"phone\": \"1-(414)274-3262\",\n            \"state\": \"Wisconsin\",\n            \"street_address\": \"569 Sheriden Terrace\",\n            \"years_in_business\": \"7\",\n            \"zipcode\": \"63454\"\n\n        }\n    }\n\n\u003cbr/\u003e\n\nDatabase --\u003e https://businesscontacts-443c0.firebaseio.com/categories --\u003e Import JSON\n\n    {\n        \"0\": {\n            \"name\": \"IT\"\n        },\n\n        \"1\": {\n            \"name\": \"Retail\"\n        },\n\n        \"2\": {\n            \"name\": \"Auto\"\n        },\n\n        \"3\": {\n            \"name\": \"Consult\"\n        }\n    }\n\n\n![Application](/img/project_05_img_03.png?raw=true)\n\n\u003cbr/\u003e\n\n04 Frontend UI with Foundation\n\nhttps://cdnjs.com/libraries/foundation\n\n\n![Application](/img/project_05_img_04.png?raw=true)\n\n\n\u003cbr/\u003e\n\n05 Category Filter Add Businesses\n\n![Application](/img/project_05_img_05.png?raw=true)\n\n![Application](/img/project_05_img_06.png?raw=true)\n\n![Application](/img/project_05_img_07.png?raw=true)\n\n\n\u003cbr/\u003e\n\n06 Edit Delete Businesses\n\n\n![Application](/img/project_05_img_08.png?raw=true)\n\n![Application](/img/project_05_img_09.png?raw=true)\n\n\n\u003cbr/\u003e\n\n### 06 MyWorkouts - Ionic 2 Mobile App\n\nMaybe later\n\n\u003cbr/\u003e\n\n### 07 MyWeather - Ionic 2 Mobile App\n\nMaybe later\n\n\u003cbr/\u003e\n\n### 08 Webmarks Meteor App\n\n**Technologies:** Meteor\n\n\u003cbr/\u003e\n\n02 Meteor Setup\n\nhttps://www.meteor.com/install\n\n    # apt-get install -y mongodb\n    # mkdir -p /data/db/\n    # mongod\n\n\u003cbr/\u003e\n\n    # curl https://install.meteor.com/ | sh\n\n    $ cd 08_Webmarks_Meteor_App/\n\n\n    $ mkdir -p ~/.meteor/local/db  \n\n\nTo Fix: Mongodb exit code 1, Restarting\n\n    # apt-get install -y locales\n    # dpkg-reconfigure locales\n\nLocales to be generated: 146  \nDefault locale for the system environment: 3  \n\n    $ meteor run --port 3000\n\nhttp://localhost:3000\n\n![Application](/img/project_08_img_01.png?raw=true)\n\n\n    $ meteor remove blaze-html-templates\n    $ meteor add angular2-compilers barbatus:angular2-runtime\n\n===\n\nSo Difficult for me! Because so many obsoleted packages!\n\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n**Marley**\n\nAny questions in english: \u003ca href=\"https://jsdev.org/chat/\"\u003eTelegram Chat\u003c/a\u003e  \nЛюбые вопросы на русском: \u003ca href=\"https://jsdev.ru/chat/\"\u003eТелеграм чат\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmakaka%2Flearn-angular-2-development-by-building-12-apps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebmakaka%2Flearn-angular-2-development-by-building-12-apps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmakaka%2Flearn-angular-2-development-by-building-12-apps/lists"}