Skip to main content

Posts

Showing posts from April, 2016

AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily.  Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <
Post a Comment
Read more

A Simple CRUD Operation in AngularJS using Ajax and Asp.Net Web API MVC 4

Create a Table in SQL Server CREATE TABLE [dbo].[Books](     [BookID] [int] IDENTITY(1,1) NOT NULL,     [BookName] [varchar](50) NULL,     [Category] [varchar](50) NULL,     [Price] [numeric](18, 2) NULL     PRIMARY KEY CLUSTERED ( [BookID] ASC ) ) ON [PRIMARY] The Web API I am using Asp.Net MVC 4 to create my Web API that is the Models and Controllers. I’ll create a Books model, along with a controller. Model “Books.cs” using System; namespace BooksApp.Models {     public class Books     {         public int BookID { get; set; }         public string BookName { get; set; }         public string Category { get; set; }         public decimal Price { get; set; }         public string Operation { get; set; }     } } Model “Books.vb” Imports System.Web Namespace BooksApp.Models     Public Class Books         Public Property BookID() As Integer             Get                 Return m_BookID             End Get      
Post a Comment
Read more

Angular 2 Hello World

<!DOCTYPE html> <html>   <head>     <title>Angular 2 Hello World</title>     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="styles.css">     <!-- IE required polyfills, in this exact order -->     <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system-polyfills.js"></script>     <script src="https://npmcdn.com/angular2@2.0.0-beta.15/es6/dev/src/testing/shims_for_IE.js"></script>         <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system.js"></script>     <script src="https://npmcdn.c
Post a Comment
Read more

AngularJS Animations

<!DOCTYPE html> <html> <style> div {   transition: all linear 0.5s;   background-color: lightblue;   height: 100px;   width: 100%;   position: relative;   top: 0;   left: 0; } .ng-hide {   height: 0;   width: 0;   background-color: transparent;   top:-200px;   left: 200px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> <body ng-app="ngAnimate"> <h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1> <div ng-hide="myCheck"></div> </body> </html>
Post a Comment
Read more

Single Page Apps with AngularJS Routing and Templating

 *FILE STRUCTURE - script.js <!-- stores all our angular code --> - index.html <!-- main layout -->  - pages <!-- the pages that will be injected into the main layout -->  home.html about.html  contact.html *HTML This is the simple part. We’re using Bootstrap and Font Awesome. Open up your index.html file and we’ll add a simple layout with a navigation bar. <!-- index.html -->     <!DOCTYPE html>     <html>     <head>       <!-- SCROLLS -->       <!-- load bootstrap and fontawesome via CDN -->       <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />       <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />       <!-- SPELLS -->       <!-- load angular and angular route via CDN -->       <script src="https://ajax.googleapis.co
Post a Comment
Read more

AngularJS App.js

(function () {     'use strict';     angular         .module('app', ['ngRoute', 'ngCookies'])         .config(config)         .run(run);     config.$inject = ['$routeProvider', '$locationProvider'];     function config($routeProvider, $locationProvider) {         $routeProvider             .when('/', {                 controller: 'HomeController',                 templateUrl: 'home/home.view.html',                 controllerAs: 'vm'             })             .when('/login', {                 controller: 'LoginController',                 templateUrl: 'login/login.view.html',                 controllerAs: 'vm'             })             .when('/register', {                 controller: 'RegisterController',                 templateUrl: 'register/register.view.html',                 controllerAs: 'vm'             })
Post a Comment
Read more

AngularJS Register View

<div class="col-md-6 col-md-offset-3">     <h2>Register</h2>     <form name="form" ng-submit="vm.register()" role="form">         <div class="form-group" ng-class="{ 'has-error': form.firstName.$dirty && form.firstName.$error.required }">             <label for="username">First name</label>             <input type="text" name="firstName" id="firstName" class="form-control" ng-model="vm.user.firstName" required />             <span ng-show="form.firstName.$dirty && form.firstName.$error.required" class="help-block">First name is required</span>         </div>         <div class="form-group" ng-class="{ 'has-error': form.lastName.$dirty && form.lastName.$error.required }">             <label for="userna
Post a Comment
Read more

AngularJS Register Controller

(function () {     'use strict';     angular         .module('app')         .controller('RegisterController', RegisterController);     RegisterController.$inject = ['UserService', '$location', '$rootScope', 'FlashService'];     function RegisterController(UserService, $location, $rootScope, FlashService) {         var vm = this;         vm.register = register;         function register() {             vm.dataLoading = true;             UserService.Create(vm.user)                 .then(function (response) {                     if (response.success) {                         FlashService.Success('Registration successful', true);                         $location.path('/login');                     } else {                         FlashService.Error(response.message);                         vm.dataLoading = false;                     }                 });         }     } })();
Post a Comment
Read more

AngularJS Login View

<div class="col-md-6 col-md-offset-3">     <h2>Login</h2>     <form name="form" ng-submit="vm.login()" role="form">         <div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">             <label for="username">Username</label>             <input type="text" name="username" id="username" class="form-control" ng-model="vm.username" required />             <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>         </div>         <div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">             <label for="password">Password&l
Post a Comment
Read more

AngularJS Login Controller

(function () {     'use strict';     angular         .module('app')         .controller('LoginController', LoginController);     LoginController.$inject = ['$location', 'AuthenticationService', 'FlashService'];     function LoginController($location, AuthenticationService, FlashService) {         var vm = this;         vm.login = login;         (function initController() {             // reset login status             AuthenticationService.ClearCredentials();         })();         function login() {             vm.dataLoading = true;             AuthenticationService.Login(vm.username, vm.password, function (response) {                 if (response.success) {                     AuthenticationService.SetCredentials(vm.username, vm.password);                     $location.path('/');                 } else {                     FlashService.Error(response.message);                     vm.dataLoading = fals
Post a Comment
Read more

AngularJS User Service (A user service designed to interact with a RESTful web service to manage users within the system)

(function () {     'use strict';     angular         .module('app')         .factory('UserService', UserService);     UserService.$inject = ['$http'];     function UserService($http) {         var service = {};         service.GetAll = GetAll;         service.GetById = GetById;         service.GetByUsername = GetByUsername;         service.Create = Create;         service.Update = Update;         service.Delete = Delete;         return service;         function GetAll() {             return $http.get('/api/users').then(handleSuccess, handleError('Error getting all users'));         }         function GetById(id) {             return $http.get('/api/users/' + id).then(handleSuccess, handleError('Error getting user by id'));         }         function GetByUsername(username) {             return $http.get('/api/users/' + username).then(handleSuccess, handleError('Error getting user b
Post a Comment
Read more

AngularJS Authentication Service

(function () {     'use strict';     angular         .module('app')         .factory('AuthenticationService', AuthenticationService);     AuthenticationService.$inject = ['$http', '$cookieStore', '$rootScope', '$timeout', 'UserService'];     function AuthenticationService($http, $cookieStore, $rootScope, $timeout, UserService) {         var service = {};         service.Login = Login;         service.SetCredentials = SetCredentials;         service.ClearCredentials = ClearCredentials;         return service;         function Login(username, password, callback) {             /* Dummy authentication for testing, uses $timeout to simulate api call              ----------------------------------------------*/             $timeout(function () {                 var response;                 UserService.GetByUsername(username)                     .then(function (user) {                         if (user !
Post a Comment
Read more

Show Descending Date in AngularJS using ng-repeat orderBy Filter

<!DOCTYPE html> <html> <head>     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> </head> <body style="font:15px Verdana;">     <div ng-app="myApp" ng-controller="myController">         <!-- FOR '-joinDate' THE PREDICATE IS SET USING '-' (HYPHEN) KEY FOR DESCENDING ORDER. -->         <div ng-repeat="emps in empArray | orderBy : '-joinDate'">             <div> {{ emps.joinDate | date : 'dd/MM/yyyy' }} : {{ emps.values.name }} </div>         </div>     </div> </body> <script>     angular.module("myApp", [])         .controller('myController', ['$scope', function ($scope) {             // CREATE AN 'employees' OBJECT, WITH AN ARRAY OF DATA.             $scope.employees = {                 "05/17/2015": { &#
Post a Comment
Read more