AngularJS is a JavaScript Framework
AngularJS is a very powerful JavaScript Framework. AngularJS is open source, completely free.
It is a library written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:
<head>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
</head>
AngularJS Extends HTML
AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.
The ng-controller A controller is a JavaScriptobject containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.
AngularJS MVC Component.
- Model — Models are the properties of a scope; scopes are attached to the DOM where scope properties are accessed through bindings.
- View — The template (HTML with data bindings) that is rendered into the View.
- Controller — The
ngControllerdirective specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values
AngularJS Architecture
Template of View - offers.html
<!DOCTYPE html>
<html>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<body>
<div ng-app="" ng-controller="offers">
<table >
<div ng-repeat="x in offers" >
<div>{{ x.discounts_provider_name }}</div>
<div>{{ x.discounts_details }}</div>
</div>
</table>
</div>
</body>
</html>
Template Of Controller - controller.js
var app = angular.module('myApp', [ 'ngRoute' ]);
app.config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl : "index.html",
}).when("/offers", {
templateUrl : "offers.html",
controller : "con_offers"
})
});
app.controller('con_offers', function($scope, $http)
{ $http.get("http://localhost:8080/php/data_offers.php")
.then(
function(response)
{ $scope.offers = response.data.data; });
});
Template of View
Index.html
- Include Other top.html
-include left.left and right.html
-include
Template of View - Index.html
<?php header("Access-Control-Allow-Origin: *"); ?>
<!DOCTYPE html>
<HTML>
<head>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script src="controller.js"></script>
<body ng-app="myApp">
<div style="border: 1px solid">
<!-- Create Header -->
<div id="header" class="header">
<div ng-include src="'menu.html'" ng-controller="con_emp"></div>
</div>
<!-- Create Left Panel-->
<div style="height:550px" >
<div id="left" class="left">
<div ng-include src="'left_panel.html'"></div>
</div>
<!-- Create View to show Pages in center of screen -->
<div id="center" class="centerr" >
<div ng-view></div>
<script type = "text/ng-template" id = "offers.html">
<div ng-include="'./offers.html'"></div>
</script>
</div>
<!-- Create Right Panel -->
<div id="right" class="right" >
<div ng-include src="'right_panel.html'"></div>
</div>
</div>
<!-- Create Footer -->
<div id="footer" class="footer">
<div ng-include src="'footer.html'"></div>
</div>
</div>
</body>
</HTML>
No comments:
Post a Comment