|
Игра в демки, пиар ангуляра и обучение.
Идея ! Предлагаю попубликовать мелкие но интересные приложения написанные на этом фреймворке вами лично.
Профит= пропиарим фреймворк + обменяемся опытом. Присоединяйтесь :) Начнём с простого. Калькулятор калорий.
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
function СompCnt($scope) {
//todo массив из значений
$scope.mass=50;
$scope.stature=170;
$scope.age=20;
$scope.calories=0;
$scope.computing=function(){
$scope.calories=10 * $scope.mass + 6.25*$scope.stature-5*$scope.age+5;
}
//запустим чтобы калории посчитались из значений по умолчанию
$scope.computing();
}
</script>
</head>
<body>
<H3>Калькулятор потребности в калориях</h3>
<div ng-controller="СompCnt">
Вес:<input type="text" ng-model="mass" ng-change="computing()">
Рост:<input type="text" ng-model="stature" ng-change="computing()">
Возраст:<input type="text" ng-model="age" ng-change="computing()">
<hr/>
Потребность мужчины в калориях: <b>{{calories}}</b> калорий в день
</div>
</body>
</html>
|
микроскопическая todo
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
function TodoCntl($scope) {
//todo массив из значений
$scope.todo = [];
//Метод добавляем в массив значение и сбрасывает
$scope.add=function(name){
$scope.todo.push({text:$scope.text});
$scope.text="";
}
//Метод remove удаляет все задачи
$scope.remove=function(name){
$scope.todo=[];
}
}
</script>
</head>
<body>
<div ng-controller="TodoCntl">
<form ng-submit="add()">
<input type="text" ng-model="text">
<input class="btn-primary" type="submit" value="add">
</form>
<hr/>
<ul>
<li ng-repeat="item in todo | filter:query" >
{{item.text}}
</li>
</ul>
<button ng-click="remove()">Очистить</button>
</div>
</body>
</html>
|
Тренажёр для запоминания английских слов.
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
function LangCntl($scope) {
// Данные для теста, вопрос, варианты и правильный ответ
var data=[
{
word:"for",
translate:["для","после","цикл","этот"],
realTranslate:"для"
},
{
word:"mix",
translate:["имельчить","смешать","взболтать","гоголь моголь"],
realTranslate:"смешать"
},
{
word:"angular",
translate:["яркий","пушистый","умный","гранёный"],
realTranslate:"гранёный"
}
];
// выставим первый вопрос
$scope.quest=data[0];
//счётчик
$scope.count=0;
//функция проверяющая ответы пользователя
$scope.respond=function(variant){
// проверим ответ
if(variant==$scope.quest.realTranslate) alert('Верно!');
else alert('увы, но правильный ответ '+$scope.quest.realTranslate);
//зададим следующий вопрос, но только если вопросы некончились
if($scope.count<data.length-1){
$scope.count++;
$scope.quest=data[$scope.count];
}
else{
alert("тестирование окончено");
}
}
}
</script>
</head>
<body>
<div ng-controller="LangCntl">
вопрос {{count+1}} ( кликайте по правильному ответу)<br/>
Как переводится <b>{{quest.word}}</b>
<hr/>
<ul>
<li ng-repeat="item in quest.translate | filter:query" ng-click="respond(item)">
{{item}}
</li>
</ul>
</div>
</body>
</html>
|
интересная штука этот ангуляр. Это я говорю не после того, как увидел твои примеры, а после прочтения некоторой части доки http://angular.ru/guide/overview
еще статья http://habrahabr.ru/post/172975/ |
Отличная идея! Пока возьму пару примеров оттуда, а потом отсюда что-нибудь туда :-)
Редактируемый древовидный список
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script>
angular.module("myApp", []);
function TreeController($scope) {
$scope.delete = function(data) {
data.nodes = [];
};
$scope.add = function(data) {
var post = data.nodes.length + 1;
var newName = data.name + '-' + post;
data.nodes.push({name: newName,nodes: []});
};
$scope.tree = [
{name: 'Узел', nodes: [
{name: 'Морской', nodes: []},
{name: 'Устричный', nodes: []}
]}
];
};
</script>
</head>
<body>
<script type="text/ng-template" id="item.html" ng-init="data.edit=false" >
<span ng-show="data.edit">
<input type="text" value="{{data.name}}" ng-model="data.name"/>
<button ng-click="data.edit=false">сохр.</button>
</span>
<span ng-hide="data.edit">
{{data.name}}
<button ng-click="data.edit=true">ред.</button>
</span>
<button ng-click="add(data)">Добавить узел</button>
<button ng-click="delete(data)" ng-show="data.nodes.length > 0">Удалить узел</button>
<ul>
<li ng-repeat="data in data.nodes" ng-include="'item.html'" class="node"></li>
</ul>
</script>
<ul ng-controller="TreeController">
<li ng-repeat="data in tree" ng-include="'item.html'" class="node"></li>
</ul>
</body>
</html>
|
Цитата:
График и таблица связанные общими данными, демонстрирует наследование scope контролами tableController и chartController от mainController
<!doctype html>
<html ng-app>
<head>
<style>
.bar{
width:50px;
background-color:#0F0;
margin-right:5px;
float:left;
}
</style>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
function mainController($scope) {
// здесь будем хранить данные,
// благодаря тому что они обьявлены здесь ими могут пользоваться оба контролёра унаследовавших scope
$scope.items=[
{label:"Африка",val:25},
{label:"Европа",val:20}
];
}
function tableController($scope) {
//добавляет строку в таблицу
$scope.add=function(){
$scope.items.push({val:0});
};
// метод не позволяет выставить больше 100%
$scope.verife=function(item){
if (item.val>100) item.val=100;
if (item.val<0) item.val=0;
};
}
function chartController2($scope) {
}
</script>
</head>
<body ng-controller="mainController">
<div ng-controller="chartController2">
<div style="height:310px;background-color:#000;padding:5px;">
<div class="bar" ng-repeat="item in items" style="height:{{item.val*3}}px; margin-top:{{300-item.val*3}}px;">
{{item.val}}%
</div>
</div>
</div>
<div ng-controller="tableController">
<table>
<tr ng-repeat="item in items">
<td>
<input ng-model="item.label"/></td> <td><input ng-model="item.val" ng-change="verife(item)"/>%
</td>
</tr>
</table>
<button ng-click="add()">Добавить запись </button>
</div>
</body>
</html>
|
|
Цитата:
|
Это вроде как оптимизация
http://jsperf.com/apply-vs-call-vs-invoke |
Ага. Правда, по тестам мне сложно сказать что там лучше, но учитывая, что этих тестов 15 ревизий и последняя была два дня назад, разработчики знают что делают :-)
|
| Часовой пояс GMT +3, время: 14:23. |
|