Planning to use both jQuery and AngularJS because jQuery has many UI
Widgets available which the latter doesnt have.
Home and Admin buttons work.
Going further
1) Want to open a JQuery Dialog Window on the click of a button.(OpenReport)
2) the reportView.html page should be opened within the dialog. Idea is to
open different reportParams screen withing the same dialog. Maybe we can
have a reportController.js
3) try to continue to use the routing logic provided by angular JS
Attachment has the project structure.
*index.html*
<!DOCTYPE html>
<html>
<head>
<title>MVC Demo</title>
<!--Start : jQuery Script Includes-->
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css";
/>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js";></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js";></script>
<!--End : jQuery Script Includes-->
<script type="text/javascript">
$(document).ready(function () {
var dialog = $("#dialogForm").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true
});
$('#openReport').click(function () {
dialog.dialog("open");
});
});
</script>
</head>
<body ng-app="mvcApp">
<header class="header" ng-controller="navigationController">
<table>
<thead>
<tr>
<th>
<button type="button"
ng-click="navigateTo('home')">Home</button>
</th>
<th>
<button type="button"
ng-click="navigateTo('admin')">Admin</button>
</th>
<th>
<button type="button"
id="openReport">Report</button>
</th>
</tr>
</thead>
</table>
</header>
<section class="contentView" ng-view />
<div id="dialogForm" title="Basic dialog">
<p>This is the default dialog which is useful for displaying
information. The dialog window can be moved, resized and closed with the
'x' icon.</p>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js";></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js";></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-resource.min.js";></script>
<script src="app.js"></script>
<script src="navigationController.js"></script>
<script src="home/homeController.js"></script>
<script src="admin/adminController.js"></script>
</body>
</html>
*App.js*
//Define an angular module for our app
var mvcApp = angular.module('mvcApp', ['ngRoute']);
//Define Routing for app
mvcApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: '/home/homeView.html',
controller: 'homeController'
}).
when('/admin', {
templateUrl: '/admin/adminView.html',
controller: 'adminController'
}).
otherwise({
redirectTo: '/home'
});
}]);
*navigationController.js*
'use strict';
mvcApp.controller('navigationController', function ($scope, $location) {
$scope.navigateTo = function (path) {
switch(path)
{
case "home":
$location.url('/home');
break;
case "admin":
$location.url('/admin');
break;
default:
$location.url('/home');
}
};
});
*homeController.js*
'use strict';
mvcApp.controller('homeController', function ($scope, $location) {
$scope.searchModel = {};
$scope.init = function () {
//alert('homeController init... ');
};
var players = [{ name: 'John Doe', point: 45, age: 23, sex: 'M' }, {
name: 'Kathy Bernert', point: 85, age: 22, sex: 'F' }, { name: 'Johny',
point: 55, age: 45,sex:'M' }];
$scope.players = players;
$scope.init();
});
*homeView.html*
<div>
<table class="playerStyle">
<tr>
<th>Name</th>
<th>Age</th>
<th>Point</th>
</tr>
<tr ng-repeat="player in players">
<td>{{player.name}}</td>
<td>{{player.age}}</td>
<td>{{player.point}}</td>
</tr>
</table>
</div>
*adminController.js*
'use strict';
mvcApp.controller('adminController', function ($scope) {
$scope.init = function () {
//alert('adminController init... ');
};
var adminAgents = [
{ name: 'John Doe', role: 'superAdmin', dept: 'Internet Services' },
{ name: 'Athen Hajiro', role: 'dataAdmin', dept: 'Data Services' },
{ name: 'Bill Jarr', role: 'eSAgentAdmin', dept: 'Enterprise
Services' }
];
$scope.adminAgents = adminAgents;
$scope.init();
});
*adminView.html*
<div>
<table id="adminTableStyle">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Dept</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="adminAgent in adminAgents" ng-class="{red:
hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false">
<td>{{adminAgent.name}}</td>
<td>{{adminAgent.role}}</td>
<td>{{adminAgent.dept}}</td>
<td>
<input type="button" value="Edit" />
<input type="button" value="Delete" />
</td>
</tr>
</tbody>
</table>
</div>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
