Форум

DjDiablo · #1 (**permalink**) 26.05.2013, 22:41

Идея ! Предлагаю попубликовать мелкие но интересные приложения написанные на этом фреймворке вами лично.
Профит= пропиарим фреймворк + обменяемся опытом.
Присоединяйтесь

Начнём с простого.
Калькулятор калорий.

<!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>

DjDiablo · #2 (**permalink**) 26.05.2013, 22:44

микроскопическая 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>

DjDiablo · #3 (**permalink**) 26.05.2013, 22:46

Тренажёр для запоминания английских слов.

<!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>

nerv_ · #4 (**permalink**) 26.05.2013, 23:51

интересная штука этот ангуляр. Это я говорю не после того, как увидел твои примеры, а после прочтения некоторой части доки http://angular.ru/guide/overview

еще статья http://habrahabr.ru/post/172975/

Shitbox2 · #5 (**permalink**) 27.05.2013, 00:09

Отличная идея! Пока возьму пару примеров оттуда, а потом отсюда что-нибудь туда :-)

Редактируемый древовидный список

<!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>

DjDiablo · #6 (**permalink**) 27.05.2013, 00:46

Цитата:

пару примеров оттуда,

Думаю нет смысла репостить примеры с оф сайта. Свои горазд ценнее

График и таблица связанные общими данными,
демонстрирует наследование 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>

nerv_ · #7 (**permalink**) 27.05.2013, 00:48

хе https://github.com/angular/angular.j...jector.js#L578

Shitbox2 · #8 (**permalink**) 27.05.2013, 01:00

Сообщение от nerv_

хе https://github.com/angular/angular.j...jector.js#L578

Думаю, что сделал бы так же :-)

DjDiablo · #9 (**permalink**) 27.05.2013, 01:01

Это вроде как оптимизация
http://jsperf.com/apply-vs-call-vs-invoke

Shitbox2 · #10 (**permalink**) 27.05.2013, 01:08

Ага. Правда, по тестам мне сложно сказать что там лучше, но учитывая, что этих тестов 15 ревизий и последняя была два дня назад, разработчики знают что делают :-)

Форум

Справочник

Discord чат

Курсы javascript