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
Related
/// <reference path="Scripts/angular.js" />
var myApp = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "homeHTML.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "coursesHTML.html",
controller: "coursesController"
})
.when("/student", {
templateUrl: "studentHTML.html",
controller: "studentController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home";
})
.controller("coursesController", function ($scope) {
$scope.message = "Courses";
})
.controller("studentController", function ($scope) {
$scope.message = "Student";
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Script.js"></script>
<title></title>
</head>
<body>
<table>
<tr>
<td colspan="2" style="width:600px; height:100px; background-color:#b4b4b4; text-align:center">
This is the header area
</td>
</tr>
<tr>
<td style="width:200px; height:400px; background-color:#ff0000">
<ul>
<li>Home</li>
<li>Courses</li>
<li>Student</li>
</ul>
</td>
<td style="width:400px; height:400px; background-color:#ff6a00">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" style="width:500px; height:100px; background-color:#b4b4b4; text-align:center">
This is a Footer Area
</td>
</tr>
</table>
</body>
</html>
homeHTML, studentHTML, coursesHTML all are same as below.
<h1>{{message}}</h1>
<div>
<p>Hi this is home partial view</p>
</div>
I found this error in the snippet part
Error:{
"message": "Uncaught ReferenceError: angular is not defined",
"filename": "http://stacksnippets.net/js",
"lineno": 51,
"colno": 13
}
What happened here is I get the view as shown in snippet with no errors in the browser and also when i click links home, courses, student nothing appears.
Please point out what went wrong here.
Guyss I found out the answer
/// <reference path="Scripts/angular.min.js" />
var myApp = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/home", {
templateUrl: "homeHTML.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "coursesHTML.html",
controller: "coursesController"
})
.when("/student", {
templateUrl: "studentHTML.html",
controller: "studentController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home";
})
.controller("coursesController", function ($scope) {
$scope.message = "Courses";
})
.controller("studentController", function ($scope) {
$scope.message = "Student";
});
I have added $locationProvider. I will update the reason soon.
First define angular module in your html or body tag and make sure your angular version is same as angular-router version.Also don't forget to define respective controllers in homeHTML.html, coursesHTML.html and studentHTML.html
homeHTML.html
<div ng-controller="homeController">
<h1>{{ message }}</h1>
</div>
Its working for me.
check out this link : https://plnkr.co/edit/cZzk8EKBXqRuoy6oYhuF?p=preview
The above error i am getting when i run angularjs route simple application.
I made separate folder for partial template. only three files are there that contains simple headings.
below code for route.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular Js Route Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/external/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/route.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script src="js/route.js" type="text/javascript"></script>
</head>
<body>
<div class="outerWraper">
<div class="header">
<h2>Website Header</h2>
</div>
<div class="mainContainer">
<div class="leftContainer">
<ul class="leftMenuBar">
<li>Home</li>
<li>Courses</li>
<li>Students</li>
</ul>
</div>
<div class="rightContainer">
<div class="eachContentDiv">
<ng-view> </ng-view>
</div>
</div>
</div>
<div class="footerWraper">
<h5>Website footer</h5>
</div>
</div>
</body>
Correspondence js file.
var myApp = angular
.module('myApp', ["ngRoute"])
.config(function ($routeProvider){
$routeProvider
.when("/home", {
templateUrl: "partial_route_templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "partial_route_templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "partial_route_templates/student.html",
controller: "studentController"
})
.controller('homeController', function ($scope){
$scope.message = "Home Page";
})
.controller('coursesController', function ($scope){
$scope.message = "courses Page";
})
.controller('studentController', function ($scope){
$scope.message = "student Page";
})
});
Your route.js file is bonkered. I'll provide the corrected code, but if you had researched the error at all, you would have seen the error is pretty clear - $routeProvider has no function controller. You're chaining your controller definitions to $routeProvider and not the angular object.
var myApp = angular
.module('myApp', ["ngRoute"])
.config(function ($routeProvider){
$routeProvider
.when("/home", {
templateUrl: "partial_route_templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "partial_route_templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "partial_route_templates/student.html",
controller: "studentController"
});
})
.controller('homeController', function ($scope){
$scope.message = "Home Page";
})
.controller('coursesController', function ($scope){
$scope.message = "courses Page";
})
.controller('studentController', function ($scope){
$scope.message = "student Page";
});
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
Angular Js submit doesn't seem to be working
It loads and it doesn't give me any errors, but the posts are not being added to the "posts" collection.
I'm using chrome and web server extension for chrome.
angular.module('littleTweet', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'MainController'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: 'posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}])
.factory('posts', [function() {
var o = { posts: []};
return o;
}])
.controller('MainController', ['$scope', 'posts', function($scope, posts){
$scope.posts = posts.posts;
$scope.current_user = 'me';
$scope.addPost = function() {
//if(!$scope.message || $scope.message === '') { return; }
$scope.posts.push({
user: $scope.current_user,
message: $scope.message,
time: new Date()
});
$scope.message = '';
};
}])
.controller('PostsCtrl', ['$scope', '$stateParams', 'posts', function($scope, $stateParams, posts) {
$scope.post = posts.posts[$stateParams.id];
}]);
<html>
<head>
<title>Little Tweet</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="littleTweet">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<div class="page-header">
<h1>Little Tweet</h1>
</div>
<div ng-repeat="post in posts">
<span style="font-size:20px; margin-left:10px;">
{{post.user}}: {{post.message}} at {{post.time}}
</span>
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Message"
ng-model="message"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</div>
</div>
<script type="text/ng-template" id="home.html">
<div class="page-header">
<h1>Little tweet</h1>
</div>
<!-- rest of template -->
</script>
</body>
</html>
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"