0

I want to be able to quickly build an AngularJS application using ui-router without having to set up a server. So that I can send this folder to anyone and the application will still work.

I have tried putting a # infront of the route as adviced here. I have also tried to follow other advice related to the ngroute, but nothing seems to work and since I want to use ui-router rather than ng-route I'm not sure whether the advice is even applicable to my situation.

I have also tried to create a manifest file to store the files offline according to this page.

In firefox it kind of works but for some reason it double up what is on the index.html page. But in chrome which is my preferred browser it doesn't work at all. I get an error about a failed ajax call; why don't the manifest file download all pages straight away?

How should I accomplish building an AngularJS app with ui-router without needing a server?

Here is simple snippet of my code:

index.html

<!DOCTYPE html>
<html lang="en" ng-app="app" manifest="mycache.manifest">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
  <a ui-sref="home.messages">Messages</a>
  <div ui-view></div>

  <script type="text/javascript" src="bower_components/angular/angular.js"></script>
  <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

  <script src="js/routes.js"></script>
  <script src="js/main.js"></script>

</body>
</html>

messages.html

<button ng-click="contextCtrl.getAllMessages()">Get Messages</button>

<div ng-repeat="message in contextCtrl.messages">
  {{message}}
</div>

routes.js

'use strict';

angular.module('app', ['ui.router']);

//Setting up route
angular.module('app').config(['$stateProvider',
    function($stateProvider) {
        $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'index.html',
      controller: 'ContextCtrl',
      controllerAs:'contextCtrl'
    })
    .state('home.messages', {
      url: '/messages',
      templateUrl: 'messages.html',
      controller: 'ContextCtrl',
      controllerAs:'contextCtrl'
    });
    }
]);

main.js

'use strict';
/*jslint latedef:false*/

//Controller declaration
angular.module('app').controller('ContextCtrl', ContextCtrl);

function ContextCtrl() {
  var vm = this;

  vm.messages = [];

  vm.getAllMessages = getAllMessages;

  function getAllMessages(){
    vm.messages = ['m1', 'm2', 'm3', 'm4'];
  };

}

mycache.manifest

CACHE MANIFEST

js/main.js
js/routes.js
messages.html
bower_components/angular-ui-router/release/angular-ui-router.js
bower_components/angular/angular.js
Community
  • 1
  • 1
Kriss
  • 326
  • 1
  • 3
  • 12
  • Not an answer, but as you are already using bower, have you considered grunt and so the application will start its own server and you will be able to distibute without external dependencies. – pedromarce Dec 03 '14 at 07:08
  • But then the person I send it to needs to have grunt, bower, a server, etc on their computer, and they also need to know how to use all of these technologies to be able to view the application, don't they? – Kriss Dec 03 '14 at 07:17
  • grunt is installed as a dependency in your project, so he would get it as you send him your project. He would need to have node.js installed though. – pedromarce Dec 03 '14 at 07:25
  • If you want to run just by clicking on index.html try using mozilla firefox. Firefox has internal server. – Aditya Sethi Dec 03 '14 at 07:25

0 Answers0