HTML Setup
The HTML page will require:
- an ng-app directive shown below in the html tag
- a script tag to load the angular library
- a script tag to load our JavaScript file
- an ng-controller directive
<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
<head>
...
<!-- load angular via CDN -->
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
...
</header>
<div class="container">
<div ng-controller="mainController">
<h1>Hello world!</h1>
</div>
</div>
</body>
</html>
Some references:
- https://docs.angularjs.org/api/ng/directive/ngApp
- https://docs.angularjs.org/api/ng/directive/ngController
JavaScript Setup
The JavaScript file (app.js) should contain:
- A module declaration that uses the string referenced in the ng-app directive (angularApp).
- A controller declaration that uses the string referenced in the ng-controller tag (mainController)
// MODULE
var angularApp = angular.module('angularApp', []);
// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {
}]);
Some comments:
- The angular.module function returns an angular.Module type.
- the Module.controller function creates and registers a new controller.
- https://docs.angularjs.org/api/ng/function/angular.module
- https://docs.angularjs.org/api/ng/type/angular.Module
Application Structure
We can think of the ngApp as the component that bootstraps the HTML view to the controller. There should only be one ngApp per html document.
A module is a collection of services, directives, controllers, filters, and configuration information.
The Controller class contains business logic behind the application to decorate the scope with functions and values.
Angular will use the scope to modify the DOM and will also use the DOM to modify the controller’s scope (which contains the model).
