Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I need to make an AngularJS app that must have all of it's html in a single page (I'll explain why). I'd like to use ng-route to move through multiple "screens", but all of the html must come from the original page (cannot load anything in the background). One way I could solve this is to swap out everything inside the body tag (with content loaded in script tags as ng-template blocks). Is there another way to do this?
I know that the "static page" requirement is odd, but imagine if I wanted to have an html page that runs offline on multiple platforms. In the offline mode it cannot originate from a server or get additional templates.
EDIT
Ok, it looks like I had a bad closure that made the code not work in the single page mode. Anyway, here is the working code.
<!DOCTYPE html>
<html ng-app="startApp">
<head>
<title>Hello World, AngularJS</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="startapp.js"></script>
</head>
<body>
<!-- Inline partials -->
<!-- Page 1 -->
<script type="text/ng-template" id="/page1.html">
<div>
<h3>Welcome to STAR Marketing</h3>
<div>
<a ng-href="#/page2" >Next Page</a>
</div>
</div>
</script>
<!-- Page 2 -->
<script type="text/ng-template" id="/page2.html">
<div>
<h3>Welcome to the second page</h3>
<div>
<a ng-href="#/page1" >Back</a>
</div>
</div>
</script>
<!-- end of partials -->
<div id="page-div" ng-view>
</div>
</body>
</html>
startapp.js
var startApp=angular.module('startApp',['ngRoute']);
startApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: '/page1.html',
controller: 'Page1Controller'
}).
when('/page2', {
templateUrl: '/page2.html',
controller: 'Page2Controller'
}).
otherwise({
redirectTo: '/page1'
});
}]);
startApp.controller('Page1Controller', ['$scope', function($scope) {
}]);
startApp.controller('Page2Controller', ['$scope', function($scope) {
}]);
I'm not sure if I understood well what you want, but I think that what you are looking for is $templateCache.
Like this:
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
In this way you can define all the templates that you want in the same page.
Related
i'm using Angularjs and I have a ng-view with some parts. The partial views have some scripts in the head.
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
...
</head>
<body>
<div class="section">
... some content
</div>
</body>
</html>
If i load a view those scripts are loaded too.
<div style="" class="ng-scope" ng-view="">
<meta class="ng-scope" charset="utf-8">
<script class="ng-scope" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="section ng-scope">
.. some view content.
</div>
</div>
I'm using an HTML Editor for Twitter Bootstrap to edit views quickly and this tool needs the html, head and body tags. And I don't want to remove them from templates. Is it posible to ignore the head tag of partial view when it's loaded?
Instead of using a ng-view, isn't better to create a directive with your template in, and use the compile() or in the link() phase to remove the bad tags ?
Afaik directives are the good way to alter the DOM.
I'm not really familiar with the compile() but I let you read this post if you are interested in : http://www.bennadel.com/blog/2794-when-do-you-need-to-compile-a-directive-in-angularjs.htm
I got it. I took a look into templateRequestProvider and httpProvider. And Here is my solution.
app.config(function($routeProvider, $httpProvider) {
....
function appendTransform(defaults, transform) {
// We can't guarantee that the default transformation is an array
defaults = angular.isArray(defaults) ? defaults : [defaults];
// Append the new transformation to the defaults
return defaults.concat(transform);
}
/**
* My HTML Template transformation
*/
function doTransform(value){
if(angular.isString(value)){
return value.replace(/<head>(.|\n)*<\/head>/mg,"");
}
return value;
}
$httpProvider.defaults.transformResponse = appendTransform($httpProvider.defaults.transformResponse,
function(value) {
return doTransform(value);
});
})
It's not a best solution because it would filter each http request. Better to apply it only for ng-view. It should work with templateRequestProvider.httpOptions but only with angular 1.5+.
I want to manage my controller specific to an ng-view page, therefore I put the controller in ng-view page and used that controller specific to that page only. However, the code does not show what it should show from that controller.
Here is my case.
I split my code into 3 files, which are "mainfile.php", "page1file.php", and "page2file.php". "mainfile.php" contains main page which routes to page 1 and page 2. To compare the results, I created different conditions for those 2 pages. "page1file.php" uses controller which has been defined in "mainfile.php", while "page2file.php" uses controller which is defined in the page itself.
In this circumtances, "page1file.php" successfully shows what I want, but "page2file.php" does not show what it should show. Please help me and give a very simple explanation and a simple solution since I'm very new to angularjs.
Here is my code. You can just copy them and run it on your php server.
mainfile.php :
<!DOCTYPE html>
<html>
<head>
<title>learn angular routing</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script type="text/javascript">
function routeReload($scope) {
$scope.routeReloading = function(){
window.location.reload();
};
}
routeReload.$inject = ['$scope'];
function routeConfig($routeProvider) {
$routeProvider
.when('/one',{
templateUrl:'page1file.php'
})
.when('/two',{
templateUrl:'page2file.php'
})
;
}
routeConfig.$inject=['$routeProvider'];
function testOne($scope) {
$scope.name = "page one";
}
testOne.$inject = ['$scope'];
var testNgView = angular.module('testNgView',['ngRoute']);
testNgView.config(routeConfig);
testNgView.controller('routeReload',routeReload);
testNgView.controller('testOne',testOne);
</script>
</head>
<body>
<div ng-app="testNgView">
<div ng-controller="routeReload">
View page <a ng-click="routeReloading();" href="#one">one</a> or
<a ng-click="routeReloading();" href="#two">two</a>
<div ng-view></div>
</div>
</div>
</body>
</html>
page1file.php :
<div ng-controller="testOne">
This is {{name}}
</div>
page2file.php :
<script type="text/javascript">
function testTwo($scope) {
$scope.name = "page two";
}
testTwo.$inject = ['$scope'];
testNgView.controller('testTwo',testTwo);
</script>
<div ng-controller="testTwo">
This is {{name}}
</div>
I don't think you can inline script modules in your view templates. Have a look at this working version of your app, the way I would organize it:
http://plnkr.co/edit/nSsagK1Y04akNJyMToah?p=preview
You can use .php files in place of the .html files, that shouldn't make a difference.
So your main file should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>learn angular routing</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
</head>
<body>
<div ng-app="testNgView">
View page one
or two
<ng-view></ng-view>
</div>
<script src="app.module.js"></script>
<script src="app.routes.js"></script>
<script src="views/page1/controller.js"></script>
<script src="views/page2/controller.js"></script>
</body>
</html>
If your goal is to use PHP to dynamically render your controllers, see the answer to this SO question: Angularjs: server side (php) rendering and data binding client side after an event
You may also be interested in this article, about loading Angular components after the application has been bootstrapped: http://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm
TL;DR: You would need to store a reference to $controllerProvider in the config phase, and then call $controllerProvider.register('MyController', MyController) in your inline script. I'm not sure how I feel about that though...
I have a directive that I want to clear the content of a DIV and replace it with a template either in my current view or somewhere else in my app.
So say I have my template like so...
<!-- This is an experiment -->
<script type="text/ng-template" id="1.html">
<div data-ng-repeat="beatle in beatles track by $index">
Name: {{beatle.name}}, Instrument: {{ beatle.inst}}, Alive: {{ beatle.alive }}
</div>
</script>
and in my directive I have the following:
link: function (scope, element) {
element.bind('click', function () {
// clear out old template
angular.element(element).empty();
angular.element(element).html(document.getElementById('1.html'));
});
}
I seem to be able to load the template but I see the following instead of my content
[object HTMLScriptElement]
I wondering if I need to compile again or run a digest or if I am just going about this totally wrong. I also don't like using document.getElementById in my directive code, for some reason it feels wrong. Can anyone provide me with an answer to why I only see [object HTMLScriptElement] after clicking my directive and wether using document.getElementById in my directive is acceptable or if there is a better command to load the content...
Here is a fiddle of the whole app... or a bin! https://jsbin.com/yizupa/edit?html,output
In the meantime I have just came to the conclusion that my setup / implementation is wrong and that I should consider another way to implement such a feature.
here, i have create one running demo.. for route using **text/ng-template**..
index.html
-------------
<!DOCTYPE html>
<html lang="en" ng-app="singlePageApp">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<head>
<meta charset="UTF-8">
<title>AngularJS Routing Template..</title>
</head>
<body>
<div ng-controller="singlePageAppController">
{{message}}
</div>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div ng-view="showOutput"></div>
</body>
<script type="text/ng-template" id="home.html">
This is HOME Page..
</script>
<script type="text/ng-template" id="about.html">
This is ABOUT Page..
</script>
</html>
--------
app.js
--------
var app=angular.module('singlePageApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/home',{
controller:'singlePageAppController',
templateUrl: 'home.html'
})
.when('/about',{
templateUrl: 'about.html'
});
});
app.controller('singlePageAppController',function($scope){
$scope.message="Hello Single Page Application..";
});
I've been trying to link up components of a simple Angular app but cannot seem to get my initial view state to load. One main issue seems to be that I can't even log inside of my .config setup (despite making sure that everything is syntactically correct). As far as I can tell (after some testing) all of my files are in the right locations).
Anybody see any glaring mistakes?
index.html:
<!DOCTYPE html>
<html>
<head></head>
<title>Thing</title>
<body class="container">
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<!-- dependencies -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- css files -->
<!-- application files -->
<script src="js/app.js"></script>
<script src="js/payments.js"></script>
<!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
</body>
</html>
app.js:
var paymentApp = angular.module('paymentApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/payments')
// Now set up the states
console.log("in config")
$stateProvider
.state('payments', {
url: "/payments",
templateUrl: "view/payments.html"
})
});
payments.html:
<h1>Payments Page</h1>
<div class="buttons">
<button>Click Me!</button>
</div>
<div class="search"></div>
<div class="payments"></div>
Quite a simple mistake to make - you have forgotten to bootstrap your angular app.
You need to add the ng-app directive somewhere and point it to your module.
E.g.
<html ng-app="paymentApp">
https://docs.angularjs.org/api/ng/directive/ngApp
This question already has an answer here:
angular js ng-view returns blanc partials -- Express/ Jade
(1 answer)
Closed 7 years ago.
I am building an angular app following a tut. However, my angular ng-view is not rendering. I have seen a similar question here yet it has not been answered. Below is my dir structure
app.js
var app = angular.module('app', ['ngResource', 'ngRoute']);
angular.module('app').config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/', { templateUrl: 'partials/main', controller: 'mainCtrl'});
});
angular.module('app').controller('mainCtrl', function($scope){
$scope.myVar = "Hello Angular";
});
My layout.jade
doctype html
head
link(rel="styleSheet",href="css/bootstrap.css")
link(rel="styleSheet",href="vendor/toastr/toastr.css")
link(rel="styleSheet",href="css/site.css")
body(ng-app='app')
block main-content
include scripts
My main.jade
h1 This is a partial
h2 {{ myVar }}
The route in my server.js are set as
app.get('partials/:partialPath',function(req,res){
res.render('partials/' + req.params.partialPath);
});
app.get('*', function(req,res){
res.render('index');
});
my index.jade
extends ../includes/layout
block main-content
section.content
div(ng-view)
Although I am thinking that shouldn't be an issue because I am starting with a partial view which is part of a page. When I run my page it returns black. I inspected the elements and ensured that all the js and css where loaded. The html source below was generated on my page:
<!DOCTYPE html>
<head><link rel="styleSheet" href="css/bootstrap.css">
<link rel="styleSheet" href="vendor/toastr/toastr.css">
<link rel="styleSheet" href="css/site.css">
</head>
<body ng-app="app">
<section class="content">
<div ng-view></div></section>
<script type="text/javascript" src="vendor/jquery/dist/jquery.js"></script><script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="vendor/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="vendor/angular-route/angular-route.js"></script><script type="text/javascript" src="app/app.js"></script>
</body>
I was suspecting routeProvider from my app.js here
.when('/', { templateUrl: 'partials/main', controller: 'mainCtrl'});
tried
.when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'});
All to no avail. Please where do I go wrong ? I have tried everything possible. I even restarted the tut yet still blank. Any help would be appreciated.
Thank you for your time. It turns out the issue is in my layout
doctype html
head
link(rel="styleSheet",href="css/bootstrap.css")
link(rel="styleSheet",href="vendor/toastr/toastr.css")
link(rel="styleSheet",href="css/site.css")
body(ng-app='app')
block main-content
include scripts
Changed to
doctype html
head
base(href='/')
link(rel="styleSheet",href="css/bootstrap.css")
link(rel="styleSheet",href="vendor/toastr/toastr.css")
link(rel="styleSheet",href="css/site.css")
body(ng-app='app')
block main-content
include scripts
What was missing is
base(href='/')
It does not load the templates if you remove that base. I learnt that from another tut video by tut plus "[Tuts Plus] Building a Web App From Scratch With AngularJS Video Tutorial" . The presenter specifically mentioned the important of the base(href='/') and warned never to forget . Alternatively , there is another good example from #Alex Choroshin answer here . you should download the doc he suggested . Its a perfect example. Thanks