<script src="assets/templates/gulp_h5bp/js/vendor/angular.js"></script> <script src="assets/templates/gulp_h5bp/js/vendor/angular-route.js"></script> <script> // create the module and name it DESIGNfromWITHIN var DESIGNfromWITHIN = angular.module('DESIGNfromWITHIN', ['ngRoute']); DESIGNfromWITHIN.config(function($sceProvider) { $sceProvider.enabled(false); }); DESIGNfromWITHIN.config(function($locationProvider) { $locationProvider.html5Mode(true); $locationProvider.hashPrefix('!'); }); // configure our routes DESIGNfromWITHIN.config(function($routeProvider) { $routeProvider // route for the home page .when('/', { templateUrl : 'assets/templates/gulp_h5bp/pages/home.html', controller : 'mainController' }) // route for the test page .when('/contact.html', { templateUrl : 'assets/templates/gulp_h5bp/pages/contact.html', controller : 'contactController' }) // route for the post page .when('/blog.html', { templateUrl : 'assets/templates/gulp_h5bp/pages/post_overview.html', controller : 'blogController' }) // route for the post page .when('/blog/:postName.html', { templateUrl : 'assets/templates/gulp_h5bp/pages/post.html', controller : 'postController' }) .otherwise({ redirectTo: '/' }); }); // create the controller and inject Angular's $scope DESIGNfromWITHIN.controller('mainController', function($scope, $http) { $http.get('[[~1]]') .then(function(res){ $scope.message = res.data; }); }); // create the controller and inject Angular's $scope DESIGNfromWITHIN.controller('blogController', function($scope, $http) { $http.get('[[~20]]') .then(function(res){ $scope.message = res.data; }); }); DESIGNfromWITHIN.controller('postController', function($scope, $http, $routeParams) { $http.get('[[~20]]' + $routeParams.postName + '.html') .then(function(res){ $scope.message = res.data; }); }); DESIGNfromWITHIN.controller('contactController', function($scope, $http) { $http.get('http://designfromwithin.com/assets/templates/gulp_h5bp/package.json') .then(function(res){ $scope.message = res.data; }); }); </script>
.factory('utils', function () { return { // Util for finding an object by its 'id' property among an array findById: function findById(a, id) { for (var i = 0; i < a.length; i++) { if (a[i].id == id) return a[i]; } return null; }, findByAlias: function findByAlias(a, id) { for (var i = 0; i < a.length; i++) { if (a[i].alias == id) return a[i]; } return null; } }; });
.state('blog.detail', { url: "/:alias", views: { 'mainBlog': { templateUrl: 'pages/blog.detail.html', controller: ['$scope', '$stateParams', 'utils', function ( $scope, $stateParams, utils) { $scope.item = utils.findByAlias($scope.blogposts, $stateParams.alias); }] }, }, })
thanks, but changing the file extension does not change the issue....
I think I need to redirect all url's to the index.html somehow....
Any chance that i see your code and how you do it?
# html5 pushstate (history) support: <ifModule mod_rewrite.c> RewriteEngine on # Rewrite "domain.com/foo/ -> domain.com/foo" RewriteRule ^(.*)/$ /$1 [R=301,L] # The Friendly URLs part RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php?q=$1 [L,QSA] </ifModule>
<span ng-bind-html="trustHTML(tool.toolDocs)"></span>
<script> 'use strict'; var toolApp = angular.module('toolApp', ['ngSanitize', 'ngDialog']); toolApp.controller('ToolController', function($scope, $sce, $window, ngDialog) { $scope.toolList = [[$toolsJSONListTpl]]; //JSON List $scope.trustHTML = function(input) { return $sce.trustAsHtml(input); }; }); </script>
{ "pageTitle":"[[+pagetitle]]", "toolId":"[[+id]]", "toolType":"[[+tv.tool-type]]", "toolImg":"[[+tv.tool-img]]", "toolMsg":"[[!jsonEncode? &jsonInput=`[[+tv.tool-msg]]`]]", "toolStages":"[[!jsonEncode? &jsonInput=`[[+tv.tool-stages]]`]]", "toolNotes":"[[!jsonEncode? &jsonInput=`[[+tv.tool-notes]]`]]", "toolInventory":"[[+tv.tool-inventory]]", "toolDocs":"[[!jsonEncode? &jsonInput=`[[!getResources? &parents=`[[+id]]` &tpl=`toolDocTpl` &limit=`4` &includeTVs=`1`]]`]]", "toolZoom":"[[+tv.tool-zoom]]" },
Usually to successfully present HTML stored inside JSON, I'd have to present it like this:
<span ng-bind-html="trustHTML(tool.toolDocs)"></span>
angular.module('myApp').directive('compileTemplate', function ($compile, $parse) { return { link: function (scope, element, attr) { var parsed = $parse(attr.ngBindHtml); function getStringValue() { return (parsed(scope) || '').toString(); } //Recompile if the template changes scope.$watch(getStringValue, function () { $compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves }); } } }); angular.module('myApp').filter('unsafe', function ($sce) { return function (val) { return $sce.trustAsHtml(val); }; });
<p ng-bind-html="items.content | unsafe" compile-template> </p>