I am trying to walk through an Angular tutorial and having trouble with some basics.
I have the following directory structure:
index.html
angular.min.js
angular-route.js
app
views
customers.html
orders.html
The files in app/views/ folder are templates. In index.html, I have the following
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="customersApp">
<head>
<meta charset="utf-8" />
<title>Angular Test</title>
</head>
<body>
<div ng-view></div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script>
var app = angular.module('customersApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'CustomersController',
templateUrl: 'app/views/customers.html'
})
.when('/orders',
{
controller: 'OrdersController',
templateUrl: 'app/views/orders.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('CustomersController', function ($scope) {
$scope.customers = [
{ "id": 1, "name": 'Ted', "total": 5.994 },
{ "id": 2, "name": 'Michelle', "total": 2.994 }
];
});
app.controller('OrdersController', function ($scope) {
$scope.customerId = 5;
});
</script>
</body>
</html>
In customers.html, I have the following:
<div ng-controller="CustomersController">
Search:
<input type="text" ng-model="searchText" />
{{ searchText }}
<h3>Customers: </h3>
<table>
<tr ng-repeat="cust in customers | filter:searchText">
<!-- <td>{{ cust.id }}</td>-->
<td>{{ cust.name }}</td>
<td>{{ cust.total | currency }}</td>
</tr>
</table>
</div>
Given that I have <div ng-view></div> in index.html, I would thing that Angular would correctly route me to the customers.html template, but it displays an empty screen.
I have 2 questions:
Why won't my template display? Am I missing something simple?
How do I debug this problem? I've looked in the F12 tools and see no errors under console. I've stepped through the code and there are no errors.
P.S. I know the directory structure is not optimal.
Related
I have read posts related to the same issue and cross verified my code but the problem persists.
Following is my index.html file
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<link href="Scripts/styles.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
<table style="font-family:Arial">
<tr>
<td class="header" colspan="2" style="text-align:center">Website Header</td>
</tr>
<tr>
<td class="leftMenu">
Home<br/>
Courses<br />
Students<br />
</td>
<td class="mainContent">
<div><ng-view></ng-view></div>
</td>
</tr>
</table>
</body>
</html>
script.js file
/// <reference path="angular-route.js" />
/// <reference path="angular.js" />
var myModule = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "Templates/home.html",
controller: "homecontroller",
})
.when("/courses", {
templateUrl: "Templates/courses.html",
controller: "coursescontroller",
})
.when("/students", {
templateUrl: "Templates/students.html",
controller: "studentscontroller",
})
.controller("homeController", function ($scope) {
$scope.message = "HomePage";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["c","c++","c#"];
})
.controller("studentsController", function ($scope) {
$scope.students = [{ name: "Chandu", id: 1, gender: "female" }, { name: "Suma", id: 2, gender: "female" }, { name: "Arin", id: 3, gender: "male" }];
})
})
I have defined home, courses and students html files. After initial loading, when I click on any of the links for eg. home, /#/home is getting appended to the url but the partial template is not loading.
At first, I did not get any console errors also. But now I am getting the following error even though the name of myModule is correctly used in both script.js and index.html files
Uncaught Error: [$injector:modulerr] Failed to instantiate module myModule due to:
Error: [$injector:nomod] Module 'myModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.9/$injector/nomod?p0=myModule
I very much appreciate any assistance to resolve my issue and help me find out where I am going wrong.
P.S: Index.html is in main directory and partial templates are in templates folder in main directory. And I am using version 1.5.9 of both angular.js and angular-route.js
you haven't added the module js file to your html page. You are only loading the angular libraries you need to add the script.js file after your angular libraries. The error is stating it can't find the module because it hasn't been loaded.
In the header you need to add the following
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/script.js"></script><!-- loading your module -->
<link href="Scripts/styles.css" rel="stylesheet" />
<meta charset="utf-8" />
You forgot to add the main js file. And,
Try change the code to this:
<td class="leftMenu">
Home<br/>
Courses<br />
Students<br />
</td>
This might solve the problem.
Checking out your code it looks like you forgot to include script.js in your html code. Please include that file
<script src="your-path/script.js"></script>
after
<script src="Scripts/angular-route.js"></script>
And yes another thing is you have got error in your script.js file too. Check out your code, all those controllers must be out of that config.
Example:
angular.module('module-name', [])
.config(function() {
//
})
.controller('controller-name', function() {
//
});
Your links are missing the hashPrefix '!'.
This prefix appears in the links to client-side routes, right after the hash (#) symbol and before the actual path (e.g. index.html#!/some/path).
Given your HTML where hashPrefix is added to the links:
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular-route.js"></script>
<script src="script.js"></script>
<meta charset="utf-8" />
</head>
<body>
<table style="font-family:Arial">
<tr>
<td class="header" colspan="2" style="text-align:center">Website Header</td>
</tr>
<tr>
<td class="leftMenu">
Home<br/>
Students<br />
</td>
<td class="mainContent">
<div>
<ng-view></ng-view>
</div>
</td>
</tr>
</table>
<script type="text/ng-template" id="home.html">
Content of HOME template.
</script>
<script type="text/ng-template" id="students.html">
Content of STUDENTS template.
</script>
</body>
</html>
And your angular module:
var myModule = angular.module("myModule", ["ngRoute"])
.config(function ($locationProvider, $routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "homeController"
})
.when("/students", {
templateUrl: "students.html",
controller: "studentsController"
})
})
.controller("homeController", function ($scope) {
console.log('This is home controller');
})
.controller("studentsController", function ($scope) {
console.log('This is students controller');
});
It works.
In my app I have index.html where there is ng-view directive. Inside that directive I add information from main.html as defalut - it's a table of names and links. By clicking a link the content of ng-view updates and information about the particular link from link.htmlappears. Please, see my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head> ... </head>
<body ng-controller="myCtrl">
<h1>AngularJS</h1>
<ng-view></ng-view>
</body>
</html>
My main.js:
angular
.module('app', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/main.html'
})
.when('/link/:id', {
templateUrl: 'partials/circle.html',
controller: 'linkCtrl'
})
.otherwise({
redirectTo: '/'
})
})
.controller('myCtrl', function($scope) {
$scope.obj = [
{name: "aaa", link: "000"},
{name: "bbb", link: "111"},
{name: "ccc", link: "222"}
];
$scope.clickFunc = function() {
alert('Im doubleclicked');
};
})
.controller('linkCtrl', function($scope, $routeParams) {
$scope.id = $scope.obj[$routeParams.id];
});
Here is my main.html:
<h2>Information</h2>
<table>
<thead>
<tr>
<td>Name</td>
<td>Link</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="link in obj">
<td>{{ link.name }}</td>
<td>{{ link.link }}</td>
</tr>
</tbody>
</table>
And here is link.html:
<p>Welcome to the new link {{ id }}</p>
Back to home
I also need to be able to double click the same link. The question is how to do that because adding ng-dblclick directive doesn't work. Is there any way to make it possible?
I've seen here a similar question but I didn't see the answer.
Thank you for your help in advance!
I learning AngularJS routing and can't seem to figure out why the 2nd when() on $routeProvider does not work.
index.html
<html lang="en" ng-app="myApp" class="no-js">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
<div>
<ng-view></ng-view>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
'use strict';
// Declare app level module which depends on views, and components
var app = angular.module('myApp', [
'ngRoute'
]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {templateUrl: 'partials/li.html', controller: 'MainCtrl'}).
when('/new', {templateUrl: 'partials/edit.html'}).
otherwise({redirectTo: "/"})
}]);
app.controller('MainCtrl', ['$scope', 'persons', function ($scope, persons) {
$scope.persons = persons
}]);
app.factory('persons', [function () {
var persons = [
{fname: "Dave", lname: "Thomas"},
{fname: "John", lname: "Smith"},
{fname: "Jason", lname: "Doe"},
{fname: "Stupid", lname: "Guy"},
];
return persons;
}]);
li.html ( for some reason, I cannot save this as list.html in WebStorm)
<table class="table table-striped" style="width: auto" >
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<td><span class="glyphicon glyphicon-plus"></span></td>
</tr>
</thead>
<tbody ng-repeat="person in persons">
<tr >
<td>{{person.fname}}</td>
<td>{{person.lname}}</td>
<td><span class="glyphicon glyphicon-edit"></span ></td>
</tr>
</tbody>
</table>
Whenever I click on plus icon, it throws me a 404 error. Even in the IDE, the 2nd when in app.js is of other color than the 1st one and the otherwise().
EDIT: Also help me with $locationProvider which throws this error when adding to app.config() - Error: [$location:nobase] $location in HTML5 mode requires a tag to be present!
You need to update from
href="/new"
to
href="#/new"
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