AngularJS

В чем причина популярности AngularJs?

• Динамическая структура
• Команда из 20 человек работает над его развитием
  
• Гибкость и расширяемость
  
• Хорошая производительность
• Имеет хорошую документацию и кучу примеров
• Большое количество готовых модулей
• Популярность - большое комьюнити
  

Для того чтобы начать изучать AngularJs нужно сделать одну вещь...

Нужно Забыть jQuery

В процессе обучения Впечатления от Angular меняються

  Основные фичи AngularJs

• Дерективы
  
• Двустороннее связывание данных
• HTML Templates
• Фильтры
  
• Внешнее связывание
  
• Тестируемость
  

Дерективы 

Element

 <ng-view></ng-view>

Attribute

 <div ng-view></div>

Class

 <div class="ng-view"><div>

Sample

    
<tabset>
  <tab ng-repeat="tab in tabs" heading="{{tab.title}}" 
          active="tab.active" disabled="tab.disabled">
    {{tab.content}}
  </tab>
</tabset>
    

Дерективы бывают

 <div ng-controller="main as m">

<button ng-click="sendData()">Отпарвить</button>

<div ng-hide="false">Меня не видно</div>

Собственные дерективы

<ui-pagination cur="pagination.cur" total="pagination.total" display="9"></ui-pagination>

<div class="pagination pagination-large pagination-centered" display="12" total="pagination.total" cur="pagination.cur">
    <ul>
        <li class="" ng-click="goToFirstPage()" ng-class="{disabled: firstPage()}">
            <a href="">
                <i class="icon-step-backward"></i>
            </a>
        </li>
    </ul>
</div>

Связывание данных  

<input type="text" ng-model="yourName" placeholder="Ввудите свое имя">
<h1>Привет {{yourName}}</h1>

  HTML Templates

Includes

<div ng-include src="test.html"</div>

Repeats

<ul>
   <li ng-repeat="job in day.jobs"> 
     {{job.name}} 
    </li>
</ul>

  Фильтры

<ul>  <li ng-repeat="person in persons | orderBy: 'lastname'">        {{ person.firstname }}       , {{ person.lastname | uppercase }}  </li></ul>

  Внешнее связывание

angular.module('railsApp', ['ngRoute'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      }     .otherwise({
        redirectTo: '/'
      });
  });

Тестируемость  

Структура приложения

Пример приложения - HTML

<div ng-app>
    <center>
         <h1>Todo List</h1>
    </center>
    <div ng-controller="toDoCtrl">
        <div class="content">
            <div class="header">
                <form action="">
                    <button type="submit" ng-click="addTodo()"> 
                      <span class="entypo-list-add"></span>
                    </button>
                    <input type="text" ng-model="todoFld" placeholder="Add todo here!" />
                </form>
            </div>
            <div class="todoItem" ng-repeat="todo in todos"> 
              <span ng-class="{done:todo.done}" contenteditable="true">{{todo.text}}</span>
              <button ng-click="todos.splice($index, 1)">
                <span class="entypo-cancel"></span>
              </button>
              <button ng-click="doneTodo($index)"> 
                <span class="entypo-check"></span>
              </button>
            </div>
        </div>
    </div>
</div>

Пример приложения - javascript

function toDoCtrl($scope) { 
  $scope.todoFld = ""
  $scope.todos = [
    {
      text: "Test Data", 
      done:false
    },{
      text: "Test Data2", 
      done:false
    }
  ];
  $scope.addTodo = function () {   
    if ($scope.todoFld != "") {
      $scope.todos.push({text: $scope.todoFld , val: $scope.valFld});
      $scope.todoFld = "";
    }
  };
  $scope.doneTodo = function($index) {
    $scope.todos[$index].done = !$scope.todos[$index].done;
  };
}

Пример риложения - Результат

jQuery

 var data = [
    {
      text: "Test Data", 
      done:false
    },{
      text: "Test Data2", 
      done:false
    }
];
var todotemp = $("#todotemp > .todoItem");
var header = $(".content");
var renderData = function (data,$to){
  for(var i=0;i<data.length;i++){
    var clone = todotemp.clone();
    clone.find("span").eq(0).text(data[i].text);
    $to.append(clone);
  }
}
var dataClear = function(){
   header.find(".todoItem").remove();
}
$("#form").submit(function(event){
  event.preventDefault();
  data.push({
      text: $("#todoFld").val(), 
      done:false
    });
  dataClear();
  renderData(data,header);
  $("#todoFld").val("");
});
$(document).on("click",".remove",function(){
  dataClear();
  data.splice($(this).index()-1,1);
  renderData(data,header);
});
$(document).on("click",".check",function(){
  $(this).parent().find("span").eq(0).toggleClass("done");
});
renderData(data,header);

Результат jQuery

  Вопросы?