<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://admin.pickcell.io/bower_components/tinymce-dist/tinymce.js"></script>
<script type="text/javascript" src="http://admin.pickcell.io/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="http://admin.pickcell.io/bower_components/angular-ui-tinymce/src/tinymce.js"></script>
<script type="text/javascript" src="http://admin.pickcell.io/bower_components/angular-route/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
| <a href="#/todo">todo</a> | <a href="#/step1">step1</a> | <a href="#/step2">step2</a> |
<ng-view></ng-view>
</body>
</html>
// Code goes here
var myApp = angular.module('myApp', ['ui.tinymce', 'ngRoute']);
myApp.config([
'$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
redirectTo: '/todo'
}).when('/todo', {
templateUrl: 'page.html',
controller: "TodoListController as todoList"
}).when('/step1', {
templateUrl: 'step1.html',
controller: "step1"
}).when('/step2', {
templateUrl: 'step2.html',
controller: "step2"
}).otherwise({
redirectTo: '/'
});
}
]);
myApp.controller("step1", [
"$scope",
"$rootScope",
"$location",
function($scope, $rootScope, $location) {
$scope.body = "";
$scope.nextStep = function() {
$rootScope.body = $scope.body;
$location.path("/step2");
};
}
]);
myApp.controller("step2", [
"$scope",
"$rootScope",
"$location",
function($scope, $rootScope, $location) {
if (!$rootScope.body) {
$location.path("/step1");
}
$scope.tinymceOptions = {
selector: 'textarea',
height: 300,
inline: false,
plugins: [
"advlist autolink autosave link image lists charmap preview hr spellchecker",
"searchreplace wordcount visualblocks visualchars code insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste textcolor colorpicker textpattern fullpage"
],
toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink image media code | insertdatetime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template restoredraft | mybutton",
skin: 'lightgray',
theme: 'modern',
menubar: false,
toolbar_items_size: 'small'
};
}
]);
myApp
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [{
text: 'learn angular',
done: true
}, {
text: 'build an angular app',
done: false
}];
todoList.addTodo = function() {
todoList.todos.push({
text: todoList.todoText,
done: false
});
todoList.todoText = '';
};
todoList.remaining = function() {
var count = 0;
angular.forEach(todoList.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
todoList.archive = function() {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});
/* Styles go here */
<div>
<h3>Step1</h3>
<input type="text" ng-model="body">
<button ng-click="nextStep()">Next Step</button>
</div>
<div>
<h3>Step2</h3>
<textarea ui-tinymce="tinymceOptions" ng-model="body"></textarea>
</div>
<h2>Todo</h2>
<div>
<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
[ <a href="" ng-click="todoList.archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todoList.todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>