I am new in angular jS and while.I am using node server to deploy my application locally.Bit facing this error in chrome browser.
PFB my code
Demo.html
<html ng-app="Demo">
<head>
<script type="text/javascript" src="lib/angular.1-2-13.min.js"></script>
<script type="text/javascript" src="lib/angular-route.1-2-13.min.js"> </script>
</head>
<body ng-controller="DemoController">
USA<input type='radio' name='txt1' ng-model="value" ng- change="changeValue(value)" value="USA"> Non-USA<input type='radio' name='txt1' ng-model="value" ng-change="changeValue(value)" value="NUSA">
<select ng-model="selectedItem" ng-options='option.name for option in optionValues'>
</select>
<input type='text' name='txt1' ng-model='txtValue'/>
<input type='button' name='b1' ng-click='takeValue(txtValue)'/>
routing
<div ng-view></div>
<script type="text/javascript">
var demo = angular.module( "Demo", ['ngRoute'] );
demo.config(['$routeProvider','$locationProvider', function ($routeProvider,$locationProvider) {
$routeProvider
// Pages
.when("/about", {templateUrl: "/Users/smundhe/Desktop/NewProject/Demo2.html",controller: "Demo2Controller"})
// else 404
.otherwise("/404", {templateUrl: "partials/404.html",controller: "PageCtrl"});
//$locationProvider.html5Mode(true);
}]);
demo.controller(
"DemoController",
function( $scope ) {
$scope.optionValues=[{name:'1'},{name:'2'},{name:'3'}, {name:'4'}];
$scope.takeValue = function(txtValue){
alert(txtValue);
}
$scope.changeValue=function(value){
alert(value);
if(value=="USA"){
$scope.optionValues=[{name:'1'},{name:'2'}, {name:'3'},{name:'4'}];
}
else if(value=="NUSA"){
$scope.optionValues=[{name:'A'},{name:'B'}, {name:'C'},{name:'D'}];
}
}
});
demo.controller(
"Demo2Controller",
function( $scope ) {
$scope.optionValues=[{name:'1'},{name:'2'},{name:'3'},{name:'4'}];
alert('hiii');
});
</script>
server.js
// set our port
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var port = 3000;
app.use(bodyParser.json());
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(methodOverride('X-HTTP-Method-Override'));
app.get('/*', function(req,res)
{
console.log('sending file: ' + req.url);
res.sendfile(__dirname + '/Demo.html');
});
app.listen(port);
Can some one help me on this?
Thanks in advance..
Your problem is in this line:
app.get('/*', function(req,res)
{
console.log('sending file: ' + req.url);
res.sendfile(__dirname + '/Demo.html');
});
This is basically saying that for any incoming GET request, always send back Demo.html. As a result, when your page's <script> tag requests the angular.min.js, it is given Demo.html, which the browser then tries to run as a javascript file, throwing the "unexpected <" error.
Instead, what you should do is something like the following:
var serveStatic = require('serve-static');
app.use(serveStatic(__dirname, {'index': ['Demo.html']}))
This will essentially serve whatever file is requested, and if no file is requested (i.e. /, then will return Demo.html).
Note you will need to npm install --save serve-static.
See the serve-static docs for more info.
Related
When I run this server, “/“ will run index.html, but index.html cannot reach controller.js in order to populate the 'item' variables using data.json.
However, when I copy controller.js as a script inside index.html, the item variables are populated with the data.json contents.
In both cases, index.html cannot access the css and image files, even though the right path is supplied.
How can index.html access a seperate controller.js as well as the other files without error? Why is this happening? I’m trying to do this without express first, if it's possible. Any ideas would be appreciated.
JS/CONTROLLER.JS
var myApp = angular.module("myApp", []);
myApp.controller("MyController", function MyController($scope, $http) {
$http.get('/api').success(function(data) {
$scope.artists = data;
})
})
INDEX.HTML
<!doctype html>
<html leng="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="js/controller.js"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h2> Welcome {{name}} </h2>
<div ng-controller = "MyController">
<ul class="artistlist">
<li class="artist cf" ng-repeat="item in artists">
<img ng-src="public/images/{{item.shortname}}_tn.jpg" alt="photo of {{item.name}}">
<div class = "info">
<h2> {{item.name}} </h2>
<h2> {{item.reknown}}</h2>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
DATA.JSON
[
{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham",
"reknown":"Royal Academy of Painting and Sculpture"
},
{
"name":"Jonathan G. Ferrar II",
"shortname":"Jonathan_Ferrar",
"reknown":"Artist to Watch in 2012"
} … ]
SERVER.JS
var http = require('http');
var url = require("url");
var fs = require("fs");
var path = require('path');
var server = http.createServer(handleRequest);
var PORT = 3000;
server.listen (PORT, function() {
console.log("listening on ", PORT)
})
function handleRequest(req, res) {
var urlParts = url.parse(req.url);
switch (urlParts.pathname) {
case "/":
index(urlParts.pathname, req, res);
break;
case "/api":
api(urlParts.pathname, req, res);
break;
default:
display404(urlParts.pathname, req, res);
}
}
function index(url, req, res){
fs.readFile("./index.html", "UTF-8", function(err, html) {
res.writeHead(200, {"Content-Type": "text/html"});
res.end(html);
});
}
function api(url, req, res) {
fs.readFile("./data.json", "utf8", function(err, data) {
res.writeHead(200, {"Content-Type": "text/json"});
res.end(data)
});
}
function display404(url, req, res) {
res.writeHead(404, {
"Content-Type": "text/html"
});
res.write("<h1>404 Not Found </h1>");
res.end("The page you were looking for: " + url + " can not be found ");
}
One way of loading two files; however, how would this flow if each file were of a different content-type (one html, and the other js)? from: LINK
function css(response) {
response.writeHead(200, {"Content-Type": "text/css"});
var count = 0;
var handler = function(error, content){
count++;
if (error){
console.log(error);
}
else{
response.write(content);
}
if (count == 2) {
response.end();
}
}
fs.readFile('css/bootstrap.css', handler);
fs.readFile('css/bootstrap-responsive.css', handler);
}
I am Getting an HTML ERROR, Trying to render a sql db to the index page with setting up a connection. The table name is employee and no error while running the app on the terminal but an error page on the html link.
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
GetData(function (recordSet) {
res.render('index', {product: recordSet})
console.log(recordSet);
});
});
function GetData(callBack){
var sql = require('mssql');
var Config = {
user: 'Gurpanth\\Gurpanth',
password: '',
database:'NodeJSDb',
server:'GURPANTH'
};
var conn = new sql.ConnectionPool(Config,function (err) {
//If any error
var request = new sql.Request(conn);
request.query('Select * from products', function(err, recordSet){
callBack(recordSet);
});
});
}
module.exports = router;
INDEX.EJS
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<table>
<tbody>
<td><%=productName%></td>
</tbody>
</table>
</body>
</html>
You are passing the variable product: res.render('index', {product: recordSet})
but in the ejs file you are using productName <td><%=productName%></td>
Change both to the same
I'm simply fetching data from a database and displaying it in an html file with ngRepeat. Connection to database is successful and I'm able to add data to it. Also everything on the client side works as I'm able to display data in the ngRepeat div with a defined array. So the problem must be somewhere in the .get() method but I can't figure out what it is. Any suggestions?
server.js
var express = require('express');
var mongojs = require('mongojs');
var MongoClient = require("mongodb").MongoClient;
var app = express();
var port = process.env.PORT || 3000;
var db = mongojs('heroku_1x6kasdf');
var plantList = db.collection("plantList");
app.use(express.static(__dirname + "/"));
MongoClient.connect(process.env.MONGOLAB_URI, function(err, db) {
if (err) throw err;
console.log('SUCCESS! Connected to heroku_1x6kasdf database');
app.get("/", function(req, res) {
plantList
.find({})
.toArray(function(err, docs) {
if (err) throw err;
res.json(docs);
});
});
});
app.listen(port, function() {
console.log('SUCCESS! Connected to ' + port);
});
controller.js
var myApp= angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
var refresh = function() {
$http.get("/").success(function (response) {
$scope.plantList = response;
});
};
refresh();
}]);
index.html
<html ng-app="myApp">
...
<div ng-controller="AppCtrl">
<div ng-repeat="plant in plantList">
<p>{{plant.name}}</p>
<p>{{plant.variety}}</p>
<p>{{plant.quantity}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
track by the plant id. I would not recommend track by $index as it tracks by position rather than item, which will cause problems down the line.
<div ng-controller="AppCtrl">
<div ng-repeat="plant in plantList track by plant.id">
<p>{{plant.name}}</p>
<p>{{plant.variety}}</p>
<p>{{plant.quantity}}</p>
</div>
</div>
This error occur when an object is found twice in an array. when you don't specify "Track by" in a repeater, angular track it by the special property "$$hashKey" which usually is something like: "object:76", "object:77" etc.
You can console.log your array and then check if one of the object has the same $$hashKey
I am using Restangular to create a simple API using MEAN stack.
Here is my code:
index.html
<!DOCTYPE html>
<html data-ng-app="scotchTodo">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Node/Angular Todo App</title>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
<style>
html{
overflow-y:scroll;
}
body{
padding-top:50px;
}
</style>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.4.0/restangular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div data-ng-view>
</div>
</body>
</html>
app.js
var scotchTodo = angular.module('scotchTodo', ['restangular','ngRoute']);
//config
scotchTodo.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/',{
templateUrl: 'list.html',
controller: 'ListController'
})
.when('api/todos/:todo_id',{
templateUrl: 'edit.html',
controller: 'EditController'
});
$locationProvider.html5Mode(true);
}]);
//controllers
scotchTodo.controller('ListController', ['$scope', 'Restangular',
function($scope, Restangular) {
//GET ALL
var baseTodo = Restangular.all('api/todos');
baseTodo.getList().then(function(todos) {
$scope.todos = todos;
});
//POST -> Save new
$scope.save = function() {
var baseTodo = Restangular.all('api/todos');
var newTodo = {'text': $scope.text};
baseTodo.post(newTodo).then(function(todos) {
$scope.todos = todos;
$scope.text = '';
});
};
//DELETE
$scope.delete = function(id) {
var baseTodo = Restangular.one('api/todos', id);
baseTodo.remove().then(function(todos) {
$scope.todos = todos;
});
};
}]);
scotchTodo.controller('EditController', ['$scope', 'Restangular','$routeParams',
function($scope, Restangular, $routeParams) {
var baseTodo = Restangular.one('api/todos', id);
baseTodo.getList().then(function(todo) {
$scope.todo = todo[0];
window.test = "dev";
});
//PUT -> Edit
$scope.update = function(id){
var baseTodo = Restangular.one('api/todos', id);
baseTodo.text = "Edited";
baseTodo.put().then(function(todos) {
$scope.todos = todos;
});
};
}]);
list.html
<div>
<div data-ng-repeat="todo in todos">
{{todo.text}}Edit<button data-ng-click="delete(todo._id)">X</button>
</div>
<input type="text" data-ng-model="text"/>
<button data-ng-click="save()">Add</button>
</div>
edit.html
<div>
<input type="text" data-ng-model="text" value="{{todo.text}}" />
<button data-ng-click="update(todo._id)">Save</button>
</div>
server.js
// setup ========================
var express = require('express');
var app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
//configuration =================
mongoose.connect('mongodb://127.0.0.1:27017/sl', function(err, db) {
if (!err) {
console.log("We are connected to " + db);
}
});
app.use(express.static(__dirname + '/public'));
app.use(bodyParser());
// application -------------------------------------------------------------
app.get('/', function(req, res) {
res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});
//listen ========================
app.listen(8080);
console.log('App started on the port 8080');
//define model ==================
var Todo = mongoose.model('Todo', {
text: String
});
// routes ======================================================================
// api ---------------------------------------------------------------------
//get one todo
app.get('/api/todos/:todo_id', function(req, res) {
// use mongoose to get all todos in the database
Todo.find({
_id: req.params.todo_id
},function(err, todos) {
// if there is an error retrieving, send the error. nothing after res.send(err) will execute
if (err){
res.send(err);
}
res.json(todos); // return all todos in JSON format
});
});
// get all todos
app.get('/api/todos', function(req, res) {
// use mongoose to get all todos in the database
Todo.find(function(err, todos) {
// if there is an error retrieving, send the error. nothing after res.send(err) will execute
if (err){
res.send(err);
}
res.json(todos); // return all todos in JSON format
});
});
// create todo and send back all todos after creation
app.post('/api/todos', function(req, res) {
// create a todo, information comes from AJAX request from Angular
Todo.create({
text: req.body.text,
done: false
}, function(err, todo) {
if (err){
res.send(err);
}
// get and return all the todos after you create another
Todo.find(function(err, todos) {
if (err)
res.send(err);
res.json(todos);
});
});
});
// update todo and send back all todos after creation
app.put('/api/todos/:todo_id', function(req, res) {
// create a todo, information comes from AJAX request from Angular
Todo.update({
_id: req.params.todo_id
}, {
text:req.body.text
}, function(err, todo) {
if (err){
res.send(err);
}
// get and return all the todos after you create another
Todo.find(function(err, todos) {
if (err)
res.send(err);
res.json(todos);
});
});
});
// delete a todo
app.delete('/api/todos/:todo_id', function(req, res) {
Todo.remove({
_id: req.params.todo_id
}, function(err, todo) {
if (err){
res.send(err);
}
// get and return all the todos after you create another
Todo.find(function(err, todos) {
if (err){
res.send(err);
}
res.json(todos);
});
});
});
The first page of my app loads perfectly fine. Here is the screenshot.
But when I click on either of the edit link it is supposed to load edit.html template. But it shows a blank page with no errors in console. Here is the screenshot.
I am unable to figure out what's wrong. Please help. Please ask if any other piece of code is needed. I added almost everything that I did. I know it is annoying and not recommended but I am not sure what part of my code is causing this issue.
EDIT 1:
My farthest guess is that the url for edit.html might not be getting resolved correctly. But I am not sure how to test that! Any help will be appriciated.
EDIT 2: Directory structure
SOLUTION : Courtesy #ashu
The issue was this line in index.html
<script src="app.js"></script>
It should be:
<script src="/app.js"></script>
However, I am not clear why! Page was including app.js either way. It is weird.
You have same routes for angular and express.
.when('api/todos/:todo_id',{
templateUrl: 'edit.html',
controller: 'EditController'
});
and in express
app.get('/api/todos/:todo_id', function(req, res) {
Hence, there is ambiguity. You can remove the 'api' part from angular urls.
.when('/todos/:todo_id', {
templateUrl: 'edit.html',
controller: 'EditController'
})
And in server, you can add a catchall route which will handle all the non-api urls. For doing that you can move your app.get('/', function(req,res) {..}) call at the bottom after defining your api routes.
// < Define APi Routes here >
//catch all route for serving the html template
app.get('/*', function(req, res ) {
res.sendfile('./public/index.html')
});
Also, in your app.js EditController, you forgot to initialise value of id.
var id = $routeParams.todo_id;
I have a single page web app written using AngularJS. It uses PouchDB to replicate to a CouchDB server and works fine.
The problem comes when I try to convert the webpage to be available offline by adding cache.manifest. Suddenly ALL the replication tasks throw errors and stop working, whether working offline or online.
In Chrome it just says "GET ...myCouchIP/myDB/?_nonce=CxVFIwnEJeGFcyoJ net::ERR_FAILED"
In Firefox it also throws an error but mentions that the request is blocked - try enabling CORS.
CORS is enabled on the remote CouchDB as per the instructions from PouchDB setup page. Plus it works fine while not using the cache.manifest (i.e. it is quite happy with all the different ip addresses between my desk, the server and a VM - it is a prototype so there are no domain names at this time).
Incidentally, at this time I am not using any kind of authentication. Admin party is in effect.
So what changes when adding the cache.manifest? Clues gratefully welcomed.
Thanks in advance.
app.js
var app = angular.module('Assets', ['assets.controllers', 'ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
controller: 'OverviewCtrl',
templateUrl: 'views/overview.html'
}).
when('/new', {
controller: 'NewMachineCtrl',
templateUrl: 'views/machineForm.html'
}).
otherwise({redirectTo: '/'});
}]);
controller.js
var _control = angular.module('assets.controllers', ['assets.services']);
_control.controller('OverviewCtrl', ['$scope', 'Machine', function($scope, Machine) {
var promise = Machine.getAll();
promise.then(function(machineList) {
$scope.machines = machineList;
}, function(reason) {
alert('Machine list is empty: ' + reason);
});
}]);
_control.controller('UpdateMachineCtrl', ['$scope', '$routeParams', 'Machine',
function($scope, $routeParams, Machine) {
$scope.title = "Update Installation Details";
var promise = Machine.getSingle($routeParams.docId);
promise.then(function(machine) {
$scope.machine = machine;
}, function(reason) {
alert('Record could not be retrieved');
});
$scope.save = function() {
Machine.update($scope.machine);
};
}]);
_control.controller('SyncCtrl', ['$scope', 'Machine', function($scope, Machine) {
$scope.syncDb = function() {
Machine.sync();
Machine.checkConflicts();
};
$scope.checkCors = function() {
// Check CORS is supported
var corsCheck = function(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
console.log('CORS not supported by browser');
}
xhr.onload = function() {
console.log('Response from CORS ' + method + ' request to ' + url + ': ' + xhr.responseText);
};
xhr.onerror = function() {
console.log('Error response from CORS ' + method + ' request to ' + url + ': ' + xhr.responseText);
};
xhr.send();
};
var server = 'http://10.100.3.21:5984/ass_support';
corsCheck('GET', server);
corsCheck('PUT', server);
corsCheck('POST', server);
corsCheck('HEAD', server);
// corsCheck('DELETE', server);
};
}]);
service.js
var _service = angular.module('assets.services', []);
_service.constant('dbConfig',{
dbName: 'assets',
dbServer: 'http://myCouchServerIp:5984/'
});
/**
* Make PouchDB available in AngularJS.
*/
_service.factory('$db', ['dbConfig', function(dbConfig) {
PouchDB.enableAllDbs = true;
var localDb = new PouchDB(dbConfig.dbName);
var remoteDb = dbConfig.dbServer + dbConfig.dbName;
var options = {live: true};
var syncError = function() {
console.log('Problem encountered during database synchronisation');
};
console.log('Replicating from local to server');
localDb.replicate.to(remoteDb, options, syncError);
console.log('Replicating from server back to local');
localDb.replicate.from(remoteDb, options, syncError);
return localDb;
}]);
_service.factory('Machine', ['$q', '$db', '$rootScope', 'dbConfig',
function($q, $db, $rootScope, dbConfig) {
return {
update: function(machine) {
var delay = $q.defer();
var doc = {
_id: machine._id,
_rev: machine._rev,
type: machine.type,
customer: machine.customer,
factory: machine.factory,
lineId: machine.lineId,
plcVersion: machine.plcVersion,
dateCreated: machine.dateCreated,
lastUpdated: new Date().toUTCString()
};
$db.put(doc, function(error, response) {
$rootScope.$apply(function() {
if (error) {
console.log('Update failed: ');
console.log(error);
delay.reject(error);
} else {
console.log('Update succeeded: ');
console.log(response);
delay.resolve(response);
}
});
});
return delay.promise;
},
getAll: function() {
var delay = $q.defer();
var map = function(doc) {
if (doc.type === 'machine') {
emit([doc.customer, doc.factory],
{
_id: doc._id,
customer: doc.customer,
factory: doc.factory,
lineId: doc.lineId,
plcVersion: doc.plcVersion,
}
);
}
};
$db.query({map: map}, function(error, response) {
$rootScope.$apply(function() {
if (error) {
delay.reject(error);
} else {
console.log('Query retrieved ' + response.rows.length + ' rows');
var queryResults = [];
// Create an array from the response
response.rows.forEach(function(row) {
queryResults.push(row.value);
});
delay.resolve(queryResults);
}
});
});
return delay.promise;
},
sync: function() {
var remoteDb = dbConfig.dbServer + dbConfig.dbName;
var options = {live: true};
var syncError = function(error, changes) {
console.log('Problem encountered during database synchronisation');
console.log(error);
console.log(changes);
};
var syncSuccess = function(error, changes) {
console.log('Sync success');
console.log(error);
console.log(changes);
};
console.log('Replicating from local to server');
$db.replicate.to(remoteDb, options, syncError).
on('error', syncError).
on('complete', syncSuccess);
console.log('Replicating from server back to local');
$db.replicate.from(remoteDb, options, syncError);
}
};
}]);
_service.factory('dbListener', ['$rootScope', '$db', function($rootScope, $db) {
console.log('Registering a onChange listener');
$db.info(function(error, response) {
$db.changes({
since: response.update_seq,
live: true,
}).on('change', function() {
console.log('Change detected by the dbListener');
// TODO work out why this never happens
});
});
}]);
cache.manifest
CACHE MANIFEST
# views
views/machineForm.html
views/overview.html
# scripts
scripts/vendor/pouchdb-2.2.0.min.js
scripts/vendor/angular-1.2.16.min.js
scripts/vendor/angular-route-1.2.16.min.js
scripts/app.js
scripts/controllers/controller.js
scripts/services/service.js
index.html
<!DOCTYPE html>
<html lang="en" manifest="cache.manifest" data-ng-app="Assets">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Asset Management</title>
<script src="scripts/vendor/angular-1.2.16.min.js" type="text/javascript"></script>
<script src="scripts/vendor/angular-route-1.2.16.min.js" type="text/javascript></script>
<script src="scripts/vendor/pouchdb-2.2.0.min.js" type="text/javascript"></script>
<script src="scripts/app.js" type="text/javascript"></script>
<script src="scripts/services/service.js" type="text/javascript"></script>
<script src="scripts/controllers/controller.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
<nav class="sidebar">
<h3>Options</h3>
<div>
<a class="active" data-ng-href="#/">Overview</a>
<a data-ng-href="#" data-ng-controller="SyncCtrl" data-ng-click="syncDb()">Synchronise</a>
<a data-ng-href="" data-ng-controller="SyncCtrl" data-ng-click="checkCors()">Check CORS</a>
</div>
</nav>
<section class="main">
<div data-ng-view></div>
</section>
</div>
</body>
</html>
overview.html
<h3>Installation Overview</h3>
<table>
<tr>
<th>Customer</th>
<th>Factory</th>
<th>Line Id</th>
<th>PLC Version</th>
</tr>
<tr data-ng-repeat="machine in machines">
<td>{{machine.customer}}</td>
<td>{{machine.factory}}</td>
<td><a data-ng-href="#/view/{{machine._id}}">{{machine.lineId}}</a></td>
<td>{{machine.plcVersion}}</td>
</tr>
</table>
machineForm.html
<h3>{{title}}</h3>
<form name="machineForm" data-ng-submit="save()">
<div>
<label for="customer">Customer:</label>
<div><input data-ng-model="machine.customer" id="customer" required></div>
</div>
<div>
<label for="factory">Factory:</label>
<div><input data-ng-model="machine.factory" id="factory" required></div>
</div>
<div>
<label for="lineId">Line ID:</label>
<div><input data-ng-model="machine.lineId" id="lineId" required></div>
</div>
<div>
<label for="plcVersion">PLC Version:</label>
<div><input data-ng-model="machine.plcVersion" id="plcVersion"></div>
</div>
<div><button data-ng-disabled="machineForm.$invalid">Save</button></div>
</form>
Try changing your cache.manifest file to this:
CACHE MANIFEST
CACHE:
# views
views/machineForm.html
views/overview.html
# scripts
scripts/vendor/pouchdb-2.2.0.min.js
scripts/vendor/angular-1.2.16.min.js
scripts/vendor/angular-route-1.2.16.min.js
scripts/app.js
scripts/controllers/controller.js
scripts/services/service.js
NETWORK:
*
When using a manifest file, all non-cached resources will fail on a cached page, even when you're online. The NETWORK section tells the browser to allow requests to non-cached resources (they'll still fail while offline, of course).