Hell All,
Many people always face to learn all the flavors of angular js and i was faced same problem so i consolidated them under one program so developer can easily identify differences between them and if he wants he can start coding with this code by just copy paste.
Prerequisite:
Download angularjs files from angular official site and paste it under js folder.i have imported all in index.html file
application.js: This file contains angular code related to project
var app = angular.module("firstapp", []);
app.config(function(myproviderProvider)
{
console.log(myproviderProvider);
}
)
app.service('myservice',function()
{
var num=Math.random();
this.name="This is service";
});
app.factory('myfactory',function()
{
var factory={};
factory.name="This is factory";
return factory;
});
app.provider('myprovider',function(){
return{
setname:function()
{
surname:"hello all"
},
$get:function(){
return{
name:"This is provider"
}
}
}
});
app.filter('base',function(){
var something=function(input,base)
{
console.log("input:"+input);
console.log("base:"+base);
return input+base;
}
return something;
})
app.directive("myname", function ()
{
return {
template: "<h1>Hello</h1>"
};
} ) ;
app.controller('firstController',function($scope,myservice,myfactory,myprovider)
{
console.log(myfactory);
console.log(myservice);
console.log(myprovider);
$scope.name1="Sagar";
$scope.greetings=[myservice.name,myfactory.name,myprovider.name];
$scope.counter=0;
$scope.$watch('name',function(newvalue,old){
$scope.counter++;
console.log(old);
})
}
)
index.html:This html file will consume angular js module.
<!DOCTYPE html>
<html>
http://js/angular.min.js
http://js/services.js
http://js/application.js
<body ng-app="firstapp">
{{name}}
{{counter}}
<input ng-model="mynumber"></input>
<input ng-model="mynumber2"></input>
</body>
</html>
Monitor your console to check Output
Many people always face to learn all the flavors of angular js and i was faced same problem so i consolidated them under one program so developer can easily identify differences between them and if he wants he can start coding with this code by just copy paste.
Prerequisite:
Download angularjs files from angular official site and paste it under js folder.i have imported all in index.html file
application.js: This file contains angular code related to project
var app = angular.module("firstapp", []);
app.config(function(myproviderProvider)
{
console.log(myproviderProvider);
}
)
app.service('myservice',function()
{
var num=Math.random();
this.name="This is service";
});
app.factory('myfactory',function()
{
var factory={};
factory.name="This is factory";
return factory;
});
app.provider('myprovider',function(){
return{
setname:function()
{
surname:"hello all"
},
$get:function(){
return{
name:"This is provider"
}
}
}
});
app.filter('base',function(){
var something=function(input,base)
{
console.log("input:"+input);
console.log("base:"+base);
return input+base;
}
return something;
})
app.directive("myname", function ()
{
return {
template: "<h1>Hello</h1>"
};
} ) ;
app.controller('firstController',function($scope,myservice,myfactory,myprovider)
{
console.log(myfactory);
console.log(myservice);
console.log(myprovider);
$scope.name1="Sagar";
$scope.greetings=[myservice.name,myfactory.name,myprovider.name];
$scope.counter=0;
$scope.$watch('name',function(newvalue,old){
$scope.counter++;
console.log(old);
})
}
)
index.html:This html file will consume angular js module.
<!DOCTYPE html>
<html>
http://js/angular.min.js
http://js/services.js
http://js/application.js
<body ng-app="firstapp">
My First Heading
{{greetings}}
My first paragraph.{{name}}
{{counter}}
{{greeting}}
<input ng-model="mynumber2"></input>
{{mynumber|base:mynumber}}
</div></body>
</html>
Monitor your console to check Output
No comments:
Post a Comment