All geek questions in one place

What is a module in AngularJS?

I am brand new in AngularJS and I find some difficulties trying to figure out exactly how it implements the MVC pattern.

So, I have this first doubt related to this example, in which I have 2 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 file :

/* MODULE: one signgle object in the global namespace.
           Everything indise 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) {

}]);

I find some difficulties trying to determine who is a MODEL , who is a CONTROLLER , and who is VIEW .

It seems to me that I realized that the ng-app = "angularApp" attribute defined in the html tag:

<html lang="en-us" ng-app="angularApp">

bind the entire index.htm page to an angularApp variable

var angularApp = angular.module('angularApp', []);

, angularApp? Angular ? Angular?

+4
3

https://docs.angularjs.org/guide. , https://docs.angularjs.org/tutorial.

, , . AngularJs .

<html lang="en-us" ng-app="angularApp"> , <html> angularApp, index.html view, . view , directive (i.e. Angular).

Angular : https://docs.angularjs.org/guide/concepts

- , , , , ,

- , (DOM)

- -

+2

angularjs.org

? - , , , ..

? .

Angular . , . :

. . ( ), . , . .

, .. .

+2

To understand Angularjs, you should not stay only in the MVC template, angular you can use this template, but it is more than MV *, Model View. Whatever you need.

therefore, the angularApp variable contains the angularApp module with all its dependencies, controllers, providers, services, etc ..., the module can be part or the whole application that suits you.

+1
source

Source: https://habr.com/ru/post/1614754/

More articles:


All Articles