docs(examples): update example apps

This commit is contained in:
Igor Minar 2012-03-28 10:50:46 -07:00 committed by Misko Hevery
parent 8b93541522
commit ba59ef4950
6 changed files with 59 additions and 57 deletions

View file

@ -1,28 +1,31 @@
<!doctype html> <!doctype html>
<html xmlns:ng="http://angularjs.org" ng:app> <html ng-app>
<head> <head>
<title>Personal Log</title> <title>Personal Log</title>
<script type="text/javascript" src="../../src/angular-bootstrap.js"></script> <script src="../../src/loader.js"></script>
<script type="text/javascript" src="personalLog.js"></script> <script>
setupModuleLoader(window);
</script>
<script src="personalLog.js"></script>
<script src="../../src/angular-bootstrap.js"></script>
<script src="../../src/ngCookies/cookies.js"></script>
</head> </head>
<!-- TODO: we need to expose $root so that we can delete cookies in the scenario runner, there <body ng-controller="LogCtrl">
must be a better way to do this -->
<body ng:controller="example.personalLog.LogCtrl">
<form action="" ng:submit="addLog(newMsg)"> <form action="" ng-submit="addLog(newMsg)">
<input type="text" ng:model="newMsg" /> <input type="text" ng-model="newMsg">
<input type="submit" value="add" /> <input type="submit" value="add">
<input type="button" value="remove all" ng:click="rmLogs()" /> <input type="button" value="remove all" ng-click="rmLogs()">
</form> </form>
<hr/> <hr/>
<h2>Logs:</h2> <h2>Logs:</h2>
<ul> <ul>
<li ng:repeat="log in logs | orderBy:'-at'"> <li ng-repeat="log in logs | orderBy:'-at'">
{{log.at | date:'yy-MM-dd HH:mm'}} {{log.msg}} {{log.at | date:'yy-MM-dd HH:mm'}} {{log.msg}}
[<a href="" ng:click="rmLog(log)">x</a>] [<a href="" ng-click="rmLog(log)">x</a>]
</li> </li>
</ul> </ul>

View file

@ -5,28 +5,23 @@
* - testability of controllers * - testability of controllers
* - dependency injection for controllers via $inject and constructor function * - dependency injection for controllers via $inject and constructor function
* - $cookieStore for persistent cookie-backed storage * - $cookieStore for persistent cookie-backed storage
* - simple templating constructs such as ng:repeat and {{}} * - simple templating constructs such as ng-repeat and {{}}
* - date filter * - date filter
* - and binding onSubmit and onClick events to angular expressions * - and binding onSubmit and onClick events to angular expressions
* @author Igor Minar * @author Igor Minar
*/ */
/** @namespace the 'example' namespace */
var example = example || {};
/** @namespace namespace of the personal log app */
example.personalLog = {};
//name space isolating closure //name space isolating closure
(function() { (function() {
var app = angular.module('personalLog', ['ngCookies']);
var LOGS = 'logs'; var LOGS = 'logs';
/** /**
* The controller for the personal log app. * The controller for the personal log app.
*/ */
function LogCtrl($cookieStore, $scope) { app.controller('LogCtrl', ['$cookieStore', '$scope', function LogCtrl($cookieStore, $scope) {
var logs = $scope.logs = $cookieStore.get(LOGS) || []; //main model var logs = $scope.logs = $cookieStore.get(LOGS) || []; //main model
@ -72,11 +67,6 @@ function LogCtrl($cookieStore, $scope) {
logs.splice(0, logs.length); logs.splice(0, logs.length);
$cookieStore.remove(LOGS); $cookieStore.remove(LOGS);
}; };
} }]);
//inject
LogCtrl.$inject = ['$cookieStore', '$scope'];
//export
example.personalLog.LogCtrl = LogCtrl;
})(); })();

View file

@ -1,12 +1,13 @@
describe('example.personalLog.LogCtrl', function() { describe('example.personalLog.LogCtrl', function() {
var logScope; var logScope;
beforeEach(function() {
var injector = angular.injector(['ng', 'ngMock', 'ngCookies']); beforeEach(module('personalLog'));
logScope = injector.get('$rootScope');
logScope.$cookies = injector.get('$cookies'); beforeEach(inject(function($rootScope, $controller) {
injector.instantiate(example.personalLog.LogCtrl, {$scope: logScope}); logScope = $rootScope.$new();
}); $controller('LogCtrl', {$scope: logScope});
}));
it('should initialize notes with an empty array', function() { it('should initialize notes with an empty array', function() {
@ -43,11 +44,11 @@ describe('example.personalLog.LogCtrl', function() {
}); });
it('should store logs in the logs cookie', function() { it('should store logs in the logs cookie', inject(function($cookies) {
expect(logScope.$cookies.logs).not.toBeDefined(); expect($cookies.logs).not.toBeDefined();
logScope.addLog('first log message'); logScope.addLog('first log message');
expect(logScope.$cookies.logs).toBeTruthy(); expect($cookies.logs).toBeTruthy();
}); }));
it('should do nothing if newMsg is empty', function() { it('should do nothing if newMsg is empty', function() {
@ -79,17 +80,17 @@ describe('example.personalLog.LogCtrl', function() {
}); });
it('should update cookies when a log is deleted', function() { it('should update cookies when a log is deleted', inject(function($cookies) {
expect(logScope.$cookies.logs).toMatch(/\[\{.*?\}(,\{.*?\}){3}\]/); expect($cookies.logs).toMatch(/\[\{.*?\}(,\{.*?\}){3}\]/);
logScope.rmLog(logScope.logs[1]); logScope.rmLog(logScope.logs[1]);
expect(logScope.$cookies.logs).toMatch(/\[\{.*?\}(,\{.*?\}){2}\]/); expect($cookies.logs).toMatch(/\[\{.*?\}(,\{.*?\}){2}\]/);
logScope.rmLog(logScope.logs[0]); logScope.rmLog(logScope.logs[0]);
logScope.rmLog(logScope.logs[0]); logScope.rmLog(logScope.logs[0]);
logScope.rmLog(logScope.logs[0]); logScope.rmLog(logScope.logs[0]);
expect(logScope.$cookies.logs).toMatch(/\[\]/); expect($cookies.logs).toMatch(/\[\]/);
}); }));
}); });
@ -110,10 +111,10 @@ describe('example.personalLog.LogCtrl', function() {
}); });
it('should remove logs cookie', function() { it('should remove logs cookie', inject(function($cookies) {
expect(logScope.$cookies.logs).toBeTruthy(); expect($cookies.logs).toBeTruthy();
logScope.rmLogs(); logScope.rmLogs();
expect(logScope.$cookies.logs).not.toBeDefined(); expect($cookies.logs).not.toBeDefined();
}); }));
}); });
}); });

View file

@ -1,22 +1,30 @@
<!doctype html> <!doctype html>
<html xmlns:ng="http://angularjs.org" ng:app> <html ng-app="example">
<head> <head>
<title>angular dev sandbox</title> <title>angular dev sandbox</title>
<script src="../src/angular-bootstrap.js"></script> <script src="../src/loader.js"></script>
<script> <script>
angular.module.ng('routeConfig', function($route) { setupModuleLoader(window);
$route.when('/view1', {controller: MyCtrl, template: 'view1.html'}); angular.module('example', [], function($routeProvider) {
$route.when('/view2', {controller: MyCtrl, template: 'view2.html'}); $routeProvider.when('/view1', {controller: MyCtrl, template: 'view1.html'});
$routeProvider.when('/view2', {controller: MyCtrl, template: 'view2.html'});
function MyCtrl() {}; function MyCtrl($location, $scope) {
}, {$inject: ['$route']}); $scope.url = function() {
return $location.url();
}
};
});
</script> </script>
<script src="../src/angular-bootstrap.js"></script>
</head> </head>
<body ng:init="$service('$window').$root = this"> <body>
<p> <p>
<a href="#/view1">view1</a> | <a href="#/view2">view2</a> | <a href="#">blank</a> <a href="#/view1">view1</a> | <a href="#/view2">view2</a> | <a href="#">blank</a>
</p> </p>
view: <ng:view></ng:view> <hr>
<div ng-view></div>
</body> </body>
</html> </html>

View file

@ -1,2 +1,2 @@
view1<br> view1<br>
location: {{$service('$location').href}} location: {{url()}}

View file

@ -1,2 +1,2 @@
view2<br/> view2<br/>
location: {{$service('$location').href}}<br/> location: {{url()}}<br/>