Download as PDF, PPTX
![Route (JS) GET /users/all -> function(req,res) { //1. Fetch from DB User.findAll( … //2. Render view res.render( ‘users/all’, { users : users } ); } [ { "id" : 1, "username" : "joao", "firstname" : "João", "surname" : "Rocha" } ] <html> <h1>Viewing users</h1> <% for (var user in users… ) { %> Username : <%=user. username%> First Name: <%=users.firstname%> <% } %> </html> Model Route View Client requests http://127.0.0.1:3000/users/all Return Object array](https://image.slidesharecdn.com/angularexpresslbaw2016-160429145718/75/Web-Development-with-AngularJS-NodeJS-and-ExpressJS-11-2048.jpg)
Uploaded byJoão Rocha da Silva
Web Development with AngularJS, NodeJS and ExpressJS
The document provides an overview of the MEAN stack, which includes Node.js, Express.js, and AngularJS, highlighting their functionalities and advantages. It emphasizes Node.js as a high-performance JavaScript runtime that allows for asynchronous processing and low memory consumption, while Express.js serves as a framework for server-side applications and AngularJS facilitates client-side development. The document also touches on live coding sessions and showcases a collaborative approach to mobile and web application development using JSON APIs.
Web Development with AngularJS, NodeJS and ExpressJS
- 1. Laboratory of Databasesand Web Applications Web development using Express, Node, Angular João Rocha da Silva (FEUP InfoLab, room I123) Contact: joaorosilva@gmail.com
- 2. Contents 1. The MEANStack 2. NodeJS High-performance Javascript-based runtime environment 3. ExpressJS An MVC web applications framework 4. AngularJS Google framework for client apps in the browser 5. Live coding session + questions
- 3. Javascript across thewhole stack Image from https://codegeekk. wordpress.com/2015/03/07/explore- mean-stack-at-2015/
- 4.
- 5. NodeJS ● JavaScript “onthe server side” ● Built on Google’s Chrome V8 Javascript engine ○ Compiles JavaScript code to native machine code instead of interpreting in real time ● Vibrant open-source community ○ Huge ecosystem of free libraries
- 6. NodeJS (continued) ● Singlethread, event-driven ○ Asynchronous, nonblocking I/O (i.e. not blocking the main thread) ○ Numerous & simultaneous I/O operations become faster ● Very low memory consumption vs PHP, for example ○ Single process ○ Many more simultaneous connections per server instance ○ Node sleeps when there is nothing to be done ● Multicore support also available for clusters In https://nodejs.org/en/about/ http://blog.soulserv.net/tag/node-js-vs-php/
- 7. // Load thehttp module to create an http server. var http = require('http'); // Configure our HTTP server to respond with Hello World to all requests. var server = http.createServer(function (request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.end("Hello Worldn"); }); // Listen on port 8000, IP defaults to 127.0.0.1 server.listen(8000); // Put a friendly message on the terminal console.log("Server running at http://127.0.0.1:8000/"); In https://nodejs.org/en/about/
- 8.
- 9.
- 10. id username firstnamesurname 1 joao João Rocha Example: Listing all users Database table
- 11. Route (JS) GET /users/all-> function(req,res) { //1. Fetch from DB User.findAll( … //2. Render view res.render( ‘users/all’, { users : users } ); } [ { "id" : 1, "username" : "joao", "firstname" : "João", "surname" : "Rocha" } ] <html> <h1>Viewing users</h1> <% for (var user in users… ) { %> Username : <%=user. username%> First Name: <%=users.firstname%> <% } %> </html> Model Route View Client requests http://127.0.0.1:3000/users/all Return Object array
- 12. Database Querying API Model instancesModel Object-RelationalMapping (ORM) for NodeJS ● User “Class” “One for each DB table” ● Instances “One for each table row”
- 13. Sequelize is apromise-based ORM for Node.js and io. js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite and MSSQL and features solid transaction support, relations, read replication and more. Sequelize API Docs: http://docs.sequelizejs. com/en/latest/api/model/#findalloptions- promisearrayinstance
- 14. Lots of librarieson the ecosystem Package manager for the web CSS, JS, HTML, Images... Bower Package manager for NodeJS Libraries Node Package Manager
- 15.
- 16. AngularJS ● HTML isgood for presenting information ○ But NOT good for storing it ● jQuery uses the DOM to store information, and you need to set and get by element ID (usually) ○ Huge side effects as the code grows and different parts of the web page are modified at the same time by many events ○ Harder and harder to debug and maintain ● No one likes to maintain spaghetti code...
- 17. ● Angular separatesbusiness logic and data from the presentation ○ Services and Factories for data access and storage ○ Views for presentation ○ Controllers are the “glue” between data and presentation ○ Routes switch between Views (Single Page Application) AngularJS (cont’d)
- 18.
- 19. AngularJS + ExpressJSare good friends ● Excellent for supporting Mobile Apps + Web site ○ Implement a single JSON-based API ○ Consume JSON on mobile devices ○ Same JSON can be used to generate HTML on the client ○ No need to test two separate APIs, because the site itself uses the “mobile” API
- 20.
- 21. Code for thispresentation available at https://github.com/silvae86/lbaw_2016_tutorial João Rocha da Silva is just finishing an Informatics Engineering PhD at FEUP. He specializes on research data management, applying the latest Semantic Web Technologies to the adequate preservation and discovery of research data assets. He is experienced in many programming languages (Javascript-Node, PHP with MVC frameworks, Ruby on Rails, J2EE, etc etc) running on the major operating systems (everyday Mac user). Regardless of language, he is a quick learner that can adapt to any new technology quickly and effectively.