I have no idea why but my express/angular app is causing an infinite loop when loading the index page... I have my app setup:
app.configure(function() {
// set up our express application
app.use(express.logger('dev')); // log every request to the console
app.use(express.cookieParser()); // read cookies (needed for auth)
app.use(express.bodyParser()); // get information from html forms
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.methodOverride());
});
And my Angular app route provider:
var app = angular.module('myApp', ['ngRoute', 'angularFileUpload', 'rcWizard', 'rcForm', 'rcDisabledBootstrap', 'ui.bootstrap']).
config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/login", { templateUrl: "/partials/login.ejs", controller: "LoginCtrl" })
.otherwise({ redirectTo: "/login" });
}
]);
My index.ejs file holding all the includes:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/form-styles/rcWizard.css"/>
<link rel="stylesheet" href="css/bootstrap-formhelpers.min.css"/>
</head>
<body>
<div ng-view></div>
<script src="bower_components/ng-file-upload/angular-file-upload-shim.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/ng-file-upload/angular-file-upload.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="javascripts/lib/helpers/sel_options.js"></script>
<script src="javascripts/lib/helpers/xml2json.js"></script>
<script src="javascripts/lib/helpers/form-lib/jquery.bootstrap.wizard.js"></script>
<script src="javascripts/lib/helpers/bootstrap-formhelpers.min.js"></script>
<script src="javascripts/lib/helpers/form-src/directives/rcSubmit.js"></script>
<script src="javascripts/lib/helpers/form-src/modules/rcForm.js"></script>
<script src="javascripts/lib/helpers/form-src/modules/rcDisabled.js"></script>
<script src="javascripts/lib/helpers/form-src/modules/rcWizard.js"></script>
<script src="javascripts/app.js"></script>
<script src="javascripts/services.js"></script>
<script src="javascripts/filters.js"></script>
<script src="javascripts/directives.js"></script>
<script src="javascripts/controllers/LoginCtrl.js"></script>
</body>
</html>
And finally express:
app.get('/', function(req, res){
res.render('index');
});
app.get('/partials/login.ejs', function (req, res) {
res.render('/partials/login.ejs', { 'message': 'test 111' });
});
app.get('*', function(req, res){
res.render('index');
});
This seems really straightforward, but for some reason the server just continuously loads all the script files over and over again that are defined in my index.ejs file. All the examples I've seen set it up exactly this way... and I have tried multiple variations of paths, settings, etc. Does anything standout?
EDIT
here is my login.ejs partial:
<% include navbar_public.ejs %>
<div class="container" ng-controller="LoginCtrl">
<script>var message="<%-message%>";</script>
<div class="col-sm-6 col-sm-offset-3">
<h1 class="form-fonts"><span class="fa fa-sign-in"></span> Login</h1>
<!-- show any messages that come back with authentication -->
<div ng-if="message.length > 0" class="alert alert-danger">{{message}}</div>
<!-- LOGIN FORM -->
<form action="/login" method="post">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password">
</div>
<button type="submit" class="shimmy-button btn btn-success btn-lg">Login</button>
</form>
<hr>
<p>Need an account? Signup</p>
<p>Or go home.</p>
</div>
</div>
Four things to explore:
You didn't include a copy of /partials/login.ejs so it's possible there's something in there that's causing the problem.
You are asking Angular's router to load /login when anything but /login is requested. This type of route setup can sometimes create infinite loops - try a different 'otherwise' as a test to help narrow down the issue.
For any request except these two URLs, you are rendering your index page. That means if the request comes in even slightly odd, it's going to dump out index all over again. Now, your index page has all those script and JS tags... Which leads me to:
You're using relative paths on many/most of your CSS/JS resources. You do not have a BASE HREF meta tag... That means when your browser is on /login, it's going to try to request these things as /login/css/style.css and so on. That shouldn't happen because this is only meant to be a partial at this point, but if any of the above items (or anything else) is going wrong, this is going to snowball.
I strongly recommend using your browser's Network panel and/or a debugging tool like Charles Proxy to review the exact sequence of requests your browser is issuing. That will almost certainly clue you in to the final issue.
If you're still having trouble and plan to reply back, please include the template for the login.ejs partial, and comments about unusual network requests. Please also talk more about how you know / why you say your app is infinite-looping and exactly where you suspect this is happening (server, client, both, etc.)
Related
I was wondering what the best way to structure templates in an AngularJS SPA. So far I have kind of a rails approach, but I'm not sure if this is a good idea.
What I mean is that I for example have a /js/app/views/partials folder where I have snippets of html that are used in different places. This could be a form or a preview of content, basically everything that is used all over the app. I like this structure because let's say you have a comment form that appears in 5 different places and you want to add a field: Changing one file rather than 5 is much better.
I then for example have a /js/app/views/home.html template, that is referenced by my ui-router and loaded in ui-view in /index.html which only serves as layout.
/js/app/routes.js
myModule.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/js/app/views/home.html',
controller: 'MainCtrl',
resolve: {
// resolve code
}
});
}
]);
/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
<title><%= title %></title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='/css/style.css' />
<script src="/js/angularjs-1.3.16.min.js"></script>
<script src="/js/angular-ui-router-0.2.15.js"></script>
<script src="/js/app/app.js"></script>
<script src="/js/app/routes/routes.js"></script>
<script src="/js/app/services/services.js"></script>
<script src="/js/app/controllers/controllers.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
/js/app/views/home.html
<div class="page-header">
<h1>v2</h1>
</div>
<div ng-include src="'/js/app/views/partials/post-form.html'"></div>
<div ng-repeat="post in posts">
<div ng-include src="'/js/app/views/partials/post-preview.html'"></div>
</div>
So the ui-router is called with the home state and injects the /js/app/views/home.html in /index.html (at ui-view). home.html itself includes two partials /js/app/views/partials/post-form.html and /js/app/views/partials/post-preview.html.
The result are a lot of XHR requests for a single page load. That cannot be good for performance.
Is there a better way to do that? Or can I just not structure my views with so many partials and have to use fewer files and repetitive code?
My backend / server is NodeJS with Express. So maybe it would also be an option to do that server-side, using express partials.
am new to angularJS routing. am folowing a simple tutorial on routing but no +ve results
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>angularJS routing</title>
<link type="text/css" rel="stylesheet" href="js/foundation.min.css">
</head>
<body>
<div ng-app="viewApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ng-view.js"></script>
</body>
</html>
ng-view.js
var app = angular.module('viewApp', []);
app.config(function($routeProvider) {
$routeProvider.when('http://localhost/eclipse_PHP_Workspace/AngularJS/', {
templateUrl : "ng-view-template.html",
controller : "viewCtrl"
});
});
app.controller('viewCtrl', function($scope) {
$scope.model = {
message : "Helo ng-view !"
}
})
in the ng-view file above($routeProvider.when('http://localhost/eclipse_PHP_Workspace/AngularJS/',), what does the path here realy mean .is it the application root folder or the server route folder coz all the tutorials am seeing even for john linquist he is using the server root folder.and is my path correct coz my angularJS app is in http://localhost/eclipse_PHP_Workspace/AngularJS/
$routeProvider.when paths refer to the client-side route only. So this:
$routeProvider.when('/', ...
would be equal to:
http://localhost/eclipse_PHP_Workspace/AngularJS/#/
Anything after the # will be the angular app's "route". Anything before the # is where the app lives on the server, which should never change in a single-page app.
This gets trickier if using html5mode, but this is the basic idea.
I'm newer to angular so I'm sorry if this is really obvious! I'm making a super basic app and right now all I want is when a user directly goes to a page it should always display the layout and the content. I am using angular's ng-route.
As of right now, if I go to localhost:8080/ it displays the layout(index.html) and content(view/home.html). If I click on the 'About' link, it goes to localhost:8080/about and displays the layout(index.html) and the correct content(view/about.html). Now if I type localhost:8080/about in my address bar, hit enter, I get a 404 error from my server's log. I'm not sure what I'm missing. Any input appreciated!
app.js
angular
.module('TestProject', ['ngRoute']);
routes.js
angular.module('TestProject')
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'views/home.html'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.when('/contact', {
templateUrl: 'views/contact.html'
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
index.html
<!DOCTYPE html>
<html lang="en" ng-app="TestProject">
<head>
<meta charset="utf-8">
<title>Test!</title>
<base href="/">
<link rel="stylesheet" href="assets/styles/app.css">
</head>
<body>
<header><h1>Logo</h1></header>
<nav>
<ul class="main">
<li>
<div class="navBorder">
About
</div>
</li>
<li>
<div class="navBorder">
Contact
</div>
</li>
</ul>
</nav>
<div ng-view></div>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="routes.js"></script>
</body>
</html>
I know I don't have any controllers yet, I just started this project and there's nothing there yet.
Here are how my files are organized:
My file structure is below:
/index.html
/app.js
/routes.js
/views/home.html
/views/about.html
/views/contact.html
If using AngularJS 1.3+, you need to include a notion of a <base href="" />. You can do this in your <head> tag as such
<head>
<base href="/">
...
From the docs
Before Angular 1.3 we didn't have this hard requirement and it was
easy to write apps that worked when deployed in the root context but
were broken when moved to a sub-context because in the sub-context all
absolute urls would resolve to the root context of the app. To prevent
this, use relative URLs throughout your app:
Additionally, without this <base /> tag, you can declare .html5Mode() as such... You'll need to take one of these two approaches.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Ahhh I figured it out, it was a problem with my server. I had not set up mod_rewrite for it to work properly. For the time being I turned off html5Mode() and everything works fine.
I am trying to learn angular.js and incorporate some routes within my app. The problem that i am running into is that i have hit a snag with creating routes. I have two similar pages, and keep hitting 404's when i fire up the app in my local host. I feel like i am close because everything is being read, and i have no errors within the console, but i still have yet to get the entire routes to properly operate. I would be very grateful if anybody could take a quick look at my code below and see if there is anything that i need to alter to fix.
I believe that because of my circumstances i have one of two situations. I either have an issue with my code, or I have an issue with my server side routing. If it is my code, i was hoping someone could see if there is any issues with it and help me out with it. If it is a problem with my server side routing, them I honestly have no idea what to do.
Below is my app.js file. I feel like if there is anything that I have made a mistake with, it would be this one, but i'm not entirely sure.
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/index/', {
controller: 'MainController',
templateUrl: 'views/home.html'
})
.when('/test/', {
controller: 'testController',
templateUrl: 'views/home.html'
})
.otherwise({
redirectTo: '/'
});
});
These are the two html pages that i have within my views. They very similar i just have different controllers associated with them. The first one is called test, and the second one is called index
<div class="main" ng-controller="testController">
<div class="container">
<h1>{{ title }}</h1>
<div ng-repeat="product in products" class="col-md-6">
<product-info product="product"></product-info>
</div>
</div>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<div ng-repeat="product in products" class="col-md-6">
<product-info product="product"></product-info>
</div>
</div>
</div>
</div>
Finally, here is my general views index page:
<!doctype html>
<html>
<head>
<link href="css/main.css" rel="stylesheet" />
<script src="js/shared/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>"
</head>
<body ng-app="myApp">
<div class="header">
<div class="container">
<h1>Stadiums in various leagues</h1>
</div>
</div>
<div ng-view></div>
<div class="footer">
<div class="container">
</div>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/directives/productInfo.js"></script>
</body>
</html>
I think I have a gross misunderstanding as to how routing in AngularJS works, and SPA's altogether.
I had thought with my simple routing :
$routeProvider
.when('/home', {
templateUrl: 'app/views/home.html',
controller: 'homeController'
})
.when('/login', {
templateUrl: 'app/views/login.html',
controller: 'loginController',
})
I had thought that when I went to /login, angular made an ajax call to grab the html page it needed. However, I don't see any calls going through fiddler, and that doesn't really make sense.
But I can't seem to locate where the pages are in my Chrome Developer Tools, nor find the correct word combination to get a suitable answer through google. Can someone clear this up for me?
if it helps, here's the body of my layout page:
<body ng-cloak>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
...nav stuff
</nav>
<br/><br/>
<div class="container body-content" ng-view></div>
<!-- 3rd party scripts -->
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-local-storage.min.js"></script>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<!-- app main -->
<script src="app/app.js"></script>
<!-- controllers -->
<script src="app/controllers/homeControllers.js"></script>
<script src="app/controllers/loginController.js"></script>
<!-- services -->
<script src="app/services/modelErrorService.js"></script>
<script src="app/services/authInterceptorService.js"></script>
<script src="app/services/authService.js"></script>
</body>
EDIT
Sorry I may have been unclear. The code works fine. My question is, when angular routes you to a new page, where is it loading that html template from? Is it all delivered to the client at the get-go, or is it calling back to the server? If it is on the client, where is it stored?
If templateUrl is specified, Angular will look into the $templateCache for the template and load it from there if found. If not found, it will try to fetch it from the server, store it in $templateCache for future access and load it into view.
Templates can be put into Angular's $templateCache
when fetched from the server for the first time
by placing them in the HTML, in a <script type="text/ng-template"></script> element
by programmatically putting them into the $templateCahce (for whatever reason: performance, offline access etc)
Your code looks just fine.
Have you injected the ngRoute module into your application like so:
angular.module('your-app-name', ['ngRoute']);