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
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.
03 Navbar Component
https://www.bootstrapcdn.com/
https://code.jquere.com/
http://getbootstrap.com/examples/starter-template/
04 Jumbotron Page Components
http://getbootstrap.com/components/#jumbotron
05 Angular 2 Router
https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
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
03 Github Service Get User
04 Displaying Profile Data
05 Displaying User Repos
06 Search User Functionality
Looks like i had been banned on github, because I made so many connection to github api.
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/
03 Search Component Service
https://developer.spotify.com/web-api/endpoint-reference/
04 Search Results
05 Artist Component Route
06 Artist Page Album List
07 Album Component Route
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
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
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
05 Todos Component UI
06 Display Todos From MongoDB
07 Saving Todos
08 Updating Todos
Update rows by Enter button
09 Deleting Todos
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
$ 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
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"
}
}
04 Frontend UI with Foundation
https://cdnjs.com/libraries/foundation
05 Category Filter Add Businesses
06 Edit Delete Businesses
Maybe later
Maybe later
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
$ meteor remove blaze-html-templates
$ meteor add angular2-compilers barbatus:angular2-runtime
===
So Difficult for me! Because so many obsoleted packages!