I'm new to Angularjs. I was trying some codes in Angularjs. But I'm getting the result as binding expressions.
Script.js is displaying as followed.
/**
*
*/
// <reference path="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js" />
//Create the module
var myApp=angular.module("myModule",[]);
//Create the Controller
var myController=function($scope){
$scope.message="Angular Js Tutorial";
var employee= {
firstname : "Hiroshi",
lastname : "Perera" ,
gender : "Male"
};
$scope.employee=employee;
};
////Register model with the controller. Name of the Controller 'MyController'.
myApp.controller("myController1",myController);
//Creating everything in a single line.
var myApp2=angular
.module("myModule2",[])
.controller("myController2",function($scope){
var father={
firstname: "Lakshman ",
lastname : "Perera",
gender : "Male"
};
$scope.father=father;
});
var myapp3=angular
.module("ModImage",[])
.controller("ControllerFlower",function($scope){
var flowerDetails={
flowerName: "Roses",
Colour : "prik",
flower:"Images/boquet.jpg"
};
$scope.flowerDetails=flowerDetails;
});
following is the html file.
<!DOCTYPE html>
<html>
head >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="lib/Script.js"></script>
</head>
<body>
<div data-ng-app="">
<div>
10+20={{ 1==2 }}
</div>
<div>
10+20={{ 10+20 }}
</div>
<div>
{{{name:'Hiroshi',age:'28'}.name}}
</div>
<div>
{{ ['Hiro','Thili','Thamali'][1] }}
</div>
</div>
<div ng-controller="myController1" data-ng-app="myModule">
<div>{{message}}</div>
<div>My First Name : {{employee.firstname}}</div>
<div>My Last Name : {{employee.lastname}}</div>
<div>My Gender : {{employee.gender}}</div>
</div>
<div data-ng-app="myModule2" ng-controller="myController2">
<div>Father's First Name : {{father.firstname}}</div>
<div>Father's Last Name : {{father.lastname}}</div>
<div>Father's Gender : {{father.gender}}</div>
</div>
<div data-ng-app="ModImage" ng-controller="ControllerFlower">
<div>Name : {{flowerDetails.flowerName}}</div>
<div>Colour : {{flowerDetails.Colour}}</div>
<div>Image : {{flowerDetails.flower}}</div>
</div>
</body>
</html>
I'm getting the out put as following.
10+20=false
10+20=30
Hiroshi
Thili
{{message}}
My First Name : {{employee.firstname}}
My Last Name : {{employee.lastname}}
My Gender : {{employee.gender}}
Father's First Name : {{father.firstname}}
Father's Last Name : {{father.lastname}}
Father's Gender : {{father.gender}}
Name : {{flowerDetails.flowerName}}
Colour : {{flowerDetails.Colour}}
Image : {{flowerDetails.flower}}
Can someone please let me know the mistake I had done.I was trying this in several ways ways but still was unable to get the expected output.
