Controller

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
        <h2>Controller</h2>
        <fieldset>
            <legend>
                Circle
            </legend>
            <div ng-controller="Circle">
                Radius = {{radius}} <br/>
                Diameter = {{diameter}} <br/>
                Area = {{area}} <br/>
                Circumference = {{circumference| number:2}} <br/>
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Rectangle
            </legend>
            <div ng-controller="Rectangle">
                Length = {{length}} <br/>
                Breadth = {{breadth}} <br/>
                Area = {{area}} <br/>
                Circumference = {{circumference| number:2}} <br/>
            </div>
        </fieldset>
    </body>
    <script>
        var app = angular.module("myApp", []);

        app.controller("Circle", function ($scope) {
            $scope.radius = 5;
            $scope.diameter = $scope.radius * 2;
            $scope.area = 3.14 * $scope.radius * $scope.radius;
            $scope.circumference = 2 * 3.14 * $scope.radius;
        });

        app.controller("Rectangle", function ($scope) {
            $scope.length = 5;
            $scope.breadth = 6;
            $scope.area = $scope.length * $scope.breadth;
            $scope.circumference = 2 * $scope.length * $scope.breadth;
        });
    </script>
</html>

 

 

Modules

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <fieldset>
            <legend>
                Modules
            </legend>
            <div>
                Radius = {{radius}} <br/>
                Diameter = {{diameter}} <br/>
                Area = {{area}} <br/>
                Circumference = {{circumference| number:2}} <br/>
            </div>
        </fieldset>
    </body>
    <script>
        var app = angular.module("myApp", []);

        app.controller("myCtrl", function ($scope) {
            $scope.radius = 5;
            $scope.diameter = $scope.radius * 2;
            $scope.area = 3.14 * $scope.radius * $scope.radius;
            $scope.circumference = 2 * 3.14 * $scope.radius;
        });
    </script>
</html>

 

 

Angular Expression

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="">
        <fieldset>
            <legend>
                Angular Expression
            </legend>
            <div>
                Square of 5 is {{5 * 5}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Addition of x and y
            </legend>
            <div ng-init="x = 5;y = 6">
                {{x + ' + ' + y}} = {{x + y}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Concatenation
            </legend>
            <div ng-init="first_name = 'Shailesh'; last_name = 'Sonare'">
                {{first_name + " " + last_name}}
            </div>
        </fieldset>
    </body>
</html>

 

 

Directives

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="">
        <fieldset>
            <legend>
                Single Variables
            </legend>
            <div ng-init="name = 'Angular JS'">
                Hello {{name}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Multiple Variables
            </legend>
            <div ng-init="first_name = 'Angular';last_name = 'JS'">
                Hello {{first_name + ' ' + last_name}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Model
            </legend>
            <div ng-init="model_variable = 'Hello Model'">
                <input type="text" ng-model="model_variable" />
                Hello {{model_variable}}
                <div ng-bind="model_variable"></div>
            </div>
        </fieldset>
        <fieldset>
            <legend>
                JSON objects
            </legend>
            <div ng-init="months={'first':'January', 'last':'December'}">
                First Month : {{months.first}} <br/>
                Last Month : {{months.last}}
            </div>
        </fieldset>
        Hello {{'World'}}
    </body>
</html>

 

 

Angular Html

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="">
            Hello {{'Angular'}}
        </div>
        Hello {{'World'}}
    </body>
</html>

 

 

form field validation

The problem is that your REGX pattern will only match the input “0-9”.

To meet your requirement (0-9999999), you should rewrite your regx pattern:

ng-pattern="/^[0-9]{1,7}$/"

HTML:

<div ng-app ng-controller="formCtrl">
    <form name="myForm" ng-submit="onSubmit()"> 
        <input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required> 
        <span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span> 
        <span ng-show="myForm.price_field.$error.required">This field is required!</span> 
        <input type="submit" value="submit"/> 
    </form> 
</div> 

JS:

function formCtrl($scope){ 
    $scope.onSubmit = function(){ 
        alert("form submitted"); 
    } 
}