AngularJS-WebApp helps you buid web applications by taking care of your application state navigation and routing.
bower install angularjs-webapp
from your project public directory root :
git clone git://texthtml.net/webapp/lib/angularjs/webapp components/angularjs-webapp
or :
git submodule add git://texthtml.net/webapp/lib/angularjs/webapp components/angularjs-webapp
<script type="text/javascript" src="/components/angularjs-webapp/angularjs-webapp.js"></script>
<link rel="stylesheet" type="text/css" href="/components/angularjs-webapp/angularjs-webapp.css"></link>
You need to adjust the path if you install AngularJS-WebApp somewhere else.
AngualarJs-WebApp bind application state to the browser history object using a History service so that the browser back/forward buttons are still working. In the exemples here I will use section element for the app screens but you can use any element. AngularJS-WebApp only add/remove a class to the app screens to indicate the current screen.
You have to use css to hide/show screen. A very basic css file is included to get you started. This css file suppose the section elements are your app screens.
<section id="home">
<h1>Home Screen</h1>
<button th:screen="#secondscreen">go to secondscreen</button>
</section>
<section id="secondscreen">
<button th:screen="$home">Home</button>
<h1>Home Screen</h1>
<input ng:init="firstname='World'" ng:model="firstname" />
<button th:screen="#thirdscreen" th:screen-model="firstname">go to thirdscreen</button>
</section>
<section id="thirdscreen" ng:model="name">
<button th:screen="$back">Back</button>
<h1>Third Screen</h1>
Hello {{ name }}
</section>
This represent an app with 3 screen. The app is initilized with the #home screen (selector configurable). the th:screen directive is used to move between screens, the value can be:
- $home to take the user to home screen
- $back to take the user to the previous screen
- $backOrHome to take the user to the previous screen if a previous state is availlable and to $home if not
- a css selector to take the user to the screen the selector point to (using document.querySelector)
If a screen have a th:model attribute, the th:screen directive can communicate data to the targeted screen. In the previous screen, the value of 'firstname' on second screen scope is injected into the thirdscreen scope as 'name'. If a th:screen directive on a button have the value '$back' and there is no more previous state, the button will be disabled.
AngualarJs-WebApp can also change the URL according to the screen. The route is described on the screens element with the th:route attribute. Only screen you want to be availlable with a custom URL need a th:route attribute. Screens with and without th:route attribute can be mixed.
<section id="home">
<h1>Home Screen</h1>
<button th:screen="#secondscreen">go to secondscreen</button>
</section>
<section id="secondscreen" th:route="/second">
<button th:screen="$home">Home</button>
<h1>Home Screen</h1>
<input ng:init="firstname='World'" ng:model="firstname" />
<button th:screen="#thirdscreen" th:screen-model="firstname">go to thirdscreen</button>
</section>
<section id="thirdscreen" th:model="name" route="/hello/:name">
<button th:screen="$back">Back</button>
<h1>Third Screen</h1>
Hello {{ name }}
</section>
now when going to the second screen, the URL will be changed to /second and when moving to the third, the URL will be changed to /hello/:name. where :name will be replaced using the screen scope 'name' value. Be careful, when you use this, you have to make sure the application is served on all the reachable URLs. You can do this on your server or with a FALLBACK if you are using Application Cache with your app. When accessing the app with an URL matching a screen route, AngualarJs-WebApp will initilize the app to this screen and populate its scope with variable found in the URL if any. In the exemple, going to /hello/Pierre would load the third screen and show "Hello Pierre"
th:app is used to initialize the StateManager and can be configured with optional attributes:
- th:first-screen: css selector to the first screen of your app (defaults to #home)
- th:screen-class: class used to identify the current screen
This is a work in progress. There is no other documentation than the source code and your browser console yet. Some day it will be there : AngularJS-WebApp Wiki.
There are bugs (even if they are not listed). But I'd like to get rid of them. If you want to help, you can report one.
The easiest way to get started here is to send me en email at mathieu@rochette.cc.