Can anyone figure out why this might not be displaying? The View1.html and View2.html docs are in place in the partials folder. Sometimes I just get a completely blank screen, sometimes I get a Name: and text box, sometimes I get View1 but never do I get the customer names. Thanks..
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<base href="/"> <!-- needed for Angular HTML 5 mode -->
<title>Angular Todo</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/bower_components/bootstrap/dist/css/bootstrap.css">
<script type="text/javascript" src="http://localhost:8080/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="http://localhost:8080/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="http://localhost:8080/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="http://localhost:8080/bower_components/angular-route/angular-route.js"></script>
</script>
<style>
.container{
padding: 20px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div data-ng-view></div>
</div>
<script>
var demoApp = angular.module('demoApp', []);
demoApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController'
templateUrl: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/'});
});
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [{
name: 'John Doe', city: 'New York'
},
{
name: 'John Smith', city: 'Phoenix'
},
{
name: 'Jane Doe', city: 'San Francisco'
}
];
$scope.addCustomer= function (){
$scope.customers.push(
{ name: $scope.newCustomer.name. city: $scope.newCustomer.city
});
};
});
</script>
<script src='js/controller.js'></script>
</body>
</html>
You are not displaying anything. Try this
<li data-ng-repeat="cust in customers | filter:name | orderBy: 'name'">
{{cust.name}}:{{cust.city}}
</li>
var demoApp = angular.module('demoApp', []);
demoApp.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'new york'
},
{
name: 'john smith',
city: 'phoenix'
},
{
name: 'jane doe',
city: 'san francisco'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" class="container" data-ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy: 'name'">
{{cust.name}}:{{cust.city}}
</li>
</ul>
</div>
You forget to bind the properties
<li data-ng-repeat="cust in customers | filter:name | orderBy: 'name'">
<span ng-bind="cust.name"></span>
</li>
Related
I hope someone can help me figure out my issue. I am trying to fill a comboBox with some array data but I am getting an empty comboBox as if nothing it returns back to be displayed, I know I am closed but can find what I am missing.
Thank you in advance
angular.module('demoApp', [])
.controller('simpleController', ['$scope', function($scope) {
$scope.employeeCollections = [
{ id:'1',name: 'Dave Jones', title: 'IT Administrator' },
{ id:'2',name: 'Daniel Thomas', title: 'Software Developer' },
{ id:'3',name: 'Sam Alexandrovic', title: 'Senior Software Developer' }
];
$scope.selectedEmployee = $scope.employeeCollections[0].name;
}]);
<html ng-app="demoApp">
<head>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1> Employee Information </h1>
<div class="container" ng-controller="simpleController">
<select ng-model="selectedEmployee" ng-options="employee as employee.name for employee in employeeCollections"></select>
</div>
</body>
</html>
it seems your angularjs reference is wrong. please check the path. see below snippet with CDN.
<html ng-app="demoApp">
<body>
<h1> Employee Information </h1>
<div class="container" ng-controller="simpleController">
<select ng-model="selectedEmployee" ng-options="employee as employee.name for employee in employeeCollections"></select>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('demoApp', [])
.controller('simpleController',['$scope', function ($scope) {
$scope.employeeCollections = [
{ id:'1',name: 'Dave Jones', title: 'IT Administrator' },
{ id:'2',name: 'Daniel Thomas', title: 'Software Developer' },
{ id:'3',name: 'Sam Alexandrovic', title: 'Senior Software Developer' }
];
$scope.selectedEmployee = $scope.employeeCollections[0].name;
}
]
);
</script>
</html>
So quick question I've been looking at this code for awhile but cannot find why, it just gives me the output on the page
Partials/View1.html
I'm not trying to just post here whenever I run into some small issue but this has been baffling me for awhile now, and I get no errors on the console. I run the code from http://plnkr.co/edit/sN9TagVBOdX3mkrxaTiu?p=preview, mentioned on another post and it works fine, but I don't get the right output from this. The following is the index.html (the main page)
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
</head>
<body>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="scripts.js"></script>
</body>
My script look likes:
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
template: 'Partials/View1.html'
})
.when('/partial2',
{
controller: 'SimpleController',
template: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/'});
} );
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Phoenix'},
{name: 'Jane Doe', city: 'New York'},
{name: 'John Doe', city: 'San Francisco'}
];
$scope.addCustomer = function() {
$scope.customers.push({
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
}
});
And I don't get what is supposed to be shown from the view1.html, I just get what I showed up above. This is the code
<div class="container">
<h2>View 1</h2>
Name:
<br>
<input type="text" ng-model="filter.name">
<br>
<ul>
<li ng-repeat="cust in customers | filter:filter.name | orderBy: 'city'">{{ cust.name }} - {{ cust.city }}</li>
</ul>
<br>
Customer name: <br>
<input type="text" ng-model="newCustomer.name">
Customer city: <br>
<input type="text" ng-model="newCustomer.city">
<br>
<button ng-click="addCustomer()">Add Customer</button>
<br>
View 2
</div>
you should be using templateUrl instead of template:
.when('/partial2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
Can you help me get rid of error "Uncaught Error: [$injector:modulerr]."
I'm sick and tired of debugging Angularjs applications, it's very difficult to catch errors, i'm used to Java, and there is a simple to catch errors because i have a debugger.
But in case AngularJS, it's impossible.
Thanks a lot!
index.html
<!doctype html>
<html ng-app="customersApp">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<script src="app/controllers/app.js"></script>
<script src="app/controllers/customersController.js"></script>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
customers.html
<div class="row">
<h2>Customers</h2>
Filter: <input type="text" ng-model="customerFilter.name">
<br><br>
<table class="table table-bordered">
<tr class="active">
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('orderTotal')">Order Total</th>
<th ng-click="doSort('joined')">Joined</th>
</tr>
<tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
<td>{{cust.name}}</td>
<td>{{cust.city}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined | date: 'yyyy-MM-dd'}}</td>
</tr>
</table>
</div>
app.js
(function(){
var app = angular.module('customersApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'CustomersController',
templateUrl: 'app/views/customers.html'
})
.otherwice({redirectTo: '/'});
});
})();
customersController.js
(function(){
var CustomersController = function($scope) {
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers = [
{joined: '2012-12-02', name: 'John', city: 'Luhansh', orderTotal: 9.99},
{joined: '2012-09-14', name: 'Sergey', city: 'Kyiv', orderTotal: 5.799},
{joined: '2015-11-03', name: 'Denis', city: 'Warsaw', orderTotal: 1.35}
];
$scope.doSort = function(propName) {
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
}
};
CustomersController.$inject = ['$scope'];
angular.module('customersApp')
.controller('CustomersController', CustomersController);
})();
Your problem is you had typo in your app.js
.otherwice({redirectTo: '/'}); should be .otherwise({redirectTo: '/'});
(function(){
var app = angular.module('customersApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'CustomersController',
templateUrl: 'app/views/customers.html'
})
.otherwise({redirectTo: '/'});
});
})();
Working Plunkr
I'm creating a simpleApp using angularJS, unfortunately I have no idea about why it keeps showing blank. I guess AngularJS has failed to glue my controller & view.
Index.html
<!DOCTYPE html>
<html data-ng-app="simpleApp">
<head>
</head>
<body>
<div data-ng-view="">
</div>
<script src="/app/controllers/controllers.js"></script>
<script src="/app/services/customerService.js"></script>
<script src="/app/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</body>
</html>
App.js
var app = angular.module("simpleApp", []);
app.config(function($routeProvider) {
$routeProvider
.when("/", { controller: "simpleController", templateUrl: "/app/partials/view1.html" })
.when("/view2", { controller: "simpleController", templateUrl: "/app/partials/view2.html" })
.otherwise({ redirectTo: "/" });
});
Controllers.js
app.controller("simpleController", function($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
});
View1.html
<div>
<input type="text" data-ng-model="filter.name"/>
<ul>
<li data-ng-repeat="cust in customers | filter: filter.name | orderBy: 'Name'">
{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}
</li>
</ul>
<br/>
Customer Name:
<br/>
<input type="text" data-ng-model="newCustomer.Name"/>
<input type="text" data-ng-model="newCustomer.City"/>
<br/>
<input type="button" data-ng-click="addNewCustomer"/>
View 2
</div>
View2.html
<div>
<ul>
<li data-ng-repeat="cust in customers">
{{ cust.Name | lowercase }} - {{ cust.City | upppercase }}
</li>
</ul>
</div>
any idea?
The ng-route module is not part of the core angular.js file, you need to include it separately. Also the order of js files need to be changed
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.4/angular-route.js"></script>
<script src="/app/app.js"></script>
<script src="/app/controllers/controllers.js"></script>
<script src="/app/services/customerService.js"></script>
then
var app = angular.module("simpleApp", ['ngRoute']);
Also you have got the filter name uppercase wrong
{{ cust.Name | lowercase }} - {{ cust.City | uppercase }}
Demo: Fiddle
I believe you're missing a reference to the controller on your index.
Something like:
<body ng-controller="simpleController">
Should get your index page going.
Your routing configuration looks fine, but those routes are not affecting the actual index page. Those routes would load your views into an ng-view directive.
it was the path issue. I did miss "." when referencing to all javascript in the index.html file
The following code snippet should fix the issue
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.4/angular-route.js"></script>
<script src="./app/app.js"></script>
<script src="./app/controllers/controllers.js"></script>
<script src="./app/services/customerService.js"></script>
Use the following code I am not able to display any HTML. I do not receive any error in the console any error. Any idea what am I doing wrong?
index.html
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('KanbanBoard', ['ngRoute']);
(function () {
app.config(function ($routeProvider) {
$routeProvider.when("/boards", {
controller: "BoardsController",
templateUrl: "/app/boards/boardsView.html"
});
$routeProvider.otherwise({ redirectTo: "/boards" });
});
})();
controller.js
'use strict';
(function () {
app.controller('BoardsController', ['$scope', function ($scope) {
$scope.users;
this.users = [
{
id: 0,
email: 'a#a.com',
name: 'A',
surname: 'B',
initials: 'AB',
boards: [
{
id: 0,
title: 'Welcome Board',
description: 'Board sample',
isArchived: false,
},
{
id: 1,
title: 'Project X',
description: 'Project X description',
isArchived: false,
}
]
}
];
$scope = this.users;
}]);
})();
boardView.html
<div ng-controller="BoardsController as boardsCtrl">
<div ng-repeat="user in boardsCtrl.users">
{{user.name + " " + user.surname}}
<ul>
<li></li>
</ul>
</div>
</div>
In the body of your webpage it seems that you are missing ng-view:
<!DOCTYPE html>
<html ng-app="KanbanBoard" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div ng-view></div> <!--this is required.-->
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/boards/boardsController.js"></script>
</body>
</html>
From the documentation:
ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.
You missed adding the Boardview.html with controller on your index.html
It could be done inline or by using ng-include:
<div ng-include="boardView.html"></div>