I am new to angular js. I was just writing some sample application and I ran into problem with routes.
I am using cdn for angular
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
I created a html partial/file and wanted to link it to the index.html.I added the
<ng-view></ng-view> in the index.html and also the following code in the html for routing
angular.module("sample", []).config(function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
});
But I am getting an Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=enterprise&p1=Erro…s.org%2F1.2.13%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20%......2)
Also, I tried downloading angular-route.js and adding ngRoute as dependency, but it still does not work.
angular.module("enterprise", ['ngRoute']).config(function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
});
I have downloaded various versions of angularjs but I am stuck with the same error. Any idea has to why I am getting this error and how to resolve it?
Try this
angular.module("enterprise", ['ngRoute']).config(["$routeProvider", function($routeProvider){
$routeProvider.when("/",
{
templateUrl: "/partials/list.html"
});
}]);
Let me know if it doesn't work
Can you try removing the slash from templateUrl like this?
templateUrl: "partials/list.html"
Also, could you verify that you have set ng-app somewhere in the html and the template exists at the proper location (partials/list.html)?
Related
I have this piece of code from a mobile website that used to work perfectly.
document.addEventListener('deviceready', function() {
// launch
}, false);
var app = angular.module('app', []);
app.config(function($routeProvider){
$routeProvider
when('/home', {templateUrl: 'views/home.html'})
.when('/about', {templateUrl: 'views/about.html'})
.otherwhise({redirectTo: '/home'})
});
I updated to a newer version of angular, and I got a error.
I found out on other threads that ngRoute is now separate from angular.js so I've added it.
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
Now my error is :
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
I don't understand why $routeProvider is still unknow now that I've added the angular route script.
I tried couple fix that I've found here but can't make it work. Any ideas of what I missed ?
Thank you.
ngRoute is now separate from angular.js so to use it you have to inject it as a dependency, like this:
var app = angular.module('app', ['ngRoute']);
as for the following error
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $routeProvider
Usually, this error appears when angular-route.js is not loaded for some reason.
The said project has mismatched versions for angular and its module, for example:
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
so Make these versions match. They should likely be .../1.6.4/angular.js and .../1.6.4/angular-route.js
I have
<base href="/!#/">
at the top of my index.html file. When I go to URL http://localhost:5000/ everything works fine, it instantly add #!/ so the URL is http://localhost:5000/#!/ and page display as expected.
At the server side I have following code which should allow me to use my files
app.use(express.static(path.join(__dirname, 'public')));
Structure of my files is something like:
bookApp(folder)
server.js
public(folder)
index.html
app.js(ngRoute)
views(folder)
css(folder)
controllers(folder)
and my AngularJS routing is:
(function () {
'use strict';
angular
.module('app', [
'ngRoute'
])
.config(config);
function config ($routeProvider) {
$routeProvider
.when('/', {
controller: 'PostsCtrl',
templateUrl: 'views/posts.html'
})
.when('/register', {
controller: 'registerCtrl',
templateUrl: 'views/register.html'
})
.when('/login', {
controller: 'loginCtrl',
templateUrl: 'views/login.html'
})
.otherwise('/');
}
})();
The very first page (views/posts.html) load as expected but when I click
<li>Sign in</li>
the URL is http://localhost:5000/login not as like I thought http://localhost:5000/!#/login.
and it display:
Cannot GET /login
when I manually change URL to http://localhost:5000/#!/login it works fine.
How to fix this behavior?
The only solution I see is to get rid of <base> tag and in every link manually in href directive add !# before slash.
It looks like you are forgetting the ng-view directive: <div ng-view></div> which is the container for the content that is provided by your routing. Place this above your script if you have everything contained in one file.
You can also try:
<ng-view></ng-view>
<div class="ng-view"></div>
Is there any particular reason you are still using Angular 1? I know this isn't technically answering your question, but I would highly recommend that you start using the latest Angular. You can still keep legacy code but it will make a lot of what you are doing a lot cleaner and clear.
in index.html
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
controller
angular.module("testCtrl",[]).controller('TestController', ["$scope", function($scope) {
$scope.Myname = "my first route";
}]);
app.js
var app = angular.module('testApp',["ngRoute", "testCtrl"]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/",{
templateUrl: "Views/main.html"
})
.when("/details",{
templateUrl: "Views/details.html",
controller : TestController
})
.otherwise({
redirectTo : "/"
});
}]);
my homepage loads fine but with some reason /details show error like --- No webpage was found for the web address: http://127.0.0.1:8080/details
I am new to angular and I am learning. I am not able to understand whats wrong ..do we have any tools to debug route error? I am using angular 1.5.8 version for now.
server console - "GET /details" Error (404): "Not found"
The issue is that TestController isn't defined in app.js. You should use the controller name as a string, like so.
.when("/details",{
templateUrl: "Views/details.html",
controller : "TestController"
})
See this plunk for a working example.
https://plnkr.co/edit/xi20MmchJY6TO1SG2o0d?p=preview
I think you have omitted the dependency on ngRoute:
angular.module('testCtrl', ['ngRoute'])...
Are you referencing ng-app in your HTML as well (can't see your HTML code)
Presumably you have included your scripts in the HTML page too?
Good afternoon everyone,
I started AngularJS a few days ago and, if I usually find my all answers here, I have a mysterious error...
Here is the evil error:
Error in event for (unknown): SyntaxError: Unexpected <
extensions::uncaught_exception_handler
Here is for my code:
HTML (index.html)
<script src="/app/main.controller.js" type="text/javascript" charset="utf-8"></script>
<script src="/app/controllers/test.controller.js" type="text/javascript" charset="utf-8"></script>
Home
Design
ANGULAR (main.controller.js)
function RouteProvider ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/app/views/home.html",
controller: "homeCtrl"
})
.when("/design", {
templateUrl: "/app/views/design.html",
controller: "testCtrl"
})
.otherwise({
redirectTo: "/"
});
}
STRUCTURE
index.html
/app
main.controller.js
/controllers
/views
This is the part of the code concerned by my route config.
The error happens whenever I activate the links above...
Thank you for your time!
(It's my first post, sorry if it's messy and if you need more code juste ask and I'll add it :])
Like in title, I can't load a template correctly. I can't understand where the problem is, the only error that I got is "Error: [$compile:tpload] Failed to load template: /testingBlock.html"
Paths:
/mainDirOfTheProject
/application
/library
/webroot
/javascript: [angularjs.js, angular-route.js, app.js]
index.html
testBlock.html
HTML(index.html):
<body ng-app="App" ng-controller="MainCTRL as ctrl">
{{ctrl.nameApp}}
<div ng-view></div>
</body>
HTML(testingBlock.html):
<h1>Just a test</h1>
Javascript (app.js):
angular
.module("App", ["ngRoute"])
.config(config)
.controller("MainCTRL", MainCTRL);
function MainCTRL($location){
this.nameApp = "myApp";
}
function config($routeProvider, $locationProvider){
$routeProvider
.when("/",{
templateUrl: "/testingBlock.html",
controller: "MainCTRL"
})
.otherwise({redirectTo:"/"});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}
I sorted it out: the problem was that the routing doesn't accept HTML file but HTM file.
I tried with jQuery ajax call, and it was the same.
So the question is, why jQuery ajax call doesn't accept .html files?
Try to use a dot in front of the slash :
templateUrl: "./testBlock.html",
Should be able to load it relative to the path of your main index.html, try:
templateUrl: "testBlock.html",
If that doesn't work, watch the network tab in your browser dev tools and see what path it's trying to load your template from, and adjust as needed.