I working on this in editor Bracket and I created bunch of files and file structure can be seen in under scripts tags under Index.html the root folder names is projectAngular under which there is folder appCntrl -->controller--->(all the controllers files).Also Under folder views-->customers.html and under script==>[angular and angular route files]
Index.html is at root "projectAngular" folder
while trying to run this application I can only see BLANK screen. I check my script tags under index.html. appears good. Also under controller I think i gave dependencies also. I am not sure what exactly is happening here or the angular version i am using is outdated.
Pls HELP!!!! thanks
I created exact in Plunkr . Below is the URL
http://plnkr.co/edit/WVAglImSEKQkQA1BaAUZ?p=catalogue
index.html
<!doctype html>
<html ng-app="demoApp">
<head>
<title> Iterating over Data</title>
</head>
<body>
<!-- Here on Below Line I am loading the view through ngRoute directive declared
on "customerController" and "routes" declared on "appRoute.js" with view file
on customer.html -->
<div ng-view=""></div>
<!--
<h2>Customers</h2>
<br/> FILTER:
<input type="text" ng-model="customerFilter.name">{{customerFilter.name}}
<br/>
<table>
<tr>
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('orderTotal')">OrderTotal</th>
<th ng-click="doSort('joined')">Joined</th>
</tr>
<tr ng-repeat="cust in customers | orderBy:sortBy:reverse |filter:customerFilter">
<td>{{cust.name| uppercase}}</td>
<td>{{cust.city | lowercase}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined | date}}</td>
</tr>
</table>
<br/>
<span>Total Customers: {{customers.length}}</span>
-->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-routes.js"></script>
<script src="appCntrl/controller/appRoute.js"></script>
<script src="appCntrl/controller/customerController.js"></script>
</body>
customer.html
<h2>Customers</h2>
<br/> FILTER:
<input type="text" ng-model="customerFilter.name">{{customerFilter.name}}
<br/>
<table>
<tr>
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('orderTotal')">OrderTotal</th>
<th ng-click="doSort('joined')">Joined</th>
</tr>
<tr ng-repeat="cust in customers | orderBy:sortBy:reverse |filter:customerFilter">
<td>{{cust.name| uppercase}}</td>
<td>{{cust.city | lowercase}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined | date}}</td>
</tr>
</table>
<br/>
Total Customers: {{customers.length}}
customerController.js file
(function() {
var customerApp = angular.module('demoApp', ['ngRoute']);
// It helps angular to realize what params are being passed to controller if minification has replaced the variables
customerController.$inject = ['$scope'];
function customerController($scope) {
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers = [{
name: 'kevin',
city: 'San Farnando',
orderTotal: '10.78',
joined: '1990-12-10'
}, {
name: 'ketty',
city: 'Seattle',
orderTotal: '12.99',
joined: '2003-4-7'
}, {
name: 'John',
city: 'Texas',
orderTotal: '6.787',
joined: '2015-9-9'
}, {
name: 'Jackson',
city: 'ohio',
orderTotal: '12.00',
joined: '2003-12-1'
}];
$scope.doSort = function(propName) {
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
}
customerApp.controller('customerController', customerController);
}());
appRoute.js
(function() {
var customerApp = angular.module('demoApp', ['ngRoute']);
customerApp.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'customerController',
templateurl: 'views/customer.html'
})
.otherwise({
redirectTo: '/'
});
});
}());
templateurlneeds to betemplateUrl.Your plunkr has many mistakes:
You need to update the paths in plunkr to point at the root, there are no folders within plunkr.
Use external angular files, because otherwise, your plunkr size is too big and fails to load.
Updates to your plunkr that made it work.