Skip to content

ganeshuxd/Learn-Angular-2-Development-By-Building-12-Apps

 
 

Repository files navigation

[Eduonix] Learn Angular 2 Development By Building 12 Apps

Join the chat at https://gitter.im/Learn-Angular-2-Development-By-Building-12-Apps/Lobby

Learn Angular 2 Development By Building 12 Apps


Learn Angular 2 Development By Building 12 Apps - 10$ (no ref link, not any interest)
https://www.kickstarter.com/projects/1311831077/learn-angular-2-development-by-building-10-apps


Important!
In the video presents angular 2 RC4!!!

I'm planning to work with Angular 2.0.1 and update projects if necessary to newest versions of angular



I'm working on Ubuntu in docker container with debian jessie:

$ lsb_release -a
Description:	Ubuntu 14.04.5 LTS
Codename:	trusty

$ docker -v
Docker version 1.9.1, build a34a1d5

How to run docker container for start development (If link will not work give me to know about it)


$ node -v
v4.5.0

# npm -v
2.15.9

01 Simple Angular 2 website

Technologies: Twitter Bootstrap


02 A2 Quickstart Setup Explanation

https://angular.io/docs/ts/latest/quickstart.html

$ cd /project/01_Simple_Angular_2_website/
$ npm init

$ npm install
$ npm start

Error:

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'.

We update all project.

Application


03 Navbar Component

https://www.bootstrapcdn.com/
https://code.jquere.com/

http://getbootstrap.com/examples/starter-template/

Application


04 Jumbotron Page Components

http://getbootstrap.com/components/#jumbotron


05 Angular 2 Router

https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

Application


02 Github Profile Searcher

Technologies: Twitter Bootstrap


02 QuickStart Profile Component Setup

https://github.com/angular/quickstart

$ cd 02_Github_Profile_Searcher/
$ git clone --depth=1 https://github.com/angular/quickstart .
$ npm install
$ npm start

http://localhost:3000/

Application


03 Github Service Get User

Application


04 Displaying Profile Data

Application


05 Displaying User Repos

Application


06 Search User Functionality

Looks like i had been banned on github, because I made so many connection to github api.

Application


03 Spotify App

Technologies: Bootswatch


02 Navbar Router Setup

$ cd 03_Spotify_App/
$ git clone --depth=1 https://github.com/angular/quickstart .
$ npm install
$ npm start

https://bootswatch.com/cyborg/
http://getbootstrap.com/examples/starter-template/


Application


03 Search Component Service

https://developer.spotify.com/web-api/endpoint-reference/


Application


04 Search Results

Application


05 Artist Component Route

Application


06 Artist Page Album List

Application


07 Album Component Route

Application


04 MEAN Todos App

Technologies: angular2, nodejs, express, mlab


02 Node.js Express Server Setup

$ cd 04_MEAN_Todos_App/
$ npm init

$ npm install --save body-parser
$ npm install --save ejs
$ npm install --save express
$ npm install --save mongojs

# npm install -g nodemon
$ nodemon server.js

http://localhost:3000/
http://localhost:3000/api/v1/todos


03 Backend API Routes

https://mlab.com/

Create new --> Single-node --> Sandbox

Database name: meantodosapp

Add dabase user: marley

Add collection: todos

Add document:

{
    "text" : "Go Out To Dinner",
    "isCompleted" : false
}

{
    "text" : "Go Food Shopping",
    "isCompleted" : false
}

{ "text" : "Meeting At Work", "isCompleted" : false }


http://localhost:3000/api/v1/todos/
http://localhost:3000/api/v1/todo/57fc0b30dcba0f6a8b615e7c

Application


04 Client Side Setup Bower

$ cd client/
$ npm init
$ git clone --depth=1 https://github.com/angular/quickstart .
$ npm install

// to compile tsc
$ npm run tsc:w


# npm install -g bower
$ cd 04_MEAN_Todos_App/
$ bower init

$ bower install --save bootstrap

Application


05 Todos Component UI

Application


06 Display Todos From MongoDB

Application


07 Saving Todos


08 Updating Todos

Update rows by Enter button

Application


09 Deleting Todos

Application


05 Firebase Business Listings

Technologies: Angular CLI, Firebase, Foundation


02 AngularFire2 Firebase Setup

// to update
# npm install -g npm

# npm install -g angular-cli
$ cd 05_Firebase_Business_Listings
$ ng init --name "firebase_business_listings"
$ ng serve --host 0.0.0.0 --port 3000 --live-reload-port 1337

http://localhost:3000/

Application

$ npm install --save angularfire2
$ npm install --save firebase

https://github.com/angular/angularfire2/


# npm install -g typings
# npm install -g typescript
$ typings install dt~firebase --global --save

$ ng build

https://console.firebase.google.com


Create a project: businesscontacts

Welcome to Firebase page -- > Add Firebaset to your web app

Database --> https://businesscontacts-443c0.firebaseio.com/items --> Import JSON

{
  "Item One" : "This is the body",
  "Item Two" : "This is the body"
}

Database --> RULES

replace

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

on

{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

PUBLISH

Application


03 Business Service

Database --> https://businesscontacts-443c0.firebaseio.com/businesses --> Import JSON



{
    "0": {
        "category": "Retail",
        "city": "Milwaukee",
        "company": "Google",
        "description": "Nulla ut erat id mauris vulputate elementum. Nu...",
        "email": "[email protected]",
        "phone": "1-(414)274-3262",
        "state": "Wisconsin",
        "street_address": "569 Sheriden Terrace",
        "years_in_business": "7",
        "zipcode": "63454"

    },

    "1": {
        "category": "IT",
        "city": "Milwaukee",
        "company": "Apple",
        "description": "Nulla ut erat id mauris vulputate elementum. Nu...",
        "email": "[email protected]",
        "phone": "1-(414)274-3262",
        "state": "Wisconsin",
        "street_address": "569 Sheriden Terrace",
        "years_in_business": "7",
        "zipcode": "63454"

    },

    "2": {
        "category": "IT",
        "city": "Milwaukee",
        "company": "Microsoft",
        "description": "Nulla ut erat id mauris vulputate elementum. Nu...",
        "email": "[email protected]",
        "phone": "1-(414)274-3262",
        "state": "Wisconsin",
        "street_address": "569 Sheriden Terrace",
        "years_in_business": "7",
        "zipcode": "63454"

    }
}

Database --> https://businesscontacts-443c0.firebaseio.com/categories --> Import JSON

{
    "0": {
        "name": "IT"
    },

    "1": {
        "name": "Retail"
    },

    "2": {
        "name": "Auto"
    },

    "3": {
        "name": "Consult"
    }
}

Application


04 Frontend UI with Foundation

https://cdnjs.com/libraries/foundation

Application


05 Category Filter Add Businesses

Application

Application

Application


06 Edit Delete Businesses

Application

Application


06 MyWorkouts - Ionic 2 Mobile App

Maybe later


07 MyWeather - Ionic 2 Mobile App

Maybe later


08 Webmarks Meteor App

Technologies: Meteor


02 Meteor Setup

https://www.meteor.com/install

# apt-get install -y mongodb
# mkdir -p /data/db/
# mongod

# curl https://install.meteor.com/ | sh

$ cd 08_Webmarks_Meteor_App/


$ mkdir -p ~/.meteor/local/db  

To Fix: Mongodb exit code 1, Restarting

# apt-get install -y locales
# dpkg-reconfigure locales

Locales to be generated: 146
Default locale for the system environment: 3

$ meteor run --port 3000

http://localhost:3000

Application

$ meteor remove blaze-html-templates
$ meteor add angular2-compilers barbatus:angular2-runtime

===

So Difficult for me! Because so many obsoleted packages!




email:
Marley

jsdev.org

About

[Eduonix] Learn Angular 2 Development By Building 12 Apps

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 51.0%
  • TypeScript 26.7%
  • HTML 21.7%
  • CSS 0.6%