You can have more than one website running on the same web server, using host headers / virtual hosts. This is a mechanism where the web server looks at the hostname the browser supplied (used to reach the web server) and serves content from the appropriate website.
You don't even need to define different ports for http websites if you define them each with unique host headers. If you'd rather have different ports then this is also pretty easy in most web servers (you don't say what web server you're using).
As for how to set up the names of the sites, this is also fairly easy, though its not really anything to do with active directory, and I wouldn't personally use hosts files for anything other than dev testing on a local webserver. You would simply create entries in DNS for the two website addresses, pointing to the web server.
So you'd create an "A" record for the hostname & IP address of the web server itself (e.g. mywebserver.example.com) and then use two "CNAME" records (aliases) that point example.com and app.example.com at that A record. This tells any client that looks up either of those two website addresses in DNS to use the IP address defined for the webserver itself.
update to address edit
There's no way to have port number included in in a host name or IP address. Your users will have to type in example.com:8080 and app.example.com:9090. What you're asking for is outside the scope of what can be done in DNS or hosts files because its not related to name resolution.
The two ways to get around that that I can think of would be
To create two seperate virtual servers, each with the application installed on a webserver listening on port 80.
Install IIS (or whatever) on port 80 and have a site for each host header there, as I describe above. Then use redirection from each site to the "correct" one listening at whatever port.