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
Related
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>
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
Forgive me for my novelty with Angular but I can't find what the problem to this seemingly simple program. Instead of the $scope displaying "Jonathan" which is defined LoginController, it displays {{logins.username}} in login.html. If I move the controller in the index.html, it works fine. When I move it to app.js file, it does not work. Any help or direction would be greatly appreciated. Focusing on LoginController, below is my code:
Index.html
<!DOCTYPE html>
<html ng-app="millersFormalsApp">
<head>
<meta charset="UTF-8" />
<!-- This add the Angular JS to the program -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<!-- load the logo -->
<img src="img/millers_icon.png">
</head>
<body>
<h2> AngularJS Project</h2>
<div class="container">
<div id="menu">
Home
Login
Register
</div>
<div ng-view=""></div>
</div>
</body>
</html>
login.html
<h2> Login Page</h2>
Username:
<input type="text" placeholder="Username" ng-model="logins.username"
<br />
Password:
<input type="text" placeholder="Password" ng-model="logins.password"
<h2>Your Username is {{ logins.username }} </h2>
app.js
var millersFormalsApp = angular.module('millersFormalsApp', ['ngRoute']);
//** Route Provider takes care of routing functionality based
//** upon what has been selected
millersFormalsApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'HomeController',
templateUrl: 'Views/home.html'
})
.when('/login',
{
controller: 'LoginController',
templateUrl: 'Views/login.html'
})
.when('/register',
{
controller: 'RegisterController',
templateUrl: 'Views/register.html'
})
.otherwise({redirectTo: 'home.html'});
});
//** Controllers are called by the Route Provider to specifically execute
//** the selected item
millersFormalsApp.controller('HomeController', function ($scope)
{
$scope.homePage = "This is Miller's Home Page";
});
millersFormalsApp.controller('LoginController', function ($scope)
{
$scope.logins = {username: "Jonathan", password: ""};
console.log($scope);
});
millersFormalsApp.controller('RegisterController', function ($scope) {
$scope.register = { firstname: "", lastname: "" };
console.log($scope);
});
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>
I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo