How to create a module in HTML directly? For instance, I would like to create a module like

&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
    First Name: &lt;input type="text" ng-model="firstName"&gt;&lt;br&gt;
    Last Name: &lt;input type="text" ng-model="lastName"&gt;&lt;br&gt;
    &lt;br&gt;
    Full Name: {{firstName + " " + lastName}}
&lt;/div&gt;
&lt;script&gt;
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
&lt;/script&gt;


But what I found is that I have to create the module in PHP (For example, mymodule.module), import JavaScript file using drupal_add_js, create functions to establish a form in phpm etc.

So is there any way or an example to create a module directly with HTML?
No there is no way to create a Drupal module without creating the associated .module (a PHP file) and .info files. If you want your JS file to be inserted on all pages, you can have an empty .module file and add a scripts[] = myscript.js enty in the .info file. Keep in mind that Drupal is a CMS, designed to let site administrator manage content. what you are trying to do looks like embedding a JavaScript application on pages of a site whose content is managed with Drupal. While Drupal is extensible, it is very opinionated on how to build custom page.

Since you module actually mixes JavaScript and HTML, the clean way would be to have the required PHP boilerplate code to produce the HTML markup (ie. register a theme template hook and provides its default implementation) while ensuring the JavaScript file is included on the page whenever you template is rendered. Then have the required PHP code to produce a page containing your markup.

MODULE.module

/*
 * Implements hook_menu().
 */
function MODULE_menu() {
  return array(
    'my-app' =&gt; array(
      'page_callback' =&gt; 'MODULE_page',
    )
  );
}

/*
 * Page callback for MODULE app page.
 */
function MODULE_page() {
   // A simple page containing a single element rendered from out own template.
  return array(
    '#theme' =&gt; 'MODULE_app',
    '#ngApp' =&gt; 'myApp',
    '#ngController' =&gt; 'myCtrl'
  );
}

/**
 * Implements hook_theme().
 */
function MODULE_theme() {
  return array(
    'MODULE_app' =&gt; array(
      'template' =&gt; 'MODULE_app',
      'variables' =&gt; array(
        'ngApp' =&gt; 'myApp',
        'ngController' =&gt; 'myCtrl',
      )
    ),
  );
}

/*
 * Implements  hook_preprocess_HOOK().
 */    
function MODULE_preprocess_MODULE_app(&amp;$varialbles) {
  // Add required libraries, with 
  drupal_add_js(...);
  // Add the custom JavaScript to the page.
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/MODULE-app.js');
  // Add settings for the rendered element to the page.
  drupal_add_js(array('MODULE' =&gt; array($variables['id'] =&gt; array(
    'ng-app' =&gt; $variables['ngApp'],
    'ng-controller' =&gt; $variables['ngController'],
  ))), 'setting');
}


MODULE-app.tpl.php

&lt;?php
/**
 * Add documentation here explaining what this template is and what
 * is expected from any overriding implementation (like having a root element
 * with the ng-app and ng-controller attributes, and what's available in the scope).
 */
?&gt;
&lt;div ng-app="&lt;?php print $ngApp; ?&gt;" ng-controller="&lt;?php print $ngController; ?&gt;"&gt;
    First Name: &lt;input type="text" ng-model="firstName"&gt;&lt;br&gt;
    Last Name: &lt;input type="text" ng-model="lastName"&gt;&lt;br&gt;
    &lt;br&gt;
    Full Name: {{firstName + " " + lastName}}
&lt;/div&gt;


MODULE-app.js

Drupal.behaviors.MODULEApp = {
  attach: function(context, settings) {
    // Bootstrap the Angular app for any instance or our element.
    settings.MODULE.forEach(function(variables) {
      var app = angular.module(variables['ng-app'], []);
          app.controller(variables['ng-controller'], function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
          });
    });  
  }
}