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

<html>
   
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body ng-app = "myApp">
	
      <div ng-controller = "myCtrl">
         <input type = "file" file-model = "myFile"/>
         <button ng-click = "uploadFile()">upload me</button>
      </div>
      
      <script>
         var myApp = angular.module('myApp', []);
         
         myApp.directive('fileModel', ['$parse', function ($parse) {
            return {
               restrict: 'A',
               link: function(scope, element, attrs) {
                  var model = $parse(attrs.fileModel);
                  var modelSetter = model.assign;
                  
                  element.bind('change', function(){
                     scope.$apply(function(){
                        modelSetter(scope, element[0].files[0]);
                     });
                  });
               }
            };
         }]);
      
         myApp.service('fileUpload', ['$http', function ($http) {
            this.uploadFileToUrl = function(file, uploadUrl){
               var fd = new FormData();
               fd.append('file', file);
            
               $http.post(uploadUrl, fd, {
                  transformRequest: angular.identity,
                  headers: {'Content-Type': undefined}
               })
            
               .success(function(){
               })
            
               .error(function(){
               });
            }
         }]);
      
         myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
            $scope.uploadFile = function(){
               var file = $scope.myFile;
               
               console.log('file is ' );
               console.dir(file);
               
               var uploadUrl = "/fileUpload";
               fileUpload.uploadFileToUrl(file, uploadUrl);
            };
         }]);
			
      </script>
      
   </body>
</html>

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

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

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

</div>

</body>
</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