I’m building a dashboard style application with Node.js, Express, and Angular.js. I have a simple login/registration to get to a dashboard view which is an angular single page application. OK, I’m trying to pass data from my routes.js file to my SPA. As of right now I can get this data on my dashboard.html page with no issues using ejs. However that data is not available in the partials (html files) that my angular SPA is displaying. How would I make this data available to the entire SPA and not just the dashboard.html? Is this even possible using ejs? Should I be taking another approach from getting user data from the routes.js to the SPA? any help is greatly appricaited, Thanks!
### App Structure ###
— client
index.html
— static
dashboard.html
— css
— js
— imgs
— partials
home.html
profile.html
— config
routes.js
— node_modules
package.json
server.js
/** in routes.js **/
app.get('/dashboard', function(req, res) {
res.render('./static/dashboard.html', {
user : req.user // get the user out of session and pass to template
});
}
<!—- dashboard.html -—>
<p> <%= user.username %> </p>
###result -> 'kobe#aol.com'
<-- partials/home.html -->
<p> <%= user.username %> </p>
###result -> '<%= user.username %>'
Related
I started working with React about 6 months ago and I have one website in html and one application in react. Now I want to make together and run on react default port. when react start I want to open website and then click on one link in website open the react app.
I am trying many ways but unable to figured out solutions.
Somebody could tell me any way to do this?
Try this, worked for me.
Let's consider home.html as Static HTML Page (not reactjs) and index.htmlas ReactJS APP.
On Link/Login press from home.html, I want to render reactjs app.
Link to URL /#/login (login button on home.html) as I'm using HashRouter (react-router v3).
<li>
<a class="page-scroll" href="/#/login">Login</a>
</li>
Now in index.html in public folder of Reactjs. Indicated that if URL is just / render home.html.
<script>
var url = window.location.href;
if (!url.replace(/.*#\//, '')) {
location.href = 'home.html'
}
</script>
I put both index.html and home.html inside same directory/.
In my angular js application we are using ui-router for routing. Currently we placed all controllers are placed in external js files and this js files are included in index.html file, but as per performance wise application loading very slow.
If we are declaring controllers in html files showing error like undefined controller. can any one help this issue.
here is the code
<script>
angular.module('testApp').controller('TestCtrl1', function ($scope,$http,$stateParams) {
$scope.test = "test sample";
});
<div class="container-fluid" style="min-height:595px;" ng-controller="TestCtrl1">
<h1>{{test}} page</h1>
I build a simple app with an index.jsp (as a welcome page) and after a form-login submission directly to spring controller, i return either index.jsp or homePage.jsp (when user credentials are valid). So angular (routes, components, etc) loads for the first time at homePage.jsp.
I chose this implementation due to the fact that i am allowed to use only one ng-view and i wanted to do this only at my homePage from the time that is my main content.I would like some suggestions without using a 3d party routing such as ui-router.
First submit you from from JSP page to Spring Controller
<form action = "/checkUser">
[Your input tags]
</form>
In Spring
#Controller
public class Login{
#RequestMapping("checkUser")
public String checkUser(#RequestBody Map<String,Object>){
[Check your user is Valid or not]
[If valid]
return "homePage.jsp"
[else]
return "Index.jsp"
}
}
But rather than this i personally prefer Spring Security.
Once you got on your homePage you can load all your necessary js file including the annular js files
And load your views using ng-Route
var app = angular.module('tester',
['ngRoute']).config(function($routeProvider) {
$routeProvider
.when('/tests', {
templateUrl: 'tests.html',
controller: 'TestCtrl'
});
});
app.controller('TestCtrl', ['$scope', function($scope){
$scope.title = "This is a Test Page";
}]);
When You click on Tests link
<div ng-view></div>
Test
tests.html will directly load in ng-view part
For ng-view Plunker
I am working on angularjs app. Project multiple partials that loads in ng-view. App is working correctly.
I am trying to optimize app's performance and want to keep once loaded partials in dom. So that everytime these partials are revisited it should not be reloaded.
HTML:
<div ng-view></div>
routejs:
$routeProvider.when('route1', {
template: '1.html',
controller: '1controller'
}).when('route2', {
template: '2.html',
controller: '2controller'
})
How to prohibit 1html to reload when it was once visited like user visits-
route1-> route2-> route1
So next time users visits route1, html should not reload. Reloading of simple htmls are not costly however html with some images re-loading is costly.
How to prohibit angular to reload partials everytime?
Thanks in advance!!
The ASP MVC app I am working on uses forms authentication with a timeout. This means that when the session has timed out and the user clicks refresh they get redirected to a login page, and after that they get directed back to the original page without the deep-linked client-side # part of the url.
Is there a way to get ngRoute to base its deep-linked client-side url on a querystring instead? For example
http://somesite.com/?p=/home
The first thing to do is to have the ASP MVC server side capture any URLs that should related to your client-side angular routing and return the single-page app HTML. When registering your ASP MVC routes add the following rule
routes.MapRoute(
name: "Angular",
url: "x/{*clientPath}",
Where the "x/" is the base part of your client app, of course you can do without the "x" in the URL if your entire app is a single-page angular app, in which case you will need to add a preceding rule to render your ASP MVC server side account-login page.
Then in your Angular app make sure you use Html5 mode, like so
app.config(["$locationProvider", "$routeProvider", function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
rewriteLinks: true
});
$routeProvider.when("/x/docs/upload", {
......
});
$routeProvider.when("/x/docs/view", {
......
});
$routeProvider.otherwise({
redirectTo: "/x/docs/upload"
});
}]);
When you open your browser and navigate to http://mysite/x/what/ever/you/like the server side will use XController.Index to render Views\x\Index.cshtml, which will load your single page app, and then ngRoute will take over and present the relevant view for the "x/what/ever/you/like" part.