angularjs - Which routing file does my express/angular app use? Which takes precedence? -
i built simple single page express app angular , i'm wondering routes file application use , why?
my repo here
in repo, have node routes.js file in app/routes.js.
inside file, have line of code:
app.get('*', function(req, res) { res.sendfile('./public/index.html'); // load our public/index.html file }); so assume above line of code takes route , response sends public/index.html file html file loads bunch of angular scripts:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <base href="/"> <title>starter node , angular</title> <!-- css --> <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <!-- custom styles --> <!-- js --> <script src="libs/angular/angular.min.js"></script> <script src="libs/angular-route/angular-route.min.js"></script> <!-- angular custom --> <script src="js/controllers/mainctrl.js"></script> <script src="js/controllers/nerdctrl.js"></script> <script src="js/services/nerdservice.js"></script> <script src="js/approutes.js"></script> <script src="js/app.js"></script> </head> <body ng-app="sampleapp" ng-controller="nerdcontroller"> <div class="container"> <!-- header --> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <a class="navbar-brand" href="/">stencil: node , angular</a> </div> <!-- link our pages. angular handles routing here --> <ul class="nav navbar-nav"> <li><a href="/nerds">nerds</a></li> </ul> </nav> <!-- angular dynamic content --> <div ng-view></div> </div> </body> </html> one of scripts approutes.js file:
angular.module('approutes', []).config(['$routeprovider', '$locationprovider', function($routeprovider, $locationprovider) { $routeprovider // home page .when('/', { templateurl: 'views/home.html', controller: 'maincontroller' }) // nerds page use nerdcontroller .when('/nerds', { templateurl: 'views/nerd.html', controller: 'nerdcontroller' }); $locationprovider.html5mode(true); }]); my question:
- on first load of app, , visit localhost:8080, hitting express's route.js file , * route? or hitting angular's approutes.js file , / route? 1 takes precedence?
- when visit /nerds route, why don't hit express' * route in route.js file? why default use route defined inside approutes.js file?
remember routing rules specified $routeprovider (inside approutes.js file) different rules write http requests in routes.js configuration file. long have set in server, should able access static files in public folder, see have in server.js:
var express = require('express'); var app = express(); var path = require('path'); //the line below specifies using public folder static files app.use(express.static(path.join(__dirname, "./public"))); //the line below specifies views folder app.set('views', path.join(__dirname, './public/views')); require('./server/config/routes.js')(app); app.listen(8080); if this, don't need specify '*' in app/routes.js, because code know pick index.html file within public folder 'main' folder static files, , localhost:8080 automatically use index.html it's 'base'. can remove '*' app.get route in routes.js. if want send requests , routes.js file, have through factory using $http.get or $http.post.
then, in index.js file, should have:
<div ng-view=""></div> which allows access of routes within $routeprovider. way, localhost8080/ should pick .when '\' route in approutes.js. may or may not need app.set('views', path.join... etc. line in code above allow access views/home.html , views/nerd.html files in views folder, wouldn't hurt if don't have already. make sure requiring of express , path come before rest of code in server file (which see have done 'express') if want use 'path'. requiring 'path' allows more fluidity when other people different operating systems trying use code.
let me know if helps.
Comments
Post a Comment