by Bachue
<html ng-app>
<head>
<script src="../js/angular.min.js"></script>
<script>
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
</script>
</head>
<body>
<div ng-controller='HelloController'>
<input ng-model="greeting.text" />
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
<html ng-app>
<head><title>Your Shopping Cart</title></head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input type='number' ng-model='item.quantity' />
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click='remove($index)'>Remove</button>
</div>
<script src='../js/angular.min.js'></script>
<script type="text/javascript">
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka pots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>
<html ng-app='AMail'>
<head>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src='controller.js'></script>
</head>
<body>
<h1>A-Mail</h1>
<div ng-view></div>
</body>
</html>
var aMailServices = angular.module('AMail', ['ngRoute']);
aMailServices.config(function($routeProvider) {
$routeProvider.
when('/', {controller: 'ListController', templateUrl: 'list.html'}).
when('/view/:id', {controller: 'DetailController', templateUrl: 'detail.html'}).
otherwise({redirectTo: '/'});
});
var messages = [{
id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',
date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],
message: 'Hey, we should get together for lunch sometime and catch up. There are many things we should collaborate on this year.'
}, {
id: 1, sender: 'maria@somecompany.com', subject: 'Where did you leave my laptop?', date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],
message: 'I thought you were going to put it in my desk drawer. But it does not seem to be there.'
}, {
id: 2, sender: 'bill@somecompany.com', subject: 'Lost python', date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],
message: 'Nobody panic, but my pet python is missing from her cage. She doesn\'t move too fast, so just call me if you see her.'
}];
aMailServices.controller('ListController', function($scope) {
$scope.messages = messages;
});
aMailServices.controller('DetailController', function($scope, $routeParams) {
$scope.message = messages[$routeParams.id];
});
<div><strong>Subject:</strong> {{message.subject}} </div>
<div><strong>Sender:</strong> {{message.sender}} </div>
<div><strong>Date:</strong> {{message.date}} </div>
<div>
<strong>To:</strong>
<span ng-repeat='recipient in message.recipients'> {{recipient}} </span>
</div>
<div>{{message.message}}</div>
<a ng-href='#/'>Back to message list</a>
<table>
<tr>
<td><strong>Sender</strong></td>
<td><strong>Subject</strong></td>
<td><strong>Date</strong></td>
</tr>
<tr ng-repeat='message in messages'>
<td>{{message.sender}}</td>
<td><a ng-href='#/view/{{message.id}}'>{{message.subject}}</a></td>
<td>{{message.date}}</td>
</tr>
</table>
<html ng-app="HomeModule">
<head>
<script src="../js/angular.min.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p ng-bind="page.heading | titleCase"></p>
<input ng-model="page.heading" />
</div>
<script type="text/javascript">
var homeModule = angular.module('HomeModule', []);
homeModule.controller('HelloController', function($scope) {
$scope.page = {heading: 'behold the majesty of your page title'};
});
homeModule.filter('titleCase', function() {
return function(input) {
var words = input.split(' ');
for (var i = 0; i < words.length; i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
};
return words.join(' ');
};
});
</script>
</body>
</html>
<html ng-app='app'>
<head>
<title>Form</title>
<style>
input.ng-invalid { color: red; }
input.ng-valid { color: green; }
</style>
</head>
<body>
<h1>Sign Up</h1>
<form name='addUserForm' ng-controller='AddUserController'>
<div ng-show='message'>{{message}}</div>
<div>*First name: <input ng-model='user.first' name='firstName' required ng-pattern="/^[A-Z][a-z]+$/"></div>
<div>*Last name: <input ng-model='user.last' required ng-pattern="/^[A-Z][a-z]+(\s[A-Z][a-z]*)*$/"></div>
<div>*Email: <input type='email' ng-model='user.email' required></div>
<div> Age: <input type='number' ng-model='user.age' ng-maxlength='3' ng-minlength='1' min="1"></div>
<div><button ng-click='addUser()' ng-disabled='!addUserForm.$valid'>Submit</button></div>
</form>
<script type="text/javascript" src='../js/angular.min.js'></script>
<script type="text/javascript">
var appModule = angular.module('app', []);
appModule.controller('AddUserController', function($scope) {
$scope.message = '';
$scope.addUser = function() {
$scope.message = 'Thanks, ' + $scope.user.first + ', we added you!';
};
});
</script>
</body>
</html>
<html ng-app='RankingApp'>
<head>
<style>
.rating { color: #a9a9a9; margin: 0; padding: 0; }
ul.rating { display: inline-block; }
.rating li { list-style-type: none; display: inline-block; padding: 1px; text-align: center; font-weight: bold; cursor: pointer; }
.rating .filled { color: #21568b; }
</style>
<script src='../js/angular.min.js'></script>
</head>
<body ng-controller='RankingController'>
<h1>Rating is {{rating}}</h1>
<p>
<h3>Clickable Rating</h3>
<div fundoo-rating rating-value="rating" max="10" on-rating-selected="saveRatingToServer(rating)"></div>
</p>
<p>
<h3>Readonly rating</h3>
<div fundoo-rating rating-value="rating" max="10" readonly="true"></div>
</p>
<script type="text/javascript">
angular.module('RankingApp', [])
.controller('RankingController', function($scope, $window) {
$scope.rating = 5;
$scope.saveRatingToServer = function(rating) {
$window.alert('Rating selected - ' + rating);
};
})
.directive('fundooRating', function () {
return {
restrict: 'A',
template: '<ul class="rating"><li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">\u2605</li></ul>',
scope: {
ratingValue: '=', // Accept an object
max: '=',
readonly: '@', // Accept a string
onRatingSelected: '&' // Accept a function
},
link: function (scope, elem, attrs) {
var updateStars = function() {
scope.stars = [];
for (var i = 0; i < scope.max; i++) {
scope.stars.push({filled: i < scope.ratingValue});
}
};
scope.toggle = function(index) {
if (scope.readonly && scope.readonly === 'true') return;
scope.ratingValue = index + 1;
scope.onRatingSelected({rating: index + 1});
};
scope.$watch('ratingValue', function(oldVal, newVal) {
if (newVal) updateStars();
});
}
}
});
</script>
</body>
</html>
<html ng-app='ShoppingModule'>
<head><title>Your Shopping Cart</title></head>
<body ng-controller='ShoppingController'>
<h1>Shop!</h1>
<table>
<tr ng-repeat='item in items'>
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<td>{{item.price | currency}}</td>
</tr>
</table>
<script src='../js/angular.min.js'></script>
<script type="text/javascript">
var ShoppingModule = angular.module('ShoppingModule', []);
ShoppingModule.factory('Items', function($http) {
return {
query: function(callback) {
$http.get('/shopping/items').success(callback);
}
};
});
ShoppingModule.controller('ShoppingController', function($scope, Items) {
Items.query(function(items) { $scope.items = items; });
});
</script>
</body>
</html>
<html>
<head>
<title>Test Resource in Angular</title>
<meta charset='utf-8' />
<script type='text/javascript' src='../js/require.min.js' defer async='true' data-main='scripts/main'></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
require.config({
paths: {
angular: '../../js/angular.min',
angular_route: '../../js/angular-route.min',
angular_resource: '../../js/angular-resource.min',
jquery: '../../js/jquery.min',
domReady: '../../js/domReady.min'
},
shim: {
angular: {
deps: ['jquery'],
exports: 'angular'
},
angular_resource: ['angular'],
angular_route: ['angular']
}
});
require(['angular', 'app', 'domReady', 'jquery', 'angular_route',
'services/user_service',
'controllers/root_controller', 'controllers/show_controller', 'controllers/new_controller', 'controllers/edit_controller'],
function(angular, app, domReady, $) {
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/root.html',
controller: 'RootController',
resolve: {
users: function(UsersLoader) {
return UsersLoader();
}
}
}).when('/new', {
templateUrl: 'views/new.html',
controller: 'NewController'
}).when('/edit/:id', {
templateUrl: 'views/edit.html',
controller: 'EditController',
resolve: {
user: function(UserLoader) {
return UserLoader();
}
}
}).when('/:id', {
templateUrl: 'views/show.html',
controller: 'ShowController',
resolve: {
user: function(UserLoader) {
return UserLoader();
}
}
}).otherwise({
redirectTo: '/'
});
});
domReady(function() {
angular.bootstrap(document, ['MyApp']);
$('html').addClass('ng-app: MyApp');
});
});
define(['angular', 'angular_route', 'controllers/controllers', 'services/services'],
function(angular) {
return angular.module('MyApp', ['ngRoute', 'controllers', 'services']);
});
define(['angular'], function(angular) {
return angular.module('controllers', []);
});
define(['angular', 'angular_resource'], function(angular) {
return angular.module('services', ['ngResource']);
});
define(['services/services'], function(services) {
services.factory('User', function($resource) {
return $resource('/users/:id', {id: '@id'});
});
services.factory('UsersLoader', function(User, $q) {
return function() {
var delay = $q.defer();
User.query(function(users) {
delay.resolve(users);
}, function() {
delay.reject('Unable to list all users');
});
return delay.promise;
};
});
services.factory('UserLoader', function(User, $q, $route) {
return function() {
var delay = $q.defer();
User.get({id: $route.current.params.id}, function(user) {
delay.resolve(user);
}, function() {
delay.reject('Unable to fetch user ' + $route.current.params.id);
});
return delay.promise;
};
});
});
define(['controllers/controllers', 'services/user_service'], function(controllers) {
controllers.controller('RootController', function($scope, users) {
$scope.users = users;
});
});
define(['controllers/controllers', 'services/user_service'], function(controllers) {
controllers.controller('NewController', function($scope, $location, User) {
$scope.user = new User();
$scope.save = function() {
$scope.user.$save({
name: $scope.user.name
}, function(user) {
$location.path('/' + user.id);
});
};
});
});
define(['controllers/controllers', 'services/user_service'], function(controllers) {
controllers.controller('ShowController', function($scope, user) {
$scope.user = user;
});
});
define(['controllers/controllers', 'services/user_service'], function(controllers) {
controllers.controller('EditController', function($scope, $location, user) {
$scope.user = user;
$scope.save = function() {
$scope.user.$save({
id: $scope.user.id,
name: $scope.user.name
}, function(user) {
$location.path('/' + user.id);
});
};
$scope.remove = function() {
$scope.user.$remove(function() {
$location.path('/');
});
delete $scope.user;
};
});
});
Restangular.one('users').getList() // GET: /users
.then(function(users) {
// returns a list of users
$scope.user = users[0]; // first Restangular obj in list: { id: 123 }
});
// Restangular objects are self-aware and know how to make their own restful requests
$scope.user.getList('cars'); // GET: /users/123/cars
// You can also use your own custom methods on Restangular objects
$scope.user.sendMessage(); // POST: /users/123/sendMessage
// Chain methods together to easily build complex requests
$scope.user.one('messages', 123).one('from', 123).getList('unread');
// GET: /user/123/messages/123/from/123/unread
<ul>
<li bindonce ng-repeat="person in Persons">
<a bo-href="'#/people/' + person.id"><img bo-src="person.imageUrl"></a>
<a bo-href="'#/people/' + person.id" bo-text="person.name"></a>
<p bo-class="{'cycled':person.generated}" bo-html="person.description"></p>
</li>
</ul>