Currently, I am diving into the world of AngularJS and taking a course that introduces me to my first AngularJS application. However, I find myself puzzled about its functionality.
This application consists of two main 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">
<!-- loading 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>
<!-- loading 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 contents are associated with the 'mainController': -->
<div ng-controller="mainController">
<h1>Hello world!</h1>
</div>
</div>
</body>
</html>
2) app.js:
/* MODULE: represents a single object in the global namespace.
Everything inside the element having the custom attribute ng-app="angularApp" is linked to the angularApp variable within the
global namespace
*/
var angularApp = angular.module('angularApp', []);
// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {
}]);
While going through the code, questions arise regarding how it operates.
In my understanding from the app.js file, a module is defined which is essentially a singular object within the global namespace of my application. But what does a module signify in AngularJS? Previously, I have worked with the Spring MVC framework (and some other traditional MVC frameworks) where the module depicts the data displayed in a view.
So what role does it serve in Angular?
From my comprehension, this module is intricately connected to the entire index.htm page because it's declared in the HTML as:
<html lang="en-us" ng-app="angularApp">
Therefore, the statement ng-app="angularApp" on the HTML page suggests that the angularApp module correlates to the events occurring within the index.html page. Is my interpretation accurate or flawed?
Furthermore, within the app.js file, there's also a definition for a controller:
// CONTROLLERS
angularApp.controller('mainController', ['$scope', function ($scope) {
}]);
Is mainController the designated controller name here? It’s established under the angularApp model object.
My perspective on this may seem basic, especially since I'm not well-versed in JavaScript. Here's my understanding:
The mainController variable is an object in JavaScript, and by the preceding line, a controller field named mainController is being added. The logic pertaining to the controller is implemented by the function associated with this new field (as functions can be fields of objects in JavaScript).
Is my explanation correct or lacking some key detail about the controller declaration?
Another point of confusion lies in the use of the '$scope' variable. What purpose does it serve? And what significance does the syntax ['$scope', function ($scope) { ....CONTROLLER LOGIC....}] hold?
This particular controller is linked to a specific view represented by a distinct section of the index.htm page, namely this one:
<!-- This div and its content is the view associated with the 'mainController': -->
<div ng-controller="mainController">
<h1>Hello world!</h1>
</div>
These details lead to some confusion for me, as they appear quite different from what I've encountered in other Java MVC implementations.
Unlike Java MVC structures, in AngularJS, a view isn't an entire page (like a .jsp page in Java), rather it's a segment of an HTML page bound to a specific controller through the ng-controller="mainController" custom attribute. Isn’t that right?
Additionally, contrary to Java MVC setups, in AngularJS (or in the scenario above), a model isn't just an object containing populated fields for display but is actually an object within the application's global namespace, linked to controllers (acting as fields of the model) responsible for operations on the specified view.
Does my analysis align with the actual workings or am I overlooking key aspects?