Основы AngularJS (шпаргалка) Часть 1

angular[1]
image-885

Настройка и установка

Устанавливать будем с помощью bower, так как ним очень удобно устанавливать дополнения для angular. Настройка каталога для .bowerrc (настройка не обязательная, я использую для смены стандартной директории установки компонентов)

{
  "directory": "components/",
  "analytics": false,
  "timeout": 120000,
  "registry": {
    "search": [
      "http://localhost:8000",
      "https://bower.herokuapp.com"
    ]
  }
}

Инициализация bower и установка angular с сохранением в конфигурации

bower init
bower install angular --save

Подключаем к шаблону.

<html ng-app>
 <head>
 </head>
 <body>
   //основная часть с директивами angular
   <script src="/путь/до/angular.js"></script>
   <script src="/путь/до/script.js"></script>
   </body>
</html>

Обертка

{{ 'Привет' }}
{{ 'Привет' + myVar }}
{{ 3 + 5 }}
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>

Контроллер

Добавляем в шаблоне директивы ng-app и ng-controller

<html ng-app="myApp">
 <head>
 </head>
 <body ng-controlle="FirstCtrl">
   <input type="text" ng=model="data.message">
   <h1>{{ data.message }}</h1>
   <script src="/путь/до/angular.js"></script>
   <script src="/путь/до/main.js"></script>
   </body>
</html>

main.js

var app = angular.module('myApp', [])
app.controller('FirstCctrl', function($scope){
   $scope.data = {message:'Hello'}
});

Обмен данными между контроллерами

Создаем два контроллера FirstCtrl и SecondCtrl.

<html ng-app="myApp">
 <head>
 </head>
 <body>
	<div ng-controller="FirstCtrl">
	    <h1>{{ data.message }}</h1>
	</div>
	<div ng-controller="SecondCtrl">
	    <h1>{{ data.message }}</h1>
	</div>
   <script src="/путь/до/angular.js"></script>
   <script src="/путь/до/main.js"></script>
   </body>
</html>

main.js

var app = angular.module('myApp', []);
app.factory('Data', function(){
	return {message: 'Message'}
});
app.controller('FirstCtrl', function ($scope, Data){
	$scope.data = Data
});
app.controller('SecondCtrl', function($scope, Data){
	$scope.data = Data
});

Добавление методов в scope

Добавим новый метод reversedMessage() (он будет переворачивать текст)

<html ng-app="myApp">
 <head>
 </head>
 <body>
	<div ng-controller="FirstCtrl">
	    <h1>{{ data.message }}</h1>
            <h3>{{ reversedMessage() }}</h3>
	</div>
   <script src="/путь/до/angular.js"></script>
   <script src="/путь/до/main.js"></script>
   </body>
</html>

main.js

var app = angular.module('myApp', []);
app.controller('FirstCtrl', function ($scope){
	$scope.data = {message: 'Привет'};
	$scope.reversedMessage = function(){
            return $scope.data.message.split("").reverse().join("");
	}
});

Фильтр

Добавим фильтр reverse который будет делать то же самое что и предыдущий метод

<html ng-app="myApp">
 <head>
 </head>
 <body>
	<div ng-controller="FirstCtrl">
	    <h1>{{ data.message }}</h1>
            <h3>{{ data.message|reverse }}</h3>
	</div>
   <script src="/путь/до/angular.js"></script>
   <script src="/путь/до/main.js"></script>
   </body>
</html>

main.js

var app = angular.module('myApp', []);
app.filter('reverse', function(Data){
	return function(text){
		return text.split("").reverse().join("") + " " + Data.message;
	}
});
app.controller('FirstCtrl', function ($scope){
	$scope.data = {message:'Текст'};
});

ngFiltr

В main.js создадим объект Avengers

var app = angular.module('myApp', []);
app.factory('Avengers', function () {
    var Avengers = {};
    Avengers.cast = [
        {
            name: 'Roma',
            character: 'Rdfvbbdf'
        },
        {
            name: 'Sasha',
            character: 'SDFSDffsdfsd'
        },
        {
            name: 'Tanya',
            character: 'Sdfvds'
        }
    ];
    return Avengers;
});
app.controller('AvengersCtrl', function($scope, Avengers){
    $scope.avengers = Avengers;
});

Выводим в таблице все значения и фильтруем их с помощью search.

<html ng-app="myApp">
 <head>
 </head>
 <body>
        <div ng-controller="AvengersCtrl">
            <input type="text" ng-model="search"/>
            <table>
                <tr ng-repeat="actor in avengers.cast | filter: search">
                    <td>{{ actor.name }}</td>
                    <td>{{ actor.character }}</td>
                </tr>
            </table>
        </div>
   <script src="/путь/до/angular.js"></script>
   <script src="/путь/до/main.js"></script>
   </body>
</html>

Так же можно фильтровать только по name(ng-model="search.name"), по character(ng-model="search.character") или по обоим сразу(ng-model=»search.$»)

Встроенные фильтры

В main.js без изменений

var app = angular.module('myApp', []);
app.factory('Avengers', function () {
    var Avengers = {};
    Avengers.cast = [
        {
            name: 'Roma',
            character: 'Rdfvbbdf'
        },
        {
            name: 'Sasha',
            character: 'SDFSDffsdfsd'
        },
        {
            name: 'Tanya',
            character: 'Sdfvds'
        }
    ];
    return Avengers;
});
app.controller('AvengersCtrl', function($scope, Avengers){
    $scope.avengers = Avengers;
});

Выводим в таблице все значения и фильтруем их с помощью search.

<html ng-app="myApp">
 <head>
 </head>
 <body>
        <div ng-controller="AvengersCtrl">
            <input type="text" ng-model="search"/>
            <table>
                <tr ng-repeat="actor in avengers.cast | orderBy: 'name'">
                    <td>{{ actor.name }}</td>
                    <td>{{ actor.character }}</td>
                </tr>
            </table>
        </div>
   <script src="/путь/до/angular.js"></script>
   <script src="/путь/до/main.js"></script>
   </body>
</html>

Отсортирует по полю name. Возможные варианты:

orderBy: 'name' сортировка по полю name
orderBy: '-name' обратная сортировка по полю name
limitTo:5 первые пять элементов
limitTo:5 последние пять элементов
orderBy: 'name' | limitTo:5 | filter:search несколько фильтров одновременно