Angular JS

Tuesday 3 May 2016

Dot operator angularjs

Case 1:

Output

If i write something in first textbox, updates all

If I type something in second textbox then it will update only the second one

If I update the first textbox it doesn't update the second one as it is already touched. But it updates the other textbox.

Implementing in the below way(dot opeartor)

Output is it updates all the textbox which ever is touched.

Index.html

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<body>
<div ng-app="myapp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="Student.firstname"><br>
Last Name: <input type="text" ng-model="Student.lastname"><br>
<br>
Full Name: {{Student.FullName()}}
<student firstname="Donald" lastname="Trump">Future President</student>
<student firstname="Hillary" lastname="Clinton">Future President</student>
</div>
</body>
</html>

script.js

angular
.module('myapp', [])
.controller('myCtrl', function($scope) {
$scope.Student= {
firstname : "Anurag",
lastname : "Nayak",
FullName:function(){
return $scope.Student.firstname + " " + $scope.Student.lastname;
}
}
}).directive('student',function(){
return {
restrict:'E',
scope:true,
link:function(scope,element,attribute){
scope.fullname = scope.Student.firstname + " " + scope.Student.lastname;
scope.FullAttributeName = attribute.firstname + " " + attribute.lastname;
},
replace:true,
transclude:true,
template:"<h1>Hello {{fullname}} Meet {{FullAttributeName}} <ng-transclude></h1>"
}
});

OutPut

If isolated scope removed

.directive('student',function(){

return {

restrict:'E',

~~scope:true,~~

link:function(scope,element,attribute){

scope.fullname = scope.Student.firstname + " " + scope.Student.lastname;

scope.FullAttributeName = attribute.firstname + " " + attribute.lastname;

replace:true,

transclude:true,

template:"<h1>Hello {{fullname}} Meet {{FullAttributeName}} <ng-transclude></h1>"

}

});

If transclude removed

.directive('student',function(){

return {

restrict:'E',

~~scope:true,~~

link:function(scope,element,attribute){

scope.fullname = scope.Student.firstname + " " + scope.Student.lastname;

scope.FullAttributeName = attribute.firstname + " " + attribute.lastname;

replace:true,

~~transclude:true,~~

template:"<h1>Hello {{fullname}} Meet {{FullAttributeName}} <ng-transclude></h1>"

}

});

A question that was asked by me on StackOverFlow.

http://stackoverflow.com/questions/37078357/on-blur-in-angular-directive-not-working-properly/37078959?noredirect=1#comment61704369_37078959

Monday 2 May 2016

Nested Controller

Index.html
<!DOCTYPE html>
<html ng-app="myapp" >
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">

<script src="../Controller/app.js"></script>
<script src="../Controller/MyController.js"></script>
<link rel="stylesheet" type="text/css" href="../Style/style.css">
<title></title>
</head>

<div ng-controller="ParentController">
{{message}}
<div ng-controller="ChildController">
{{message}}
<div ng-controller="GrandSonController">
{{message}}
</div>
</div>
</div>

</html>

app.js

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

app.controller('ParentController', ['$scope', function($scope){
$scope.message="parent";
}]).
controller('ChildController', ['$scope', function($scope){

}]).
controller('GrandSonController', ['$scope', function($scope){
$scope.message="Grandson";
}])

Validation Angularjs

Index.html

1:  <!DOCTYPE html>  
2:  <html ng-app="myapp" >  
3:         <head>  
4:                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>  
5:                <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>  
6:                <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>  
7:                <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>  
8:                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">  
9:                <script src="../Controller/app.js"></script>  
10:                <script src="../Controller/MyController.js"></script>  
11:                <link rel="stylesheet" type="text/css" href="../Style/style.css">  
12:                <title></title>  
13:         </head>  
14:         <form name="myForm" novalidate>  
15:                <br><br><br>  
16:                Name ::<br>  
17:                <input  
18:                type="text"  
19:                ng-model="txtName"  
20:                name="txtName"  
21:                minlength="4"  
22:                required  
23:                ><br><br>  
24:                Email::<br><input type="email" required><br><br><br>  
25:         </form>  
26:         <h1>{{myForm.txtName.$valid}}</h1>  
27:  </html>

Style.css

.form-control {
min-width: 0;
width: auto;
display: inline;
}

.form-control.ng-invalid.ng-dirty{

border-color:red !important;
border-left:6px solid red;
font-size:inherit !important;
}

input.ng-invalid.ng-dirty {
border: 1px solid red;
}

On blur its firing the validation

Sunday 1 May 2016

Two Way Data Binding

In Angular applications, the view is the Document Object Model (DOM), the controllers

are JavaScript classes, and the model data is stored in object properties.

Two way data binding happens in angularjs.

When model is updated view is updated automatically. Here $scope.name is model which is updated in controller. We can see the change is reflected in textbox(view).
When we change something in textbox(view) we can see the {{name}} is nothing but the model property which we are binding it to p tag gets updated automatically.

This is two way data binding.

Writing controller in this way also works

angular.module('myapp')

.controller('myController',function($scope) {

$scope.name = "She is beautiful lady";

});

angular.module('myapp')

.controller('myController', ctrlFunction);

ctrlFunction.$inject = ['$scope'];

function ctrlFunction($scope) {

$scope.name = "She is beautiful lady";

}

angular.module('myapp')

.controller('myController', ctrlFunction);

function ctrlFunction($scope) {

$scope.name = "She is beautiful lady";

}

With Closure
(function() {

angular.module('myapp')

.controller('myController', ctrlFunction);

function ctrlFunction($scope) {

$scope.name = "She is beautiful lady";

}

}());

AngularJs Lesson 1

Install SublimeTextEditor3

1) https://www.sublimetext.com/3. Download and unzip.

2) For 32 Bit. Download the portable version(screenshot).

3) Go to https://packagecontrol.io/

Download this. you will have one file.

Copy that and paste in Data/InstallPackage folder which we unzipped from Step 1 installation.

5)Start the Editor (the unzipped one from step 1)

Step 6- Press shift+ctrl+P

type install. click on Install Package.

Press shift+ctrl+P again. Type angularjs. Select it.
Repeat the same step.Type install. click on Install Package.Press shift+ctrl+P again. Type HTML.Select it.
Repeat the same step.Type install. click on Install Package.Press shift+ctrl+P again. Type HTML5.Select it.
Repeat the same step.Type install. click on Install Package.Press shift+ctrl+P again. Type HTML Beautify.Select it.
Repeat the same step.Type install. click on Install Package.Press shift+ctrl+P again. Type Javascript Beautify.Select it.
Repeat the same step.Type install. click on Install Package.Press shift+ctrl+P again. Type Sublime Server.Select it.

We are ready to start our AngularJS thorough this editor.

Tuesday 3 May 2016

Dot operator angularjs

Directive example

Monday 2 May 2016

Nested Controller

Validation Angularjs

Sunday 1 May 2016

Two Way Data Binding

AngularJs Lesson 1