AngularJS учебник
Начало работы с AngularJS

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap
Поиск…


замечания

AngularJS - это платформа веб-приложений, предназначенная для упрощения разработки приложений на стороне клиента. Эта документация предназначена для углового 1.x , предшественника более современного углового 2 или см. Документацию по переполнению стека для углового 2 .

Версии

Версия Дата выхода
1.6.5 2017-07-03
1.6.4 2017-03-31
1.6.3 2017-03-08
1.6.2 2017-02-07
1.5.11 2017-01-13
1.6.1 2016-12-23
1.5.10 2016-12-15
1.6.0 2016-12-08
1.6.0-РК - 2 2016-11-24
1.5.9 2016-11-24
1.6.0-RC.1 2016-11-21
1.6.0-rc.0 2016-10-26
1.2.32 2016-10-11
1.4.13 2016-10-10
1.2.31 2016-10-10
1.5.8 2016-07-22
1.2.30 2016-07-21
1.5.7 2016-06-15
1.4.12 2016-06-15
1.5.6 2016-05-27
1.4.11 2016-05-27
1.5.5 2016-04-18
1.5.4 2016-04-14
1.5.3 2016-03-25
1.5.2 2016-03-19
1.4.10 2016-03-16
1.5.1 2016-03-16
1.5.0 2016-02-05
1.5.0-РК - 2 2016-01-28
1.4.9 2016-01-21
1.5.0-RC.1 2016-01-16
1.5.0-rc.0 2015-12-09
1.4.8 2015-11-20
1.5.0-beta.2 2015-11-18
1.4.7 2015-09-30
1.3.20 2015-09-30
1.2.29 2015-09-30
1.5.0-beta.1 2015-09-30
1.5.0-beta.0 2015-09-17
1.4.6 2015-09-17
1.3.19 2015-09-17
1.4.5 2015-08-28
1.3.18 2015-08-19
1.4.4 2015-08-13
1.4.3 2015-07-15
1.3.17 2015-07-07
1.4.2 2015-07-07
1.4.1 2015-06-16
1.3.16 2015-06-06
1.4.0 2015-05-27
1.4.0-РК - 2 2015-05-12
1.4.0-RC.1 2015-04-24
1.4.0-rc.0 2015-04-10
1.3.15 2015-03-17
1.4.0-beta.6 2015-03-17
1.4.0-beta.5 2015-02-24
1.3.14 2015-02-24
1.4.0-beta.4 2015-02-09
1.3.13 2015-02-09
1.3.12 2015-02-03
1.4.0-beta.3 2015-02-03
1.3.11 2015-01-27
1.4.0-beta.2 2015-01-27
1.4.0-beta.1 2015-01-20
1.3.10 2015-01-20
1.3.9 2015-01-15
1.4.0-beta.0 2015-01-14
1.3.8 2014-12-19
1.2.28 2014-12-16
1.3.7 2014-12-15
1.3.6 2014-12-09
1.3.5 2014-12-02
1.3.4 2014-11-25
1.2.27 2014-11-21
1.3.3 2014-11-18
1.3.2 2014-11-07
1.3.1 2014-10-31
1.3.0 2014-10-14
1.3.0-rc.5 2014-10-09
1.2.26 2014-10-03
1.3.0-rc.4 2014-10-02
1.3.0-rc.3 2014-09-24
1.2.25 2014-09-17
1.3.0-РК - 2 2014-09-17
1.2.24 2014-09-10
1.3.0-RC.1 2014-09-10
1.3.0-rc.0 2014-08-30
1.2.23 2014-08-23
1.3.0-beta.19 2014-08-23
1.2.22 2014-08-12
1.3.0-beta.18 2014-08-12
1.2.21 2014-07-25
1.3.0-beta.17 2014-07-25
1.3.0-beta.16 2014-07-18
1.2.20 2014-07-11
1.3.0-beta.15 2014-07-11
1.2.19 2014-07-01
1.3.0-beta.14 2014-07-01
1.3.0-beta.13 2014-06-16
1.3.0-beta.12 2014-06-14
1.2.18 2014-06-14
1.3.0-beta.11 2014-06-06
1.2.17 2014-06-06
1.3.0-beta.10 2014-05-24
1.3.0-beta.9 2014-05-17
1.3.0-beta.8 2014-05-09
1.3.0-beta.7 2014-04-26
1.3.0-beta.6 2014-04-22
1.2.16 2014-04-04
1.3.0-beta.5 2014-04-04
1.3.0-beta.4 2014-03-28
1.2.15 2014-03-22
1.3.0-beta.3 2014-03-21
1.3.0-beta.2 2014-03-15
1.3.0-beta.1 2014-03-08
1.2.14 2014-03-01
1.2.13 2014-02-15
1.2.12 2014-02-08
1.2.11 2014-02-03
1.2.10 2014-01-25
1.2.9 2014-01-15
1.2.8 2014-01-10
1.2.7 2014-01-03
1.2.6 2013-12-20
1.2.5 2013-12-13
1.2.4 2013-12-06
1.2.3 2013-11-27
1.2.2 2013-11-22
1.2.1 2013-11-15
1.2.0 2013-11-08
1.2.0-rc.3 2013-10-14
1.2.0-РК - 2 2013-09-04
1.0.8 2013-08-22
1.2.0rc1 2013-08-13
1.0.7 2013-05-22
1.1.5 2013-05-22
1.0.6 2013-04-04
1.1.4 2013-04-04
1.0.5 2013-02-20
1.1.3 2013-02-20
1.0.4 2013-01-23
1.1.2 2013-01-23
1.1.1 2012-11-27
1.0.3 2012-11-27
1.1.0 2012-09-04
1.0.2 2012-09-04
1.0.1 2012-06-25
1.0.0 2012-06-14
v1.0.0rc12 2012-06-12
v1.0.0rc11 2012-06-11
v1.0.0rc10 2012-05-24
v1.0.0rc9 2012-05-15
v1.0.0rc8 2012-05-07
v1.0.0rc7 2012-05-01
v1.0.0rc6 2012-04-21
v1.0.0rc5 2012-04-12
v1.0.0rc4 2012-04-05
v1.0.0rc3 2012-03-30
v1.0.0rc2 2012-03-21
g3-v1.0.0rc1 2012-03-14
g3-v1.0.0-RC2 2012-03-16
1.0.0RC1 2012-03-14
0.10.6 2012-01-17
0.10.5 2011-11-08
0.10.4 2011-10-23
0.10.3 2011-10-14
0.10.2 2011-10-08
0.10.1 2011-09-09
0.10.0 2011-09-02
0.9.19 2011-08-21
0.9.18 2011-07-30
0.9.17 2011-06-30
0.9.16 2011-06-08
0.9.15 2011-04-12
0.9.14 2011-04-01
0.9.13 2011-03-14
0.9.12 2011-03-04
0.9.11 2011-02-09
0.9.10 2011-01-27
0.9.9 2011-01-14
0.9.7 2010-12-11
0.9.6 2010-12-07
0.9.5 2010-11-25
0.9.4 2010-11-19
0.9.3 2010-11-11
0.9.2 2010-11-03
0.9.1 2010-10-27
0.9.0 2010-10-21

Начиная

Создайте новый HTML-файл и вставьте следующий контент: 

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello, Angular</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
  <label>Name</label>
  <input ng-model="name" />
  <span>Hello, {{ name }}!</span>
  <p ng-bind="name"></p>
</body>
</html>

Демо-версия

Когда вы открываете файл в браузере, вы увидите поле ввода, за которым следует текст Hello, World! , Редактирование значения на входе будет обновлять текст в режиме реального времени, без необходимости обновлять всю страницу.

Объяснение:

  1. Загрузите угловую структуру из сети доставки контента. 

    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>

  2. Определить HTML-документ в виде углового приложения с помощью директивы ng-app 

    <html ng-app>

  3. Инициализировать переменную name с помощью ng-init 

    <body ng-init=" name = 'World' ">

    Обратите внимание, что ng-init следует использовать только для демонстрационных и тестовых целей. При создании реального приложения контроллеры должны инициализировать данные.

  4. Свяжите данные с модели с представлением на элементах управления HTML. Привязать <input> к свойству name с ng-model 

    <input ng-model="name" />

  5. Отображать содержимое из модели с помощью двойных фигурных скобок {{ }} 

    <span>Hello, {{ name }}</span>

  6. Другим способом привязки свойства name является использование ng-bind вместо handlebars "{{ }}" 

     <span ng-bind="name"></span>

Последние три шага устанавливают двустороннюю привязку данных . Изменения, внесенные на вход, обновляют модель , которая отражается в представлении .

Существует разница между использованием рулей и ng-bind . Если вы используете рули, вы можете увидеть фактический Hello, {{name}} поскольку страница загружается до того, как выражение будет разрешено (перед загрузкой данных), тогда как если вы используете ng-bind , он будет показывать только данные, когда имя разрешается. В качестве альтернативы директиву ng-cloak можно использовать для предотвращения отображения рулей перед его компиляцией.

Отображение всех общих угловых конструкций

В следующем примере показаны общие конструкции AngularJS в одном файле: 

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <style>.started { background: gold; }</style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
      function MyDataService() {
        return {
          getWorlds: function getWorlds() {
            return ["this world", "another world"];
          }
        };
      }

      function DemoController(worldsService) {
        var vm = this;
        vm.messages = worldsService.getWorlds().map(function(w) {
          return "Hello, " + w + "!";
        });
      }

      function startup($rootScope, $window) {
        $window.alert("Hello, user! Loading worlds...");
        $rootScope.hasStarted = true;
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .service("worldsService", [MyDataService])
        .controller("demoController", ["worldsService", DemoController])
        .config(function() {
          console.log('configuring application');
        })
        .run(["$rootScope", "$window", startup]);
    </script>
  </head>
  <body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul>
        <li ng-repeat="msg in vm.messages">{{ msg }}</li>
      </ul>
    </div>
  </body>
</html>

Ниже описана каждая строка файла:

Демо-версия

  1. ng-app="myDemoApp" , директива ngApp, которая загружает приложение и сообщает угловым, что элемент DOM управляется определенным angular.module именем "myDemoApp" ;
  2. <script src="angular.min.js"> - первый шаг в начальной загрузке библиотеки AngularJS ;

MyDataService три функции ( MyDataService , DemoController и startup ), которые используются (и объясняются) ниже.

  1. angular.module(...) используемый с массивом, поскольку второй аргумент создает новый модуль. Этот массив используется для предоставления списка зависимостей модулей. В этом примере мы вызываем вызовы на результат функции module(...) ;

  2. .service(...) создает .service(...) службу и возвращает модуль для цепочки;

  3. .controller(...) создает угловой контроллер и возвращает модуль для цепочки;

  4. .config(...) Используйте этот метод для регистрации работы, которая должна выполняться при загрузке модуля.

  5. .run(...) гарантирует, что код запускается во время запуска и принимает в качестве параметра массив элементов. Используйте этот метод для регистрации работы, которая должна выполняться при выполнении инжектора, загружая все модули.

    • первый элемент позволяет Angular знать, что для функции startup требуется, чтобы встроенная служба $rootScope была введена в качестве аргумента;
    • второй элемент позволяет Angular знать, что функция startup требует, чтобы встроенная служба $window была введена в качестве аргумента;
    • последний элемент в массиве, startup , является фактической функцией для запуска при запуске;

  6. ng-class - это директива ngClass для установки динамического class , и в этом примере используется hasStarted на $rootScope динамически

  7. ng-cloak - это директива по предотвращению ненанесенного шаблона Angular html (например, « {{ msg }} »), который должен быть кратко показан до того, как Angular полностью загрузит приложение.

  8. ng-controller - это директива, которая запрашивает угловое создание нового контроллера определенного имени для организации этой части DOM;

  9. ng-repeat - это директива, чтобы сделать угловую итерацию по коллекции и клонировать шаблон DOM для каждого элемента;

  10. {{ msg }} демонстрирует интерполяцию : на месте рендеринга части области или контроллера;

Важность сферы

Поскольку Angular использует HTML для расширения веб-страницы и простого Javascript для добавления логики, упрощает создание веб-страницы с помощью ng-app , ng-controller и некоторых встроенных директив, таких как ng-if , ng-repeat и т. Д. . С новым синтаксисом controllerAs новички для пользователей Angular могут присоединить функции и данные к своему контроллеру вместо использования $scope .

Тем не менее, рано или поздно, это важно , чтобы понять , что именно это $scope вещь. Он будет отображаться в примерах, поэтому важно иметь некоторое понимание.

Хорошей новостью является то, что это простая, но мощная концепция.

Когда вы создаете следующее: 

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>

Где живет имя ?

Ответ заключается в том, что Angular создает объект $rootScope . Это просто обычный объект Javascript, поэтому имя является свойством объекта $rootScope : 

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });

И так же, как с глобальным охватом в Javascript, обычно не так хорошо добавлять элементы в глобальную область или $rootScope .

Конечно, большую часть времени мы создаем контроллер и помещаем необходимые функции в этот контроллер. Но когда мы создаем контроллер, Angular делает его магическим и создает объект $scope для этого контроллера. Это иногда называют локальной областью .

Итак, создав следующий контроллер: 

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>

позволит доступ к локальной области с помощью параметра $scope . 

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });

По какой-то причине контроллер без параметра $scope может просто не понадобиться. Но важно понимать, что даже с синтаксисом controllerAs существует локальная область.

Поскольку $scope является объектом JavaScript, Angular волшебным образом устанавливает его для прототипного наследования с $rootScope . И, как вы можете себе представить, может быть цепочка областей. Например, вы можете создать модель в родительском контроллере и приложить к ней область действия родительского контроллера как $scope.model .

Затем через цепочку прототипов дочерний контроллер может получить доступ к этой же модели локально с помощью $scope.model .

Ничего из этого изначально не видно, так как это просто Угловая, делающая свою магию на заднем плане. Но понимание $scope - важный шаг в том, чтобы узнать, как работает Angular.

Самый простой возможный угловой мир Hello.

Угловой 1 - это компилятор DOM. Мы можем передать его HTML, либо как шаблон, либо как обычную веб-страницу, а затем скомпилировать приложение.

Мы можем сказать, что Angular обрабатывает область страницы как выражение, используя синтаксис стиля {{ }} . Все, что между фигурными фигурными скобками будет скомпилировано, вот так: 

{{ 'Hello' + 'World' }}

Это приведет к выводу: 

HelloWorld

нг-приложение

Мы указываем Angular, какую часть нашей DOM обрабатываем как главный шаблон, используя директиву ng-app . Директива - это настраиваемый атрибут или элемент, которые компилятор Angular template знает, как справиться. Теперь добавим директиву ng-app: 

<html>
  <head>
    <script src="/angular.js"></script>
  </head>
  <body ng-app>
    {{ 'Hello' + 'World' }}
  </body>
</html>

Я теперь сказал, что элемент body является корневым шаблоном. Все, что в нем будет скомпилировано.

Директивы

Директивы - это директивы компилятора. Они расширяют возможности компилятора Angular DOM. Вот почему Misko , создатель Angular, описывает Angular как:

«Каким бы веб-браузером он был создан для веб-приложений.

Мы в буквальном смысле создаем новые атрибуты и элементы HTML и имеем Angular для их компиляции в приложение. ng-app - это директива, которая просто включает компилятор. Другие директивы включают:

  • ng-click , который добавляет обработчик кликов,
  • ng-hide , который условно скрывает элемент и
  • <form> , который добавляет дополнительное поведение в стандартный элемент формы HTML.

Угловое устройство содержит около 100 встроенных директив, которые позволяют выполнять большинство обычных задач. Мы также можем написать свои собственные, и они будут рассматриваться так же, как встроенные директивы.

Мы создаем Угловое приложение из ряда директив, связанных с HTML.

Минимизация в угловом

Что такое Minification?

Это процесс удаления всех ненужных символов из исходного кода без изменения его функциональности.

Нормальный синтаксис

Если мы используем нормальный угловой синтаксис для написания контроллера, то после миниатюр наших файлов он нарушит нашу функциональность.

Контроллер (до сведения): 

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});

После использования инструмента минимизации он будет уменьшен, как показано ниже. 

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})

Здесь minification удалили ненужные пробелы и переменную $ scope из кода. Поэтому, когда мы используем этот минитипированный код, он не собирается печатать что-либо на виду. Поскольку $ scope является важной частью между контроллером и представлением, который теперь заменяется небольшой переменной «e». Поэтому, когда вы запускаете приложение, оно будет выдавать ошибку зависимостей Unknown Provider 'e'.

Существует два способа аннотирования кода с информацией о названии службы, которая безопасна для минимизации:

Встроенный синтаксис аннотации 

var app = angular.module('mainApp', []);    
app.controller('FirstController', ['$scope', function($scope) {
    $scope.message = 'Hello World !'; 
}]);

$ inject Синтаксис объявления объявления 

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
    $scope.message = 'Hello World !'; 
}

var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);

После переоценки этот код будет 

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);

Здесь угловое будет рассматривать переменную 'a', которая будет рассматриваться как $ scope, и будет отображать вывод как «Hello World!».

AngularJS Начало работы Видеоуроки

Есть много хороших видеоуроков для рамки AngularJS на egghead.io

введите описание изображения здесь



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow