Post
Ask Question

Start With AngularJS: Part 2

Here's the first part of the series.

Overview Of AngularJS: Part 1

To set up AngularJS first go to the AngularJS website & download the AngularJS file or you can also use the CDN link. Here I used the CDN link in all my projects.

  1. Start Visual Studio.
  2. Create a new project on Visual Studio.
  3. Create a new folder on Visual Studio & add your AngularJS & CSS folder.
  4. Create a new HTML file name with the hello program.

Add your CDN link to the HTML file.

HTML File

Run your HTML file by clicking on the right side of the HTML file & viewing it in a browser.

Output

run

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    Hello world.
    <p>The sum of 10 and 1 is equal to <b>{{10+1}}</b></p>
</body>
</html>

AngularJS Module

It is a container. It divided apps into small components whose reusable, functional components are integrated with other components.

  1. It is the place where we write AngularJS code for web apps.
  2. Each module is identified by a unique name and can be dependent on another module.
  3. It is the place where we define dependencies.
  4. AngularJS module is single on every web page.

Why do we use Module?

  1. Modules are used to separate logics say services, controllers, applications, etc., and keep the code clean.
  2. We define modules in separate js files and name them as per the module.js file.

It has two types.

Application Module: It is used to initialize the application with the controller.

var mainApp = angular.module("mainApp", []);
  • 1st parameter: the name of the module.
  • 2nd parameter: the array of module names on which this module is dependent on the above code.

Controller Module: It is used to define the controller in the web app.

angular.module('MainApp').controller("studentController", function($scope) {
    // Controller logic here
});

The used component in the module

  1. Directive: AngularJS directives are used to extend HTML.Starting with the ng- prefix.
  2. Filter: Filters are used to change and modify the data. It uses pipe characters for filter data.
  3. Controller: A controller is defined using the ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions.
  4. Factory: A factory is a simple function that allows you to add some logic before creating the object. It returns the created object.
  5. Services: Services are JavaScript functions, that are responsible for performing only specific tasks.
  6. Provider: Provider is used by AngularJS internally to create services, factories, etc.
  7. Value: It is required to pass values to the controller during the config phase (the config phase is when AngularJS bootstraps itself).
  8. Config: It is used to inject module-wise configuration settings to prevent accidental instantiation of services before they have been fully configured. This block is created using the config () method.
  9. Route: Route, for switching views based on location (URL) changes.

Reference: AngularJS Tutorial

MVC Pattern

The core idea behind MVC is that you have a clear separation in your code between managing its data (model), and the application logic (controller), and presenting the data to the user (view).

  1. Open old project.
  2. Add a new HTML File named MVC.
  3. Add code & run Program & watch Output.

Output

Output

Complete Code

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <meta charset="utf-8">
    <title>MVC pattern in AngularJS</title>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller('Ctrl', function ($scope) {
            var Productsalseman = ["shiva", "shukla"];
            $scope.Product = {
                id: 'sh05',
                name: 'AngularJS ebooks',
                salseman: Productsalseman
            };
        });
    </script>
</head>
<body ng-app="app">
    <p ng-controller="Ctrl">
        <table>
            <tr>
                <td>Product Id :</td>
                <td>
                    <span ng-bind="Product.id"></span>
                </td>
            </tr>
            <tr>
                <td>Name :</td>
                <td>
                    <span ng-bind="Product.name"></span>
                </td>
            </tr>
            <tr>
                <td>salseman :</td>
                <td>
                    <span ng-bind="Product.salseman"></span>
                </td>
            </tr>
        </table>
    </p>
</body>
</html>


Similar Articles