API Driven Application - AngulatJS, NodeJS and MongoDB | JCertif Tunisia 2015
•
1 like•789 views
API Driven Application Angular JS , NodeJS and MongoDB
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to API Driven Application - AngulatJS, NodeJS and MongoDB | JCertif Tunisia 2015
Similar to API Driven Application - AngulatJS, NodeJS and MongoDB | JCertif Tunisia 2015 (20)
More from Hamdi Hmidi
More from Hamdi Hmidi (12)
Recently uploaded
Recently uploaded (20)
API Driven Application - AngulatJS, NodeJS and MongoDB | JCertif Tunisia 2015
- 1. API Driven Applications AngularJS, NodeJS and MongoDB @HmidiHamdi JSA | JCertif TN Software Engeneering | ISSATSo Member & Founder | ISSATSo Google Club
- 2. Agenda - API Driven Application - Getting started with Angular JS - Basics Of Node JS - Discovering MongoDB
- 4. REST API REST = Representation State Transfer. - Client Sends HTTP verbs(GET, POST, DELETE, PUT) along with a URL and variable parameters that are unlencoded. - The URL tells us what object to act on. - Server Replies with a result code and valid JSON.
- 5. HTTP Verbs - CRUD - GET : when a client want to read an object. - POST : when a client want to ceate an object. - PUT : when a client want to update an object. - DELETE : when a client want to delete an object.
- 6. Why REST API ? a simple way to create a data service enabling you to easy create all your other applications: - HTML5 / JAVASCRIPT. - ANDROID. - IOS.
- 7. MEAN STACK M : MongoDB (Most Popular NoSql DataBase). E : ExpressJS (Web Application Framework). A : AngularJS (A Robust Framework for creating HTML5 and Javascript rich web Applications). N : NodeJS (Server-side Javascript interpreter).
- 10. ● ● ● ●
- 11. ● ● ● ● ●
- 12. <!doctype html> <html> <head ng-app > <title>Exemple 1</title> <SCRIPT TYPE="text/javascript" src="JS/angular.min.js"> </SCRIPT> </head> <body > <input type="text" ng-model="name" > <h1>Hello {{name}} </h1> </body> </html>
- 13. Directives <html ng-app> <input type="text" ng-model="name" > <ng-view > </ng-view>
- 14. Model
- 16. Events ● ng-click ● ng-hide/ng-show ● ng-dbl-click ● ng-keydown ● ng-keyup
- 17. Routing
- 18. AJAX
- 19. Let’s Drive in
- 21. What is NodeJS ? ● Open Source, Cross-platform runtime environment for server-side and networking applications. ● NodeJS provides an Event-Driven architecture and non-blocking I/O API. ● Run your Javascript on Server. ● Uses V8 Engine.
- 22. Hello Node JS
- 24. Express JS
- 25. Uses app.use(express.static(__dirname + '/Public')); // set the static files location /public/img will be /img for users app.use(morgan('dev')); // log every request to the console app.use(bodyParser.urlencoded({'extended':'true'})); // parse application/x-www-form-urlencoded app.use(bodyParser.json()); // parse application/json app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json app.use(methodOverride());
- 26. Routes app.get('/todos/:id', function (req, res, next) { var todo=getTodo(id); res.json(todo); }); ------------- app.get('/todos', function (req, res, next) { var todos= getTodos(); res.json(todos); });
- 28. What is MongoDB? MongoDB is an Open-Source document- oriented NoSQL database. It stores data in JSON-like format.
- 29. Why use MongoDB ? - SQL databases was invented to store data. - MongoDB stores documents (or) Objects. - now-a-days, everyone works with Objects (Python/Ruby/Java/etc). - And we need Databases to persist our objects. - why not store objects directly? - Embedded documents and arrays reduce need for Join.
- 30. MongoDB Tools ● Mongo : MongoDB client as a Javascript shell. ● MongoImport : import CSV, JSON and TSV data. ● MongoExport : export data as JSON and CSV.
- 31. NoSQL DataBase Terms: DataBase : Like other Relational DataBases. Collection : Like Table in RDBMS(Has no common Schema). Document : Like a Record in RDBMS or Row. Field : Like a RDBMS column {key : value }.
- 32. Mongoose CRUD(Create, Read, Update, Delete) var mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/MyApp'); var SpeakerSchema = new mongoose.Schema({ name : String , img : String, detail : String }); var Speaker = mongoose.model('Speaker',SpeakerSchema);
- 33. Create app.post('/NewSpeaker',function(req,res){ var sp = new Speaker({ name : req.body.nameS, img : req.body.imgS, detail: req.body.det }); sp.save(function(err){ if(err) console.log(err); else res.json(sp); }); });
- 34. Read app.get('/getSpeakers/:Name',function(req,res){ Speaker.findOne({ name: req.params.Name }, function (err, doc){ if (err){ res.send(err); } res.json(doc); }); }); app.get('/getSpeakers',function(req,res){ Speaker.find(function(err, todos) { if (err){ res.send(err); } res.json(todos); // return all todos in JSON format }); });
- 35. Update ● Model.update(conditions, update, [options], [callback])
- 36. Delete ● Model.remove(conditions, [callback]) app.delete('/DeleteSpeaker/:id',function(req,res){ Speaker.remove({ _id : req.params.id}, function (err) { if (err) return res.send(err); res.json({"result":"success"}); }); });
- 37. <Coding Time !>