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.
Related
I'm creating a website and I'm using JavaScript + AngularJS, presently I create the routes for the application, but it always returns 404 not found on the server, I've tried several examples of the internet but none of them worked, here's an example of my code, remembering that The html pages are inside the WebContent:
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index <br> home
</div>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/index", {
template: "/index.html"
})
.otherwise({
redirectTo: '/home.html'
});
});
</script>
</body>
</html>
you forgot the ng-view directive.
also,
the href need to be with a hash prefix - or using the Link directive.
the redirectTo key need to provide a view [name/address] & not a
template
if you want to use template files & not inline code use the templateUrl key
you can see an example of your code here: http://codepen.io/AceDesigns/pen/ZLXLKa
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index<br>
home
</div>
<div class="">
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider){
$routeProvider
.when("/index", {template:"<div>INDEX VIEW</div>"})
.when("/home", {template:"<div>HOME VIEW</div>"})
.when("/tempFile", {templateUrl: "views/temp_file.html"})
.otherwise({redirectTo: '/home'});
});
</script>
</body>
</html>
I am using "prettyprint" along with "AngularJs" which is working very well, but only issue is if I use routing, then the prettyprint function is not working (as it might have been configured to run on pageLoad). Now, what if I am going to various ng-view pages and coming back? How to run the prettyprint function even on route change?
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
One
Two
Three
<div ng-view=""></div>
<script>
//App Declaration
var app = angular.module('myApp', ['ngRoute'] );
//Controllers
app.controller('myCtrl', function($scope) {
});
//Routers
app.config(function($routeProvider){
$routeProvider
.when('/one', {
templateUrl: 'one.html'
})
.when('/two', {
templateUrl: 'two.html'
})
.when('/three', {
templateUrl: 'three.html'
})
.otherwise({
redirectTo: '/one'
});
});
</script>
</body>
</html>
one.html
This is one
<pre class="prettyprint">
<div>
<p>
<a href="http://www.google.com">Google</a>
</p>
</div>
</pre>
two.html
This is two
Image on first time clicking 'one' link:
Going to 2nd view or 3rd view and then coming back:
Can someone help me out please?
I try simple Universal windows 8.1 project.
My default.html page:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="utf-8" />
<!-- WinJS references -->
<script src="scripts/services/winstore-jscompat.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/winjs/js/base.min.js"></script>
<script src="node_modules/winjs/js/ui.min.js"></script>
<!-- angular -->
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/angular-winjs/js/angular-winjs.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/EventsController.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Project has one simple view and simple controller. When I use "win-list-view" in my view, (even empty win-list-view without bounding) I got error which i do not understand.
HTML1300: Navigation occurred.
default.html
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
default.html
Error: [$compile:noslot] http://errors.angularjs.org/1.5.3/$compile/noslot? p0=true&p1=%3Cdiv%20class%3D%22ng-isolate-scope%22%20item-data- source%3D%22manufacturers%22%20ng-transclude%3D%22true%22%3E
...
My page is open, but data on screen are in json format. Whole data binding array is shown on screen.
View:
<div>
<win-list-view item-data-source="manufacturers">
<win-item-template>
<div>
<h4>{{item.data.title}}</h4>
<h6>{{item.data.text}}</h6>
</div>
</win-item-template>
<win-list-layout></win-list-layout>
</win-list-view>
</div>
Controller:
(function () {
angular.module("mainApp")
.controller("EventsController", function ($scope) {
$scope.manufacturers = [
{ title: "marvelous mint", text: "gelato" },
{ title: "succulent strawberry", text: "sorbet" },
];
})
}());
My app:
(function() {
angular.module("mainApp", ["ngRoute", "winjs"]);
angular.module("mainApp")
.config(function ($routeProvider) {
$routeProvider
.when("/events", {
templateUrl: "views/events.html",
controller: "EventsController"
})
.otherwise({ redirectTo: "/events" });
});
}());
Why "win-list-view" tag on view caused that error?
Work on windows 8 with VS2015, maybe it has influence.
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!
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.