AngularJS учебник, уроки

pic_angular

AngularJS расширяет HTML с новыми атрибутами.

AngularJS идеально подходит для одностраничного приложения.

AngularJS легко учить.

Узнайте AngularJS сейчас!

Angular 2

Туториал по AngularJS

Этот учебник разработан специально, чтобы помочь вам как можно быстрее и эффективнее освоить AngularJS.

Первое, вы узнаете основы AngularJS: директивы, выражения, фильтры, модули и контроллеры.

Потом вы узнаете, все, что нужно о AngularJS,а именно: События, DOM формы (ввод, валидация), запросы и многое другое.

Что вы должны знать перед изучением?

Перед тем как начать учить AngularJS вы должны понимать:

HTML
CSS
JavaScript

Ccылки на уроки:

Введение в AngularJS
Установка и тестовое приложение
MVC архитектура
Первое приложение
Примеры использования директив
Выражения
Контроллеры
Фильтры
Таблицы
HTML DOM
Модули
Формы
Вставки
Ajax
Вид
Скоуп
Сервисы
Внедрение зависимости
Пользовательские директивы
Интернализация

Дополнительные cсылки:

Примеры приложений на AngularJS

1
<html>
2

3
   <head>
4
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
5
   </head>
6

7
   <body ng-app = "myApp">
8

9
      <div ng-controller = "myCtrl">
10
         <input type = "file" file-model = "myFile"/>
11
         <button ng-click = "uploadFile()">upload me</button>
12
      </div>
13

14
      <script>
15
         var myApp = angular.module('myApp', []);
16

17
         myApp.directive('fileModel', ['$parse', function ($parse) {
18
            return {
19
               restrict: 'A',
20
               link: function(scope, element, attrs) {
21
                  var model = $parse(attrs.fileModel);
22
                  var modelSetter = model.assign;
23

24
                  element.bind('change', function(){
25
                     scope.$apply(function(){
26
                        modelSetter(scope, element[0].files[0]);
27
                     });
28
                  });
29
               }
30
            };
31
         }]);
32

33
         myApp.service('fileUpload', ['$http', function ($http) {
34
            this.uploadFileToUrl = function(file, uploadUrl){
35
               var fd = new FormData();
36
               fd.append('file', file);
37

38
               $http.post(uploadUrl, fd, {
39
                  transformRequest: angular.identity,
40
                  headers: {'Content-Type': undefined}
41
               })
42

43
               .success(function(){
44
               })
45

46
               .error(function(){
47
               });
48
            }
49
         }]);
50

51
         myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
52
            $scope.uploadFile = function(){
53
               var file = $scope.myFile;
54

55
               console.log('file is ' );
56
               console.dir(file);
57

58
               var uploadUrl = "/fileUpload";
59
               fileUpload.uploadFileToUrl(file, uploadUrl);
60
            };
61
         }]);
62

63
      </script>
64

65
   </body>
66
</html>

Всегда пробуйте код своими руками!

1
<!DOCTYPE html>
2
<html>
3
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
4
<body>
5

6
<div ng-app="">
7

8
<p>Input something in the input box:</p>
9
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
10
<h1>Hello {{name}}</h1>
11

12
</div>
13

14
</body>
15
</html>

Попробовать

AngularJS история

AngularJS был первоначально разработан в 2009 году Мишко Хевери и Адамом Абронсом как программное обеспечение позади сервиса хранения JSON-данных, измеряющихся мегабайтами, для облегчения разработки приложений организациями. Сервис располагался на домене «GetAngular.com» и имел нескольких зарегистрированных пользователей, прежде чем они решили отказаться от идеи бизнеса и выпустить Angular как библиотеку с открытым исходным кодом.

Абронс покинул проект, но Хевери, работающий в Google, продолжает развивать и поддерживать библиотеку с другими сотрудниками Google Игорем Минаром и Войта Джином.

Философия Angular

AngularJS спроектирован с убеждением, что декларативное программирование лучше всего подходит для построения пользовательских интерфейсов и описания программных компонентов, в то время как императивное программирование отлично подходит для описания бизнес-логики. Фреймворк адаптирует и расширяет традиционный HTML, чтобы обеспечить двустороннюю привязку данных для динамического контента, что позволяет автоматически синхронизировать модель и представление. В результате AngularJS уменьшает роль DOM-манипуляций и улучшает тестируемость.

Цели разработки

Отделение DOM-манипуляции от логики приложения, что улучшает тестируемость кода.
Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода.
Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.
Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.

Angular придерживается MVC-шаблона проектирования и поощряет слабую связь между представлением, данными и логикой компонентов. Используя внедрение зависимости, Angular переносит на клиентскую сторону такие классические серверные службы, как видозависимые контроллеры. Следовательно, уменьшается нагрузка на сервер и веб-приложение становится легче.

Материал взят с: https://ru.wikipedia.org/wiki/AngularJS