I've created the template with the below code. The edit functionality works fine however the model is updating back.
In the template, I've binded the model with ng-model but still it is not updating the model hobbies back on editing
Any ideas?
<html>
<head>
<title>
Angular Edit Template
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.js"></script><!-- Latest compiled and minified CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" crossorigin="anonymous"></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('myCtrl', function($scope){
$scope.hobbies = ["Swimming", "Reading"]
})
.directive('component', function(){
return {
template: [
'<div>',
'<span ng-show="!editing">{{ value }} <i ng-click="editing = true" class="glyphicon glyphicon-pencil"></i></span>',
'<span ng-show="editing"><input type="input" ng-model="value"><i ng-click="editing = false" class="glyphicon glyphicon-ok"></i></span>',
'</div>'
].join(''),
restrict: 'E',
scope: {
value: '=value'
},
link: function($scope){
$scope.editing = false;
}
}
});
</script>
</head>
<body>
<div id="test" ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="n in hobbies">
<li>
<component value="n"></component>
</li>
</ul>
<span>{{ hobbies }}</span>
</div>
</body>
</html>
Take a look at this, the issue is you're two way binding a string, instead of an object, which means you're not actually getting the benefits: If you are not using a .(dot) in your AngularJS models you are doing it wrong?
If you use an object in either your parent, either passing the value or the whole object, you'll see that it works a little better.
$scope.hobbies = [{id:1,name:"Swimming"},{id:2,name:"Reading"}]
and then
<ul ng-repeat="n in hobbies">
<li>
<component value="n.name"></component>
</li>
</ul>
or
'<span ng-show="!editing">{{ value.name }} <i ng-click="editing = true" class="glyphicon glyphicon-pencil"></i></span>',
'<span ng-show="editing"><input type="input" ng-model="value.name"><i ng-click="editing = false" class="glyphicon glyphicon-ok"></i></span>',
Related
I am working on uib-popover recently, I found a problem that I am confused with.
I want to popover a template, in this template I have an input, at first the input have initial value.
I want to update the content real-time based on the input. When I just bind a variable, it does not work, while if I bind an object, it works. I can't figure this problem out.
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<hr/>
<hr/>
<hr/>
<button uib-popover-template="'myPopoverTemplate.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
{{dynamicPopover.title}}
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="form-group">
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
</script>
<button uib-popover-template="'inputContent.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
{{inputContent}}
<script type="text/ng-template" id="inputContent.html">
<div class="form-group">
<input type="text" ng-model="inputContent" class="form-control">
</div>
</script>
</div>
</body>
</html>
example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function($scope, $sce) {
$scope.dynamicPopover = {
title: 'Title'
};
$scope.inputContent = "hello";
});
Here is the plunker example https://plnkr.co/edit/IPXb5tddEPQPPAUrjdYx?p=preview, you could have a try.
You made an interesting point in your second plunk. I didn't catch this the first time but I think it may be because you are doing your popover input in a script tag. I would suggest using a custom directive if you could versus just doing it in an inline script. That way it is kept up to date with angular's digest cycle.
Example Directive:
customPopoverApp.directive('customPopover',['$compile','$templateCache',function($compile,$templateCache){
return {
restrict:'A',
transclude:true,
template:"<span>Click on me to show the popover</span>",
link:function(scope,element,attr){
var contentHtml = $templateCache.get("customPopover.html");
contentHtml=$compile(contentHtml)(scope);
$(element).popover({
trigger:'click',
html:true,
content:contentHtml,
placement:attr.popoverPlace
});
}
};
}]);
And to use it:
<button custom-popover="" popover-place="bottom">click on me to show the popover</button>
{{message}}
<script type="text/ng-template" id="customPopover.html">
<div class="form-group">
<input type="text" ng-model="message" class="form-control">
</div>
</script>
Here is a working plunk. I hope this is what you're looking for
I have a ng-repeat that is displaying a list of items. I want them to be a col width of 2
This is the index.html body
index.html
<!DOCTYPE html>
<html ng-app="games">
<head>
<title>Games</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/fontello.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<meta name=viewport content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/static/app/app.js"></script>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body ng-controller="gamesCtrl">
<a ui-sref="games">Games</a>
<div class="container">
<div class="row">
<div ui-view></div>
</div>
</div>
</body>
</html>
And here is the HTML I am pulling for the ui-view
list.html
<div ng-repeat="game in games">
<div ng-class="col-xs-2">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
What's happening though is its just stacking everything on top of each another and not putting it next to each other.
Here is the inspect element code
<div class="row">
<!-- uiView: -->
<div ui-view="" class="ng-scope">
<!-- ngRepeat: game in games -->
<div ng-repeat="game in games" class="ng-scope">
<div class="ng-binding">Cut The Rope</div>
<img src="https://az680633.vo.msecnd.net/thumbnail/40071/100/40071.png">
</div>
<!-- end ngRepeat: game in games -->
<div ng-repeat="game in games" class="ng-scope">
<div class="ng-binding">Cut The Rope: Time Travel</div>
<img src="https://az680633.vo.msecnd.net/thumbnail/40072/100/40072.png">
</div>
</div>
Just incase something else is wrong here is the js
angular.module('games', ['ui.router', 'ui.bootstrap'])
.config(function($urlRouterProvider, $locationProvider, $stateProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/");
//take out #
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
// Now set up the states
$stateProvider
.state('games', {
url: "/",
templateUrl: "/static/app/list.html",
controller: 'gamesCtrl'
})
})
.controller('gamesCtrl', ['$scope', '$state', 'gamesFactory',
function($scope, $state, gamesFactory) {
$scope.$state = $state;
$scope.games = null;
function init() {
gamesFactory.getGames().success(function(games) {
$scope.games = games.data;
console.log($scope.games.data)
});
}
init();
}
])
.factory('gamesFactory', function($http) {
var factory = {};
factory.getGames = function() {
return $http.get('/games.json');
};
return factory;
});
ng-class is expecting an Angular expression. In this case, you are giving it the actual CSS class name. Angular tries to evaluate that as an expression, which results in undefined (or null or the empty string).
Since you don't need to do anything but apply the class name here, just use the regular class attribute instead of ng-class:
<div ng-repeat="game in games">
<div class="col-xs-2">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
ng-class expects an expression. Change your markup like this:
<div ng-repeat="game in games">
<div ng-class="'col-xs-2'">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngClass
The problem is that you're repeating the div around the columns, not the columns themselves. Try this:
<div class="col-xs-2" ng-repeat="game in games">
{{ game.title }}
<img src="{{game.thumbnailUrl100}}"/>
</div>
Try using ng-src on your image. At the time the page is first rendered, the image size probably can't be determined.
Edit, so the complete html should be:
<div ng-repeat="game in games">
<div class="col-xs-2">
{{ game.title }}
<img src= "" ng-src="{{game.thumbnailUrl100}}"/>
</div>
As others have pointed out, you shouldn't be using ng-class here.
I have used https://github.com/angular-ui/bootstrap for accordion, but with this directive I'm having scope issues. It only allows to use scope if ngController is declared inside of accordion.
Please visit below two Plunker links and you will understand what I'm trying to say:
Example 1: http://plnkr.co/edit/Fb4UauWWmHOnTyjMPFBo
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<accordion>
<accordion-group is-open="status.open">
<accordion-heading>
Accordian - Click me <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
<div>
<input type="checkbox" ng-model="select" ng-click="checkAll()" /> Check me
</div>
</accordion-group>
</accordion>
</div>
</body>
</html>
script.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function($scope) {
$scope.checkAll = function() {
alert($scope.select);
};
});
Example 2: http://plnkr.co/edit/ljEMUnTqPBqUyub5eEB7
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<accordion>
<accordion-group is-open="status.open">
<accordion-heading>
Accordian - Click me <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
<div ng-controller="AccordionDemoCtrl">
<input type="checkbox" ng-model="select" ng-click="checkAll()" /> Check me
</div>
</accordion-group>
</accordion>
</body>
</html>
script.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function($scope) {
$scope.checkAll = function() {
alert($scope.select);
};
});
I found the solution:
We can pass the value from the function itself, not necessary to access value using $scope.
Demo: http://plnkr.co/edit/fZZrDN4e8kbvimR2Wzya
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<accordion>
<accordion-group is-open="status.open">
<accordion-heading>
Accordian - Click me <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
<div>
<input type="checkbox" ng-model="select" ng-click="checkAll(select)" /> Check me
</div>
</accordion-group>
</accordion>
</div>
</body>
</html>
script.js:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('AccordionDemoCtrl', function($scope) {
$scope.checkAll = function (select) {
alert(select);
};
});
This is happening because the scope of directive "accordionGroup" in Angular Bootstrap is isolated and the $scope of controller "AccordionDemoCtrl" is inherited using require in a "directive".
So, for Example1 when you try to access the $scope binding of AccordionDemoCtrlinside the accordian group directive, it is easily accessible. But as the select is in local scope of accordian group directive it is not accessible in the controller.
So, for Example2 when you try to access the $scope binding of AccordionDemoCtrlinside the accordian group directive it is easily accessible as the controller is in the local scope for the accordian group.
Please refer directive to directive Comm.
This is code from the Angular Bootstrap Library for Accordian
.directive('accordion', function () {
return {
restrict:'EA',
controller:'AccordionController',
transclude: true,
replace: false,
templateUrl: 'template/accordion/accordion.html'
};
})
// The accordion-group directive indicates a block of html that will expand and collapse in an accordion
.directive('accordionGroup', function() {
return {
require:'^accordion', // We need this directive to be inside an accordion
restrict:'EA',
transclude:true, // It transcludes the contents of the directive into the template
replace: true, // The element containing the directive will be replaced with the template
templateUrl:'template/accordion/accordion-group.html',
scope: {
heading: '#', // Interpolate the heading attribute onto this scope
isOpen: '=?',
isDisabled: '=?'
},
controller: function() {
this.setHeading = function(element) {
this.heading = element;
};
},
link: function(scope, element, attrs, accordionCtrl) {
accordionCtrl.addGroup(scope);
scope.$watch('isOpen', function(value) {
if ( value ) {
accordionCtrl.closeOthers(scope);
}
});
scope.toggleOpen = function() {
if ( !scope.isDisabled ) {
scope.isOpen = !scope.isOpen;
}
};
}
};
})
// Use accordion-heading below an accordion-group to provide a heading containing HTML
// <accordion-group>
// <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading>
// </accordion-group>
.directive('accordionHeading', function() {
return {
restrict: 'EA',
transclude: true, // Grab the contents to be used as the heading
template: '', // In effect remove this element!
replace: true,
require: '^accordionGroup',
link: function(scope, element, attr, accordionGroupCtrl, transclude) {
// Pass the heading to the accordion-group controller
// so that it can be transcluded into the right place in the template
// [The second parameter to transclude causes the elements to be cloned so that they work in ng-repeat]
accordionGroupCtrl.setHeading(transclude(scope, function() {}));
}
};
})
I am using angularstrap to create a popover using a template. I am using the attribute ng-attr-data-template to provide link to the template. I am changing the mentioned attribute value using a function which is called on click of a button.
But the change is not being reflected to the popover. Please suggest the possible solution for this problem.
Here is the link to Plunkr
Code is as follows
index.html
<!DOCTYPE html>
<html ng-app="klk">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.0.4"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.0.4"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="mainCtrl">
<hr/>
<button type="button" class="btn btn-info" placement="right" data-animation="am-flip-x"
ng-attr-data-template="{{link}}" data-auto-close="1" bs-popover >
{{link}}
</button>
<hr/>
<button class="btn btn-info" ng-click = "changeContent()">Change link</button>
</body>
</html>
app.js
var app = angular.module('klk', ['mgcrea.ngStrap']);
app.controller('mainCtrl', function($scope, $popover){
$scope.trackName = 'Click on the button and give us a name';
$scope.popov = function(el){
$popover(angular.element(el),
{
show: true,
placement: 'right',
template: 'link1.html',
animation: 'am-flip-x'
});
};
$scope.link = "link1.html";
$scope.change = true;
$scope.changeContent = function(){
$scope.change = !$scope.change;
if ($scope.change)
$scope.link = "link1.html";
else
$scope.link = "link2.html";
}
});
link1.html
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"><strong>Heading 1</strong></h3>
<div class="popover-content">
pop content 1
</div>
</div>
link2.html
<div class="popover" >
<div class="arrow"></div>
<h3 class="popover-title"><strong>Heading 2</strong></h3>
<div class="popover-content">
pop content 2
</div>
</div>
If you are interested in changing the content of the template dynamically, it can be accomplished by using the following way.
Here is an example of modified Index.html. Notice that there is a data-content and a data-title that bound to model properties.
<!DOCTYPE html>
<html ng-app="klk">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.0.4"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.0.4"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="mainCtrl">
<hr/>
<button type="button" class="btn btn-info" placement="right" data-animation="am-flip-x" data-title = "{{popover.title}}" data-content="{{popover.content}}" data-template="link3.html" data-auto-close="1" bs-popover >Click Me</button>
<hr/>
<button class="btn btn-info" ng-click = "changeContent()">Change link</button>
</body>
</html>
Here is the module and the controller, In this controller we have a model called popover with the properties title and content, this will be dynamic. For example, if you called the function changeContent it will toggle the content and make the content in popover change.
// Code goes here
var app = angular.module('klk', ['mgcrea.ngStrap']);
app.controller('mainCtrl', function($scope, $popover){
$scope.trackName = 'Click on the button and give us a name';
$scope.toggleContent=true;
$scope.popover = {
"title": "Original Content",
"content": "loading...",
};
$scope.changeContent=function(){
if($scope.toggleContent){
$scope.popover = {
"title": "Changed",
"content": "<p>hello the content has changed!</p>",
};
}else{
// show original content
$scope.popover = {
"title": "Original Content",
"content": "Hello Content 1...",
};
}
}
});
Here is a template that will have the content and the title that will be dynamic as it is bound to model properties title and content. Look for ng-bind-html
<div class="popover" tabindex="-1" ng-show="content">
<div class="arrow"></div>
<div class="popover-title" ng-bind-html="title"></div>
<div class="popover-content">
<form name="popoverForm">
<div class="form-actions">
<!--<button class="btn-sm pull-right close-popover" ng-click="$hide()">x</button>-->
</div>
<p ng-bind-html="content" style="min-width:300px;"></p>
</form>
</div>
</div>
A working example of this can be found here
http://plnkr.co/edit/FpqwcdcPNVI3zIzK6Ut1?p=preview
I want to add data at the time of onclick event. Need to load image at the time of onclick event, after a small time interval add data. But my image is continuously loading. Any body give any suggestion.
My code is:
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script language="javascript">
function ContactController($scope) {
$scope.contacts = [];
$scope.items = [ ];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items[0].lateLoader = ' xxxx ';
});
}, 1000);
$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</head>
<body >
<div ng-app="" ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader"><img src="Filling broken ring.gif"></i>
</p>
{{ contacts.length }}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts"> <input name="" type="checkbox" value="">{{ contact }}</li>
</ul>
</div>
</body>
</html>
In your example I found a lot of mistakes. The HTML tag is not defined at the top, wrong use of angularJs and Angular module is not created properly etc.
I fixed all the mistakes. I hope it can help you.
Plunkr link: http://plnkr.co/edit/no8WOHdEc9wc3dHzzITv?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script >
angular.module("app",[]).controller('ContactController',['$scope',
function($scope) {
$scope.contacts = [];
$scope.items = [];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items.lateLoader = 'xxxx ';
});
}, 1000);
//$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
]);
</script>
</head>
<body >
<div ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader">
<img src="https://encrypted-tbn1.gstatic.com
/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM">
</i>
</p>
{{contacts.length}}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts">
<input name="" type="checkbox" value="">{{ contact }}
</li>
</ul>
</div>
</body>
</html>
And for more detail of angularJs please visit these links:(https://angularjs.org/)
(http://www.w3schools.com/angular/default.asp)