I am learning to set up an application in node js using express framework.
I am having problem on how to deliver a html page in the ng-view. I would
like to know if I am missing any link or any configuration on how to make
that html to be delivered into ng-view.
Here is the code
app/routes/routes.js
'use strict';
var clientDir = path.join(__dirname, '../../public')
module.exports = function(app){
app.get('/', function (req, res) {
res.send('Hello World!')
})
app.get('/login', function(req, res){
res.sendFile(path.join(clientDir, 'index.html'))
})
}
public/index.html
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Test</title>
<script
src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-resource.js"></script>
<script src="/routes/routes.js"></script> <!--Problem loading this-->
<div ng-app="MyApp">
<div ng-view>
</div>
</div>
public/routes/routes.js
var MyApp = angular.module('MyApp', ['ngResource', 'ngRoute'])
MyApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {controller: LoginCtrl, templateUrl:
'../templates/login.html'})
.otherwise({redirectTo: '/'})
$locationProvider.html5Mode(true)
})
public/controllers/LoginCtrl.js
'use strict'
function LoginCtrl ($scope) {
}
public/templates/login.html
<div class="login-panel panel panel-default" style="margin-top: 40%;">
<div class="panel-heading">
<h3 class="panel-title" style="color: #666;">Please Sign In</h3>
</div>
<div class="panel-body">
<br/>
For admins only, <br/><br/>
<div class="login-btn">
<i class="fa fa-google-plus"></i> Login with Google
</div>
</div>
</div>
MyApp/app.js
if (!process.env.NODE_ENV) process.env.NODE_ENV='development'
var express = require('express')
var app = express()
path = require('path')
colors = require('colors')
require("./app/routes/routes")(app)
app.set('port', process.env.PORT || 3000)
var server = app.listen(app.get('port'), function () {
var host = server.address().address
var port = server.address().port
console.log('Example app listening in %s on port %s',
colors.red(process.env.NODE_ENV), app.get('port'))
})
Folder structure:
MyApp
app
routes
routes.js
bower_components
node_modules
public
index.html
routes
routes.js
controllers
templates
app.js
package.json
I am able to deliver an index.html which has an ng-view but I am not able
to place login.html page in that view and that is what I am trying for.
Please let me know what am i missing here in order to deliver login.html.
Thanks
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
