I have just attempted to make a SPA but i am not able to resolve index.html dependencies (like including associated css, js files). All the js and css file are not able to load into browser and show 404 error in dev console.
/root
|
|__public
| └── spa
| ├── controllers
| ├── css
| ├── html
| ├── js-self
| ├── js-vendor
| └── services
|_____________ index.html
Route declaration
var assets = function(){
return {
method: 'GET',
path: '/{param*}',
handler: {
directory :{
path : 'public',
index: false
}
}
}
}
Order of all routes
info: ================Registered routes=============
info: Route: GET /employee
info: Route: POST /employee
info: Route: PUT /employee
info: Route: DELETE /employee
info: Route: POST /signin
info: Route: POST /signup
info: Route: POST /signout
info: Route: GET /{param*}
info: Route: GET /
info: =============================================
Html file
<!DOCTYPE html>
<!-- saved from url=(0058)http://getbootstrap.com/examples/starter-template/#contact -->
<html lang="en" ng-app="ibs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<script src="./public/spa/js-vendor/jquery-2.1.3.min.js"></script>
<script src="./public/spa/js-vendor/angular-1.3.14.js"></script>
<script src="./public/spa/js-vendor/angular-route.js"></script>
<script src="./public/spa/app.js"></script>
<link href="./public/spa/css/signin.css" rel="stylesheet">
<link href="./public/spa/css/bootstrap.min.css" rel="stylesheet">
<link href="./public/spa/css/starter-template.css" rel="stylesheet">
<style type="text/css" media="screen">
.appbkg {
background: #303F9F
}
</style>
</head>
<body class="appbkg">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://getbootstrap.com/examples/starter-template/#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container" ng-view>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./public/spa/js-vendor/bootstrap.js"></script>
</body></html>
I made it work with this little edit:
var assets = function(){
return {
method: 'GET',
path: '/{param*}',
handler: {
directory :{
path : './',
index: false
}
}
}
}
the ./ path is actually relative to where you are when you run node app.js.
So make sure you are in the root folder when you run it. As node ../app.js doesn't work !!
Since that's not very clean, avoid using paths that way and stick to using path.join(__dirname, 'path/to/folder') with __dirname as a reference.
Here is a cleaner solution for you
var assets = function(){
return {
method: 'GET',
path: '/{param*}',
handler: {
directory :{
path : path.join(__dirname, '../..'),
index: false
}
}
}
}
Note from node's docs
__dirname is :
The name of the directory that the currently executing script resides in.
Related
I'm trying to serve bootstrap locally via npm-installed package.
However, Node is serving my html file in place of my bootstrap CSS and JS files. This is perplexing to me.
I'm specifying both folders to express.static to ensure they are accessible publicly:
app.use(express.static(path.join(__dirname,"public")));
app.use(express.static(path.join(__dirname, "node_modules")));
Here is my directory tree structure:
.
├── Assets
│ ├── 11-express-homework-demo-01.png
│ └── 11-express-homework-demo-02.png
├── Develop
│ ├── db
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── notes.ejs
│ ├── index.html
│ ├── server.js
│ └── views
├── README.md
└── result.txt
wherein
server.js is where I'm running express from,
node_modules is where bootstrap lives (default npm installation can be assumed)
and in both notes.ejs and index.html, I have the following resources included:
<link type="text/css" rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" >
<script type="script" src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
index.html is simply a static landing page and notes.ejs is the app's main user-interactive screen.
index.html is as follows:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Note Taker</title>
<link type="text/css" rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" >
</head>
<body>
<nav class="navbar bg-info">
<a class="navbar-brand text-light p-3" href="/">Note Taker
</a>
</nav>
<div class="container">
<div style="margin-top: 80px;" class="text-center p-5 mb-4 bg-light">
<h1 class="display-4">Note Taker <span role="img" aria-label="Memo">📝</span></h1>
<h4 class="mt-4">Take notes with Express</h4>
<a class="btn btn-primary btn-lg mt-4" href="/notes" role="button">Get Started</a>
</div>
</div>
<script type="script" src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
notes.ejs is as follows:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta http-equiv="X-UA-Compatible" content="ie=edge" >
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Note Taker</title>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous"
>
<link type="text/css" rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" >
</head>
<body>
<nav class="navbar bg-info">
<a class="navbar-brand text-light p-3" href="/">Note Taker </a>
<div class="icons">
<i class="fas fa-save text-light save-note"></i>
<i class="fas fa-plus text-light new-note"></i>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-4 list-container">
<div class="card">
<ul class="list-group list-group-flush">
<%- titles %>
<!-- https://stackoverflow.com/a/33701518/9095603 -->
</ul>
</div>
</div>
<div class="col-8">
<input
class="note-title form-control form-control-lg"
placeholder="Note Title"
maxlength="28"
type="text"
>
<textarea class="note-textarea" class="form-control" placeholder="Note Text" style="min-width: 100%"></textarea>
</div>
</div>
</div>
<script type="script" src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Addendum - also in case you needed to see my server.js:
// This application uses the Express.js framework to create a REST API that allows clients to perform CRUD (create, read, update, delete) operations on notes stored in a JSON file. The API has three endpoints:
// - `GET /notes` retrieves a list of all notes stored in the `notes.json` file.
// - `POST /notes` adds a new note to the list of notes stored in the `notes.json` file. The new note data is passed in the request body as JSON.
// - `DELETE /notes/:id` deletes a note from the list of notes stored in the `notes.json` file. The ID of the note to delete is passed in the URL as a path parameter.
const express = require("express");
const path = require("path");
const fs = require("fs");
// const bootstrap = require('bootstrap')
// import 'bootstrap/dist/css/bootstrap.css';
const app = express();
const PORT = 3001;
// EJS (alternatively use Pug for dynamic HTML)
// https://www.youtube.com/watch?v=yXEesONd_54
// register view engine
app.set("view engine", "ejs");
// inform ejs which is your views folder because you don't use the default folder name views, but rather 'public'
app.set("views", path.join(__dirname,"public"));
app.use(express.static(path.join(__dirname,"public")));
app.use(express.static(path.join(__dirname, "node_modules")));
var titles = "";
app.get("/notes", (req, res) => {
fs.readFile("db/db.json", "utf-8", (err, data) => {
if (err) {
res.status(500).send({ error: "Could not read file" });
} else {
data = JSON.parse(data);
// res.send(JSON.parse(data));
if (data) {
console.log(typeof data);
console.log(data);
for (let i = 0; i < data.length; i++) {
titles += `<li class="list-group-item">${data[i].title}</li>`;
}
console.log(titles);
}
}
});
// res.sendFile(path.join(__dirname,'public/notes.html'))
res.render("notes", { titles });
// render: https://youtu.be/yXEesONd_54?t=597
});
app.use((req, res) => {
res.sendFile(path.join(__dirname, "public/index.html"));
});
// app.get('/', (req, res) => {
// res.render('index', { title: 'some title'})
// })
app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));
I have tried the above to no avail. In place of the linked bootstrap CSS file and the bootstrap JS file, it's serving my html file. I don't understand what is happening.
Precisely because you have specified
app.use(express.static(path.join(__dirname, "node_modules")));
Then your link and script tags should not include /node_modules/ at the front of your resource paths.
That is, currently you have:
<link type="text/css" rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" >
<script type="script" src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
Instead try:
<link type="text/css" rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css" >
<script type="script" src="bootstrap/dist/js/bootstrap.bundle.min.js"></script>
That should solve your problem. As for the logic of why the html file is loaded instead of the css and js files when you do it your original way, someone else can comment on that, because I'm not sure.
Hello I use nodeJS and I want to create an application in which I want to make a post request with a Json object from Postman or curl, my app will fetch Json Object and it will appear the object in broswer.
So, I tried to do that , but I have the problem that the json Object don't appear on broswer
(I use npm hbs, but also I tried it without that).
my nodeJS code is:
app.use(express.json())
app.use(express.urlencoded({extended:true}))
app.use('/notify',(req,res)=>{
const json = req.body
console.log(json)
res.render('index' , {
title: 'Weather App',
name:'ApLaz',
expect: JSON.stringify(json) // I tried and without JSON.stringify
})
})
With Postman request I send for example that
{
"test": "ok",
"var": 12
}
The result from console.log is :
{ ok: 'ok', var: 12 }
But on the broswer I just take this:
{}
This is my website
Why I can't appear my Json Object on broswer?
This is my index file
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{{title}}</title>
</head>
<body>
<!-- Header -->
{{>header}}
<!-- End Header -->
<div>
<p>Use this site for the Weather</p>
<form id="formSearch">
<input placeholder='Location' id="inputSearchValue">
<button>Search</button>
</form>
</div>
<br>
<p id="location">{{expect}}</p>
<p id="forecast"></p>
<!-- Footer -->
{{>footer}}
<!-- End Footer -->
<script src="js/app.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I don't have the info I need to exactly match your setup but here is a close approach. Keep in mind this is not how you would do it in a actually site but will work for learning.
You can think of dataStore as a temporary database that only exist while the app is running. In the index.html I commented out/disabled the following: header, footer, and as you didn't provided and I don't want to create them :D
I suggest you continue along the FreeCodeCamp path as it will cover data storage down the road.
package.json
{
"scripts": {
"start": "node src"
},
"dependencies": {
"express": "^4.17.1",
"mustache": "^4.1.0",
"mustache-express": "^1.3.0"
}
}
src/index.js
const mustacheExpress = require('mustache-express')
const express = require('express')
const app = express()
app.use(express.json())
app.use(express.urlencoded({extended:true}))
app.engine('html', mustacheExpress());
app.set('view engine', 'html');
app.set('views', __dirname + '/views')
let dataStore = {
expect: {user: 'jdoe', age: 30},
}
app.use('/',(req,res)=>{
res.render('index' , {
title: 'Weather App',
name:'ApLaz',
expect: JSON.stringify(dataStore.expect) // I tried and without JSON.stringify
})
})
app.use('/notify',(req,res)=>{
const json = req.body
console.log(json)
dataStore.expect = json
res.render('index' , {
title: 'Weather App',
name:'ApLaz',
expect: JSON.stringify(dataStore.expect)
})
})
app.listen(3000, (err) => {
if (err) return console.log(err)
console.log('server listening on port: %s', 3000);
})
src/view/index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{{title}}</title>
</head>
<body>
<!-- Header -->
<!-- >header}}-->
<!-- End Header -->
<div>
<p>Use this site for the Weather</p>
<form id="formSearch">
<input placeholder='Location' id="inputSearchValue">
<button>Search</button>
</form>
</div>
<br>
<p id="location">{{expect}}</p>
<p id="forecast"></p>
<!-- Footer -->
<!-- >footer}}-->
<!-- End Footer -->
<!--<script src="js/app.js"></script>-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
To start the app open a terminal and run yarn start or npm start
I am using express with hoganjs templating instead of jade.
When I try to access one of my routes, it wont work though...
In app.js, I have the following (relevant to the route):
var awesome = require('./routes/awesome.js');
app.use('/awesome', awesome);
In the routes/awesome.js file, I have the following:
var express = require('express');
var router = express.Router();
/* GET awesome page. */
router.get('/awesome', function(req, res, next) {
res.render('awesome', { title: "awesome", message: "awesome"});
});
module.exports = router;
And lastly, here is my awesome template (located in ./views/awesome.hjs).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<meta name="Author" content="{{author}}"/>
<link rel="shortcut icon" href="" />
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron">
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}, here is your message: {{message}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
I have basically the same code for the index route so why wont this one work too?
In awesome.js change the router path location to /
router.get('/', function(req, res, next) {
res.render('awesome', { title: "awesome", message: "awesome"});
});
Now localhost:3000/awesome should be available.
app.use('/awesome', ...) matches all the routes starting with awesome. Paths specified in router.get('/awesome', ...) acts as sub-paths. The path URL will be localhost:3000/awesome/awesome.
I've been trying to create a build system using gulp in a Laravel project and the only problem left right now is renaming the right file names inside my master.blade.php file. As it is now, it's only following the filenames provided in the gulp-useref parameters, but the files revisioned by gulp-rev are not replaced by gulp-rev-replace.
Here is my gulp task:
gulp.task('build', ['clean', 'scss', 'js', 'master'], function() {
var assets,
jsFilter = $.filter('**/*.js'),
cssFilter = $.filter('**/*.css');
return gulp.src('app/views/layouts/master.blade.php')
.pipe(assets = $.useref.assets({searchPath: '/'}))
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe($.rev())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe($.rename(function(path) {
if(path.extname === '.php') {
path.dirname = 'app/views/layouts';
} else {
path.dirname = 'public/assets';
}
}))
.pipe(gulp.dest('./'))
.pipe($.size({title: 'build files', showFiles: true}))
.on('end', function() {
setTimeout(function() {
// force watchify to close all watchers
process.exit();
});
});
});
The default master.blade.php would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{$title}}</title>
<!-- build:css assets/index.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<link rel="stylesheet" href="/.tmp/index.css">
<!-- endbuild -->
</head>
<body>
<section id="container">
<header>
#include('layouts.navbar')
</header>
<aside>
#include('layouts.sidebar')
</aside>
<section>
#yield('content')
</section>
<footer>
#include('layouts.footer')
</footer>
</section>
<!-- build:js assets/index.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/lodash/dist/lodash.compat.js"></script>
<!-- endbower -->
<script src="/.tmp/index.js"></script>
<!-- endbuild -->
</body>
</html>
and the result will always look like this despite the gulp-rev-replace pipe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{$title}}</title>
<link rel="stylesheet" href="assets/index.css">
</head>
<body>
<section id="container">
<header>
#include('layouts.navbar')
</header>
<aside>
#include('layouts.sidebar')
</aside>
<section>
#yield('content')
</section>
<footer>
#include('layouts.footer')
</footer>
</section>
<script src="assets/index.js"></script>
</body>
</html>
I figured out the problem, The gulp-rev-replace documentation mentions that they only replace files with extensions ['.js', '.css', '.html', '.hbs'] by default. By passing ['.php'] in the replaceInExtensions option.
I'm trying to implement a basic node-express angular app which includes an ng-include directive.
This is the structure of my app:
App:
server.js
package.json
public:
js
css
index.html
partials:
header.html
partial-about.html
partial-homt.html
The content of my server.js is the following:
var express = require("express");
var app = express();
var port = process.env.PORT || 8080;
app.configure(function () {
app.use(express.static(__dirname + "/public"));
app.use(express.logger("dev"));
});
app.listen(port);
console.log("App listening on port: " + port);
This is the content of my index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS UIRouter demo</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
</head>
<body ng-app="MyApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
DD test Angular-UI Router
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div ui-view></div>
</body>
</html>
However when I try to simplify index.html to this:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS UIRouter demo</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
</head>
<body ng-app="MyApp">
<div ng-include="'./partials/header.html'" ></div>
<div ui-view></div>
</body>
</html>
With header.html obviously including:
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
DD test Angular-UI Router
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</nav>
It doesn't work, any ideas?
In order for Angular to take over (and on order for the directives to become effective), you need to initialize the module:
<head>
...
<script type="text/javascript">
angular.module('MyApp', ['ui.router']);
</script>
</head>