<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-$route-service-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js"></script>
<script>
angular.module('ngRouteExample', ['ngRoute'])
.controller('RootControllerCreate', function ($scope) {
$scope.title = "Create";
})
.controller('RootControllerDetail', function ($scope) {
$scope.title = "Detail";
})
.controller('RootControllerUpdate', function ($scope) {
$scope.title = "Update";
})
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Routing/Detail', {
templateUrl: 'Routing/Detail',
controller: 'RootControllerDetail'
})
.when('/Routing/Create', {
templateUrl: 'Routing/Create',
controller: 'RootControllerCreate'
})
.when('/Routing/Update', {
templateUrl: 'Routing/Update',
controller: 'RootControllerUpdate'
})
.otherwise({
redirectTo: 'Routing/Index'
});
// configure html5 to get links working on jsfiddle
// $locationProvider.html5Mode(true);
});
</script>
</head>
<body ng-app="ngRouteExample">
Choose:
<a href="/#/Routing/Create">Create</a> |
<a href="/#/Routing/Detail">Detail</a> |
<a href="/#/Routing/Update">Update</a> |
<div ng-view></div>
</body>
</html>
c#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcAngularJs.Controllers
{
public class RoutingController : Controller
{
// GET: Routing
public ActionResult Index()
{
return View();
}
public ActionResult Create()
{
return View();
}
public ActionResult Detail()
{
return View();
}
public ActionResult Update()
{
return View();
}
}
}
Thursday, July 2, 2015
Angular Js Routing with multiple controllers
AngularJsMonday, June 29, 2015
jsPdf Print without browser history
Code Helper
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script type="text/javascript">
function load() {
var doc = new jsPDF();
doc.setFontSize(12);
doc.text(35, 25, "Welcome to JsPDF");
doc.autoPrint();
var string = doc.output('datauristring');
var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();
};
</script>
</head>
<body >
<input onclick="load()" type="button" value="click" />
</body>
</html>
Sunday, June 28, 2015
Bootstrap list group example
Bootstrap
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script>
angular.module('app', []);
angular.module('app').controller("MainController", function () {
var vm = this;
vm.title = 'AngularJS List Group Example';
vm.searchInput = '';
vm.shows = [
{
title: 'title 1',
year: 2001,
favorite: true
},
{
title: 'title 2',
year: 2002,
favorite: false
},
{
title: 'title 3',
year: 2003,
favorite: true
},
{
title: 'title 4',
year: 2014,
favorite: true
},
{
title: 'title 5',
year: 2005,
favorite: false
}
];
});
</script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.title}}</h1>
<h3>A list of TV shows</h3>
<ul class="list-group">
<li class="list-group-item" ng-repeat="show in main.shows"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>
</ul>
</div>
</body>
</html>
Bootstrap Login Responsive Form
Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Responsive Login Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
@*<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">*@
@*<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>*@
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="form-border">
<h2>Login Form</h2>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<a id="btn-login" href="#" class="btn btn-primary">Login </a>
<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-8">
</div>
</div>
</div>
</body>
</html>
Saturday, June 27, 2015
ng Grid Change cell Color
AngularJs
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px;
}
.red {
background-color: red;
color: white;
}
.green {
background-color: green;
color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{ name: "Name1", age: 1 },
{ name: "Name2", age: 2 },
{ name: "Name3", age: 3 },
{ name: "Name4", age: 4 },
{ name: "Name5", age: 5 }];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'name',
displayName: 'Name'
}, {
field: 'age',
displayName: 'Age',
cellTemplate: '<div class="ngCellText" ng-class="{\'green\' : row.getProperty(\'age\') == \'5\' }">{{ row.getProperty(col.field) }}</div>'
}]
};
});
</script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
Simple ng Grid
AngularJs
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{ name: "Name1", age: 1 },
{ name: "Name2", age: 2 },
{ name: "Name3", age: 3 },
{ name: "Name4", age: 4 },
{ name: "Name5", age: 5 }];
$scope.gridOptions = { data: 'myData' };
});
</script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
Thursday, June 25, 2015
AngularJS and Twitter Bootstrap and search glyphicon
Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<script>
angular.module("simpleapp", [])
.controller("SimpleController", function ($scope) {
$scope.entity = {};
$scope.entity.title = "A simple AngularJS app";
});
</script>
<body ng-app="simpleapp">
<div ng-controller="SimpleController">
<h2>Hello, {{entity.title}}</h2>
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
</body>
</html>
Subscribe to:
Posts (Atom)