angular ui-router can't find script template in head
Question
I'm trying to inject a inline template into my body but I'm getting a
GET http://localhost:3000/home.html 404 (Not Found) error in the console.
I've included the script in the head.
!!!
%html
%head
%title Movieseat
%script{:id => "/home.html", :type => "text/ng-template"}
.page-header
%h1 Flapper News
%body{"ng-app" => "movieseat"}
%div{"ui-view" => ""}
%a{"ui-sref" => "state1"} State 1
%a{"ui-sref" => "state2"} State 2
%a{"ui-sref" => "home"} home
And this is the route module,
angular.module('movieseat').config([
'$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'searchCtrl'
})
.state('state1', {
url: '/state1',
templateUrl: 'assets/angular-app/templates/state1.html'
})
.state('state2', {
url: "/state2",
templateUrl: "assets/angular-app/templates/state2.html"
})
}
]);
Is there something wrong with the html > erb conversion on the script tag?
2 answers
solution1
2 2015-08-11 14:09:09
The issue is that your ng-app is on body so the script tag in head is outside of the scope of your main angular module.
If templateUrl doesn't exist in $templateCache or in script tag ( also ends up in $templateCache), a request is made to server to retrieve it.
Since your tag is outside scope of the app it is not found and therefore generates the server request.
Possible solutions:
Move script tag inside body or move ng-app attribute to <html> tag
solution2
0 ACCPTED 2015-08-11 13:54:34
After very carefully reading I saw I needed to put the script inside the body, and not in the head. After putting it in the footer, with the rest of the scripts it works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.