Categories
AngularJS

AngularJS Tables

In AngularJS Tables we can show repeatable data. Using ng-repeat directive we can draw table easily. See the below example how to use ng-repeat in table. Table data is normally repeatable by default and ng-repeat directive can be used perfectly to create table easily. Example of AngularJS Tables: <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr ng-repeat=”x […]

Categories
AngularJS

AngularJS Forms & Validation

Using AngularJS Forms you can collect number of inputs. Form can also validate input data. For any type of invalid input it can throw error for notify user. But note to remember that this is just a client side validation. You need to validate from server side also. Here is a sample code for AngularJS […]

Categories
AngularJS

AngularJS Views

Using ng-view and ng-template directives and $routeProvider services you can provide single page application via multiple views on a single page. ng-view: A place holder where a corresponding view can be placed.ng-template: Used to create an html view using script tag with the help of “id” attribute.$routeProvider: Set the configuration of urls and map them […]

Categories
AngularJS

Ajax call – AngularJS

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>

Categories
AngularJS

Include files on AngularJS

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 […]

Categories
AngularJS

Filters of AngularJS

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 […]

Categories
AngularJS

AngularJS Controller

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> […]

Categories
AngularJS

AngularJS Modules

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”, […]

Categories
AngularJS

AngularJS Scopes

AngularJS scopes is a special object which joins controller with views. $scope object access model data in controller as it is the first argument to controller. $scope is specifically for controller so it can inherit its parent controller also. Basically, scope is an object which refers to the application model i.e. an execution context for […]

Categories
AngularJS

AngularJS internationalization

For internationalization AngularJS uses three types of filters i.e. currency, date and numbers. We need to incorporate corresponding js depends on locale of the country. <script src=”https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js”></script>