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"
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 am beginning in the world of AngularJS.
I have created a small app which should pull data from an API with some dummy values. The API works and gives the following JSON(typing /api/employees/):
[{"Id":1,"FirstName":"George","LastName":"Lucas"},{"Id":2,"FirstName":"Peter","LastName":"Jackson"},{"Id":3,"FirstName":"Christopher","LastName":"Nolan"}]
To consume this I have created the following:
(function () {
'use strict';
config.$inject = ['$routeProvider', '$locationProvider'];
angular.module('empApp', [
'ngRoute', 'employeesServices'
]).config(config);
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/test', {
templateUrl: '/Views/test.html',
controller: 'TestCtrl'
})
.when('/', {
templateUrl: '/Views/list.html',
cntroller:'EmployeeListController'
})
.otherwise({
redirectTo: '/'
});
//$locationProvider.html5Mode(true);
}
angular.module('empApp')
.controller('TestCtrl', TestCtrl);
// Test Contoller - ngView
TestCtrl.$inject = ['$scope'];
function TestCtrl($scope) {
$scope.model = {
message: "This is my app!!!"
};
};
// Employee List Controller
EmployeeListController.$inject = ['$scope', 'Employee'];
function EmployeeListController($scope, Employee) {
$scope.employees = Employee.query();
};
// Employees Service
angular
.module('employeesServices', ['ngResource'])
.factory('Employee', Employee);
Employee.$inject = ['$resource'];
function Employee($resource) {
return $resource('/api/employees/:id');
};})();
I haven't seprated the code into separate files at this time but do intend to. Please also give any advice re naming conventions etc any help is appreciated
I have the following partial html file:
<div>
<h1>List Employees</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees">
<td>
edit
delete
</td>
<td>{{emp.FirstName}}</td>
<td>{{emp.LastName}}</td>
</tr>
</tbody>
</table>
<p>
Add New Employee
</p></div>
the index.html file contains:
<!DOCTYPE html>
<html ng-app="empApp">
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>Hello Angular JS</h1>
What is 2+2 ?
<br /><br />
Answer = {{2+2}}
<br /><br />
<ng-view></ng-view>
</body>
</html>
Angular works as the expression confirms a 4. But I get no data from the API.
Please help!!
I noticed you have a typo in the routes definition( cntroller:'EmployeeListController').
(and I don't have enough reputation for comments)
Exact. Probably your EmployeeListController was never instantiated by wrong declaration "cntroller" and your employees variable have undefined value.
Well after a lot of reading and web pages I realised that I had not defined the controller as available to the module so my code should read:
angular.module('empApp')
.controller('TestCtrl', TestCtrl)
.controller('EmployeeListController', EmployeeListController);
Thanks for looking!
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 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.