It is time to create a real AngularJS Single Page Application (SPA).
You have learned more than enough to create your first AngularJS application:
The application file "myNoteApp.js":
The controller file "myNoteCtrl.js":
The <html> element is the container of the AngularJS application: ng-app="myNoteApp":
A a <div> in the HTML page is the scope of a controller: ng-controller="myNoteCtrl":
An ng-model directive binds a <textarea> to the controller variable message:
The two ng-click events invoke the controller functions clear() and save():
An ng-bind directive binds the controller function left() to a <span> displaying the characters left:
Your application libraries are added to the page (after the library):
Above you have the skeleton (scaffolding) of a real life AngularJS, single page application (SPA).
The <html> element is the "container" for the AngularJS application (ng-app=).
A <div> elements defines the scope of an AngularJS controller (ng-controller=).
You can have many controllers in one application.
An application file (my...App.js) defines the application module code.
One or more controller files (my...Ctrl.js) defines the controller code.
The AngularJS library is loaded in <head>, because scripts depend on the library code to be correctly compiled.
The ng-app directive is placed at the root element the application.
For single page applications (SPA), the root of the application is often the <html> element.
One or more ng-controller directives define the application controllers. Each controller has its own scope: the HTML element where they were defined.
AngularJS starts automatically on the HTML DOMContentLoaded event. If an ng-app directive is found, AngularJS will load any module named in the directive, and compile the DOM with ng-app as the root of the application.
The root of the application can be the whole page, or a smaller portion of the page. The smaller the portion, the faster the application will compile and execute.