asked on
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF8">
<title>My First App</title>
<!-- Add the usual things here -->
</head>
<body>
<div id="maincontent">
<div id="view" ng-view></div>
</div>
<script src="assets/vendor/angular/angular.min.js"></script>
<script src="assets/vendor/angular-route/angular-route.min.js"></script>
<script src="assets/js/myApp.js"></script>
</body>
</html>
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/Employee', {
templateUrl: '../templates/Employee.php',
controller: 'EmployeeController'
});
$routeProvider.otherwise({redirectTo : '/index.php'});
});
app.controller('EmployeeController', function($scope, $http, API_URL) {
/*
//retrieve employees listing from API
$http.get(API_URL + "employees")
.success(function(response) {
$scope.employees = response;
});
//show modal form
$scope.toggle = function(modalstate, id) {
$scope.modalstate = modalstate;
switch (modalstate) {
case 'add':
$scope.form_title = "Add New Employee";
break;
case 'edit':
$scope.form_title = "Employee Detail";
$scope.id = id;
$http.get(API_URL + 'employees/' + id)
.success(function(response) {
console.log(response);
$scope.employee = response;
});
break;
default:
break;
}
console.log(id);
$('#myModal').modal('show');
}
//save new record / update existing record
$scope.save = function(modalstate, id) {
var url = API_URL + "employees";
//append employee id to the URL if the form is in edit mode
if (modalstate === 'edit'){
url += "/" + id;
}
$http({
method: 'POST',
url: url,
data: $.param($scope.employee),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response) {
console.log(response);
location.reload();
}).error(function(response) {
console.log(response);
alert('This is embarassing. An error has occured. Please check the log for details');
});
}
//delete record
$scope.confirmDelete = function(id) {
var isConfirmDelete = confirm('Are you sure you want this record?');
if (isConfirmDelete) {
$http({
method: 'DELETE',
url: API_URL + 'employees/' + id
}).
success(function(data) {
console.log(data);
location.reload();
}).
error(function(data) {
console.log(data);
alert('Unable to delete');
});
} else {
return false;
}
}*/
});
<script type="text/ng-template" id="Employee.php">
<div class="col-xs-12">
<h2>About Page</h2>
<p>
Welcome to my website people
</p>
</div>
</script>
ASKER
ASKER
<script src="assets/js/controllers/EmployeeController.js"></script>
angular.module("myApp").controller('EmployeeController', function($scope, $http) {
console.log('testing');
});
ASKER
ASKER
ASKER
If you look at the link I posted earlier - that is a working version of your code base.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF8">
<title>My First App</title>
<!-- Add the usual things here -->
</head>
<body>
<div id="maincontent">
<div id="view" ng-view></div>
</div>
<script src="assets/vendor/angular/angular.min.js"></script>
<script src="assets/vendor/angular-route/angular-route.min.js"></script>
<script src="assets/js/myApp.js"></script>
<script src="assets/js/controllers/EmployeeController.js"></script>
</body>
</html>
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/Employee', {
templateUrl: '../templates/Employee.php',
controller: 'EmployeeController'
});
$routeProvider.otherwise({redirectTo : '/index.php'});
});
angular.module("myApp").controller('EmployeeController', function($scope, $http) {
//console.log('testing');
});
<div class="col-xs-12">
<h2>About Page</h2>
<p>
Welcome to my website people
</p>
</div>
ASKER
ASKER
ASKER
ASKER
ASKER
ASKER
ASKER
ASKER
ASKER
Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.
TRUSTED BY