I am absolutly new in AngularJS and I am following a course that show a first example of AngularJS application and I have some doubt about how exactly works.
So it is composed by these two files:
1) index.htm:
<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
<head>
<title>Introduction to AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body
{
font-size: 1.1em;
}
</style>
<!-- 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>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<!-- This div and its content is the view associated to the 'mainController': -->
<div ng-controller="mainController">
<h1>Hello world!</h1>
</div>
</div>
</body>
</html>
2) app.js:
/* MODULE: one signgle object in the global namespace.
Everything insise the element having ng-app="angularApp" custom attribute is connected to the angularApp variable into the
global namespace
*/
var angularApp = angular.module('angularApp', []);
// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {
}]);
So I have some doubt about how exactly it works.
From what I have understand into the app.js file it is defined a module that substantially is a single object defined into the global namespace of my application. But what exactly represent a module in AngularJS? I came from the Spring MVC framework (and some other classic MVC) where the module represent the data that have to be shown into a view.
In Angular what exactly represent?
So from what I have understand this module is bound with the entire index.htm page because in the HTML is declared:
<html lang="en-us" ng-app="angularApp">
so I think that the ng-app="angularApp" on the html page means that the angularApp module is related to what happen inside the index.html page. Is it my reasoning correct or it is wrong?
Then inside the app.js file it is also defined a controller:
// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {
}]);
This mainController controller (is it mainController the controller name?) is defined on the angularApp model object.
Ok, I am not so into JavaScript but I think that works in the following way:
The mainController variable is a JavaScript object and by the previous line I am adding a controller field named mainController and the controller logic is implemented by the function associated to this new field (because in JavaScript a function could be a field of an object).
Is it my reasoning true or am I missing something about the controller declaration?
Another doubt is related to the use of the '$scope' variable. What exactly means? and what is the meanining of the syntax ['$scope', function ($scope) { ....CONTROLLER LOGIC....}] ?
This controller is associated to a specific view that is represented by a specific section of the index.htm page, this one:
<!-- This div and its content is the view associated to the 'mainController': -->
<div ng-controller="mainController">
<h1>Hello world!</h1>
</div>
And this generate some confusion in me because it seems pretty different from what I see in other Java MVC implementations.
So differently from Java MVC implementations, in AngularJS a view is not an entire page (as in Java could be a .jsp page) but it is a section of an HTML page bound to a specific controller by the ng-controller="mainController" custom attribute. Is it true?
And also differently from Java MVC implementations, in AngularJS (or in the previous example) a model is not only an object that contain valorized fields to display into a view but it is an object in the global namespace of the application to which are associated the controllers (as model's fields) that perform the operation on the specified view.
Are my reasoning correct or am I missing something?
