AngularJS
AngularJs: GET запрос
var hostApi = "http://domain.ru/local/api/"; $http.get(hostApi).then(function(answer){ });
AngularJs: Post запрос
$scope.MEMBER.NAME = "Кирилл"; $scope.MEMBER.LAST_NAME = ""; $scope.MEMBER.SECOND_NAME=""; $scope.MEMBER.EMAIL = "me@adeveloper.ru" var req = { method: 'POST', url: $scope.urlRegUser, headers: { 'Content-Type': undefined }, data: $scope.MEMBER } $http(req).success(function(response, status) { console.log(response); })
ну и небольшой комментарий
при такой отправке ловить данные в массиве $_POST бессмыслено он будет пуст
ловим так
$postdata = file_get_contents("php://input"); $arPost = json_decode($postdata,true); $out = print_r($arPost,true); var_dump($out);
AngularJS: Директивы
Параметры изолированного scope:
= — двустороннее связывание
@ — передача значения
< - одностороннее связывание
& — выполнение выражения (Callback)
AngularJS: + Яндекс карты
подключить API яндекс карт
<script src="https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"> </script>
построить маршрут
узнать длину маршрута
AngularJS: Фильтры
Фильтр данных в ангуляре
<div class="container" ng-controller="orderController"> <div class="row"> <label>Фильтр по текстовому полю</lable> <input type="text" ng-model="orderController.filterText"> </div> <div class="row"> <div class="col-md-12" > <table class="table" > <tr ng-repeat="item in orderController.arItems | filter:orderController.filterText"> <td>{{item}}</td> </tr> </table> </div> </div> </div>
AngularJS: Оглавление
AngularJS: Контроллеры
проба пера с ангуляром
Контроллеры (Controller)
<html ng-app="ngApp"> // ... <div class="row row-content" ng-controller="nameController"> </div> // ... </html>
Область видимости контроллера распространяется на тот узел DOM в котором он задекларирован
AngularJS: работа с JSON
Получение данных с сервера в формате JSON
arItems = []; $http.get("http://www.w3schools.com/angular/customers_mysql.php") .then(function (response) { arItems = response.data.records; } );
AngularJS: первое знакомство
Введение
Angular — MVW-фреймворк (JavaScript Framework)
MVW означает Model-View-Whatever (модель — вид — что угодно)
Angular это не просто фреймворк — это подход
- Мы концентрируемся на данных, данные же заботятся об HTML, а мы просто занимаемся программированием приложения.
У приложения есть один модуль app.
angular.module('app', []);
Модули могут храниться и вызываться через переменную. Вот пример хранения модуля в переменной.
var app = angular.module('app', []);
Для описания того, где приложение находится в DOM, а обычно это элемент , нам надо связать атрибут ng-app с модулем. Так мы сообщаем Angular, куда подгрузить наше приложение.
<html ng-app="app"> <head></head> <body></body> </html>
Область видимости
$scope — это автоматический мост между JavaScript и DOM, хранящий синхронизированные данные.
Пример приложения
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>Приложение на базе AngularJS</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script> <script type="text/javascript"> angular.module('app', []); </script> </head> <body> <p>El!te <=> {{ 31000 + 337 }}</p> </body> </html>
вывести приложение должно следующее:
El!te <=> 31337
AngularJS: Service
Я сервисы использую ка модели в которые помещаю методы получения данных от сервера
/** * Created by adeveloper on 04.03.17. */ app.service('NetApi',function($http){ this.baseUrl = null; this.setBaseUrl = function ($base) { this.baseUrl = $base; }; this.getByUrl = function ($url, $handler) { var $params = []; var req = { method: 'POST', url: this.baseUrl+$url, headers: { 'Content-Type': undefined }, data: $params }; return $http(req).success($handler); } });
Использование
NetApi.setBaseUrl("/api/v1/calc/"); NetApi.getByUrl("?",function (answer, status) { console.info(answer); });