Namaste UI
To read the data from the server AngularJS uses $http control to get the desired results from Ajax. It requires data as a JSON format. Example of Ajax: <script> var ngApp = angular.module(“ngApp”, []); ngApp.controller(‘nameController’, function($scope) { var url=”ajaxmaster.php”; $http.get(url).success( function(data) { $scope.response = data; }); }); </script>
Sometimes it may happen that you used jQuery but it not working and you are in a deep trouble that makes you puzzle at a moment. So what to do with the jquery steps? Here are few simple things that are primary jquery steps to check for sure. JavaScript disabled/not supported by browser: Make sure […]
In HTML you can not include files like HTML into another HTML pages. To achieve this functionality you had to choose either Ajax call or server side includes like php, jsp. But using AngularJS you can embed HTML page within a HTML page using ng-include directive. By default, for same domain and protocol as a […]
Using pipe(|) character Filters of AngularJS are used to change the data in directives. This selects a subset of items from array and returns it as a new array. An AngularJS filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services. It is […]
To control the flow of data AngularJS mainly relies on controllers. It is defined using ng-controller directive. Controller contain attributes, properties and functions. Example of Controller: <html> <head> <title>AngularJS Controllers</title> <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script> </head> <body> <h2>AngularJS Controllers</h2> <div ng-app=”ngApp” ng-controller=”nameController”> First name: <input type=”text” ng-model=”name.firstName”><br><br> Last name: <input type=”text” ng-model=”name.lastName”><br> <br> Full name: {{name.fullName()}} </div> <script> […]
Using template is very easy to incorporate into website. For a duplication you don’t need to write over and over again just call them repetitively. Parameters:Following properties can be sent as a parameter-value:name, nodes, data, if, foreach, as, afterAdd, afterRender, beforeRemove. Lets see an example of Templating: <!DOCTYPE html> <head> <title>KnockoutJS – Templating</title> <script src=”http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js” […]
Using a single object called dependency tracker i.e. ko.dependencyDetection you can determine when the value get updated. When you declare a computed observable, KO immediately gets its initial value and updated computed observable. Lets see an example for Dependency Tracking: <!DOCTYPE html> <html> <head> <title>Dependency Tracking – KnockoutJS</title> <script src=”http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js” type=”text/javascript”></script> </head> <body> <div> <form […]
To connect data to UI declarative bindings are used. As bindings and Observables both are different, using normal javascript object you can bind view. Declarative Bindings consists of two values i.e. name and value: Full name: <input data-bind=”value: fullName, valueUpdate: ‘afterkeydown’” /> Here when each key is pressed value will be updated.
Components are way of organizing the UI code for structure wise and promote code re-usability for a large application. Components can be registered using the ko.components.register() API. ko.components.register(‘componentname’, { viewModel: {…}, template: {….) }); <!DOCTYPE html> <head> <title>Components of KnockoutJS</title> <script src=”https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js”></script> </head> <body> <h4>Example 1: without parameters</h4> <div data-bind=’component: “example-editor”‘></div> <h4>Example 2: passing parameters</h4> […]
Modules are used to seperate logics and keep the code clean. So we can define modules in separate js file. Here we will create two modules i.e. Controller Module and Application Module. Controller Module: controller.jsHere we are declaring a controller userController module using myApp.controller function. myApp.controller(“userController”, function($scope) { $scope.user = { first_name: “Tim”, last_name: “Shawn”, […]