AngularJS Example:
by icub3d
HTML
<div ng-app="test">
<div ng-controller="Controller1">
<div ng-switch on="show">
<div ng-switch-when="yes">
Thanks!
</div>
<div ng-switch-default>
<form class="form-horizontal float-right" name="nameForm">
<input id="name" ng-model="name" type="text" required placeholder="name">
<button class="btn" ng-click="updateName()">
Update
</button>
</form>
</div>
</div>
<div ng-view></div>
<!-- CACHE FILE: list.html -->
<script type="text/ng-template" id="list.html">
<div>
Hello, {{something}}!
<a href="#/new">New</a>
</div>
</script>
<!-- CACHE FILE: new.html -->
<script type="text/ng-template" id="new.html">
<div>
Welcome, {{another}}!
<a href="#/list">List</a>
</div>
</script>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0rc10.min.js"></script>
<style>
JavaScript
angular.module('test', []).
config(function($routeProvider) {
$routeProvider.
when('/list', {
controller: ListCtrl,
template: 'list.html'
}).
when('/new', {
controller: NewCtrl,
template: 'new.html'
}).
otherwise({
redirectTo: '/list'
});
});
function Controller1($scope) {
$scope.show = "no";
$scope.updateName = function() {
console.log($scope.name);
$scope.show = "yes";
};
}
function ListCtrl($scope) {
$scope.something = "world";
}
function NewCtrl($scope) {
$scope.another = "to my world";
}