angular

check angular

by bhupendra negi

HTML

<html ng-app="nameApp">
    <!--model in html -->
    <div>first Name :
        <input type="text" ng-model="firstName" />
        <br>Last name
        <input type="text" ng-model="lastName" />
        <br>Hello {{firstName}} {{lastName}}</div>
    <hr>
    <!-- from controller defined in js in GlobalNamesapce -->
    <div id="globalcontroller" ng-controller="NameCtrl">first Name :
        <input type="text" ng-model="firstName" />
        <br>Last name
        <input type="text" ng-model="lastName" />
        <br>Hello {{firstName}} {{lastName}}</div>
    <hr>
    <!-- from controller defined in js -->
    <div id="globalcontroller" ng-controller="NameCtrl1">first Name :
        <input type="text" ng-model="firstName" />
        <br>Last name
        <input type="text" ng-model="lastName" />
        <br>Hello {{firstName}} {{lastName}}</div>
    <hr>
    <!--create function -->
    <div id="globalcontroller" ng-controller="NameCtrl2">first Name :
        <input type="text" ng-model="firstName" />
        <br>Last name
        <input type="text" ng-model="lastName" />
        <br>Hello {{firstName}} {{lastName}}</div>
    <hr>

</html>

JavaScript

//NameCtrl is controller of angulat
// $scope is model of angular

// controller binds model , which in returns updates view


var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl1', function ($scope) {
    $scope.firstName = "tyrian";
    $scope.lastName = "lannister";

});

function NameCtrl($scope) {
    console.log($scope);
    $scope.firstName = "John";
    $scope.lastName = "Snow";
}

nameApp.controller('NameCtrl2', function ($scope) {
    $scope.firstName = "tyrian";
    $scope.$watch('lastName', function (newValue, oldvalue) {
        console.log("new value" + newValue);
    });
   setTimeout(function () {
        $scope.lastName = "Smith";
        $scope.$apply();
    }, 1000)

});