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.
Related
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.
I am developing an Angular 1.6 app and using Angular UI-Router.
In my config.router.js file I have a state:
$stateProvider.state('myapp.edit', {
url: '/edit/:id',
templateUrl: 'views/actions/edit.html',
controller: ['$http','$rootScope',function( $http, $rootScope){
$rootScope.displaySideBar = true;
}]
});
In the application layout file layout.html file I have included navbar navbar.html file using data-ng-include
<div data-ng-include=" 'views/partials/navbar.html' "></div>
But when I run the application and check the browser console its checking for myapp/edit/views/partials/navbar.html instead of myapp/views/partials/navbar.html .
The state url is getting prepended while performing ng-include and ending up in 404 only in IE. In other browsers its working fine.
Can somebody kindly help me on this.
I am really struggling with Angular since it is very fragile i think and I have a very simple case (probably the simplest case ever) which does not work yet.
Here is my module (so i do inject the library):
angular.module(
'module', ['ui.router']
My index.html:
<html data-ng-app="module">
<head>
... several libraries and my js files including ui-router library js + my app.js where the state definitions are located.
</head>
<body>
<div ui-view></div>
</body>
And why is not my template injected in ui-view?
EDIT: Sorry, i was in a hurry, forgot to add some details.. I have updated the app.js section like this:
.state('default',
{
url: '/',
template: '<h1>default</h1>'
})
.state('x',
{
url: '/x',
template: '<h1>X</h1>'
});
Now default state works as expected. But i call the url "host/x" i get a "Cannot GET /x".. when i call the url like "host/#x", it works.
But i have also this section for html5 mode in my app.js:
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
I have also this in the head section of my index.html:
<base href="/">
I thought, html5 should already handle the hash(#) part of the url? How can i get rid of that # in URL, so i can call directly "host/x"?
You need to specify the url property and go to this url to see this page. State should be something like:
.state("yourStateName", {
template: "<h1>My Contacts</h1>",
url: "/stateURL"
})
This is working example of url provider form my project:
angular.module("app")
.config(function ($urlRouterProvider, $locationProvider, $stateProvider) {
$locationProvider
.html5Mode(true);
$urlRouterProvider.when('/', '/url1');
$urlRouterProvider.when('', '/url2');
$urlRouterProvider.when('/url3', 'url4');
$urlRouterProvider.otherwise('/url5');
});
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?
Anguilar 1.5.*
I can not get angular to use my template cache. I gave it a invalid path name on purpose so I would get html file not found. But instead it is not using template cache and just requesting the html files.
templates.js
angular.module("gulpTemplates", []).run(["$templateCache", function($templateCache) { $templateCache.put("aaaa/views/examples.html"
...
app.js
var gulpNewy =
angular
.module('gulpNewy', ['ngRoute', 'gulpTemplates'])
.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
.when('/examples', {
templateUrl: 'views/examples.html'
})
.when('/screen-shots', {
templateUrl: 'views/screen-shots.html'
})
index.html
<div class="col-xs-12" ng-view></div>
What am I doing wrong?
Ok, I found the issue.
If you are using ng-view, templateCache will not work by default for you. This is because with ng-view you do not need to use ng-include. templateCache needs to be used with ng-include or $templateCache.get.
Regardless of $templateCache.get, ng-view will not look in templateCache.