ng view - AngularJS templateUrl not working -
hello , in advance. working on getting views show on index.html page. can see in http requests when clicking on links appropriate template being retrieved not being displayed. it's it's having trouble associating template html ng-view tag. templates have 1 root element , else seems working should. appreciated. if use template instead of templateurl , add html way works well.
var app = angular.module('fireground', [ 'ngroute', 'ngsanitize' ]) .config(['$routeprovider', function ($routeprovider) { $routeprovider .when('/', { templateurl : 'pages/test.html', controller : 'rootctrl' }) .when('/one', { templateurl : 'pages/test2.html', controller : 'rootctrl' }) .when('/newsletter', { controller : 'rootctrl', templateurl : 'pages/test3.html' }); //.otherwise({ // redirectto: '/one' //}); }]) .controller('rootctrl', function($scope){ $scope.messages = "test test test test test test"; }) and index.html(slimmed down)
<!doctype html> <head> <title>thefirestore app</title> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi" /> <link rel="stylesheet" href="./css/jquery.mobile-1.4.2.min.css" /> <link rel="stylesheet" href="./css/style.css" /> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-sanitize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"> </script> <script type="text/javascript" src="./js/angular/app.js"></script> <script type="text/javascript" src="./js/angular/factories.js"></script> <script type="text/javascript" src="./js/angular/directives.js"></script> <script type="text/javascript" src="./js/angular/services.js"></script> </head> <body data-ng-app="fireground"> <div id="slidemenu"> <ul id="slideul"> <li><img class="doubleline" src="./images/doublelines.jpg" /></li> <li><a onclick="$(document).unbind('touchmove');" class="navlnk left" href="#one" data-transition="slide">fireground live <span class="floatr">»</span></a></li> <li><img class="doubleline" src="./images/doublelines.jpg" /></li> <li><a href="">deals</a> <ul style="margin:-15px 0 0 40px;"> <li><a onclick="$(document).unbind('touchmove');" class="navlnk center" href="#products" data-transition="slide">apparel</a></li> <li><a onclick="$(document).unbind('touchmove');" class="navlnk center" href="#products" data-transition="slide">ppe</a></li> <li><a onclick="$(document).unbind('touchmove');" class="navlnk center" href="#products" data-transition="slide">helmets</a></li> <li><a onclick="$(document).unbind('touchmove');" class="navlnk center" href="#products" data-transition="slide">boots</a></li> <li><a onclick="$(document).unbind('touchmove');" class="navlnk center" href="#products" data-transition="slide">flashlights</a></li> <li><a onclick="$(document).unbind('touchmove');" class="navlnk center" href="#products" data-transition="slide">tools</a></li> <li><a onclick="$(document).unbind('touchmove');" class="navlnk center" href="#products" data-transition="slide">bags & packs</a></li> </ul> </li> </ul> <ul> <li><img class="doubleline" src="./images/doublelines.jpg" /></li> <li><a onclick="$(document).unbind('touchmove');" class="navlnk right" href="#newsletter" data-transition="slide">newsletter<span class="floatr">»</span></a></li> <li><img class="doubleline" src="./images/doublelines.jpg" /></li> <li><a href="http://www.thefirestore.com/mobile" rel="external">shop thefirestore.com <span class="floatr">»</span></a></li> </ul> </div> <div id="master"> <div class="header" data-role="header" data-position="fixed"> <a href="#" class="navlinkstyle" data-slidemenu="#slidemenu" data-slideopen="true" data-corners="false" data-iconpos="notext"><img border="0" src="./images/imagemenu.jpg" /></a> <img height="62" style="width:100%" class="imgcenter" src="./images/firegroundlogo.jpg" /> </div> </div> <div ng-view></div> </body> </html> and simple html template is:
<h1 style="color:black">the message is: {{messages}}</h1>
Comments
Post a Comment