9 |
10 | В реализации MVC в Angular, вид знает и о модели, и о контроллере.
11 | Вид знает о модели через двухстороннее связывание данных. Вид знает о контроллере через директивы, такие как {@link api/ng.directive:ngController
12 | ngController} и {@link api/ng.directive:ngView ngView}, и через привязки этой форме:
13 | `{{какаятоФункцияКонтроллера()}}`. В этом смысле, вид может вызывать функции в связанной Функцияи контроллера.
14 |
15 | ## Связанные разделы
16 |
17 | * {@link dev_guide.mvc About MVC в Angular}
18 | * {@link dev_guide.mvc.understanding_model Модель}
19 | * {@link dev_guide.mvc.understanding_controller Контроллер}
20 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.services.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Сервисы Angular
3 | @description
4 |
5 | Сервисы это функции, которые раньше выполнялись только на сервере. Angular же перенес их на клиентскую сторону.
6 | Сервисы в Angular-приложениях являются замещаемыми объектами, которые взаимодействуют друг с другом с помощью
7 | {@link di внедрения зависимости}.
8 |
9 |
10 | ## Связанные разделы
11 |
12 | * {@link dev_guide.services.understanding_services Понимание сервисов}
13 | * {@link dev_guide.services.creating_services Создание сервисов в Angular}
14 | * {@link dev_guide.services.managing_dependencies Управление зависимостями сервисов}
15 | * {@link dev_guide.services.injecting_controllers Внедрение сервисов в контроллеры}
16 | * {@link dev_guide.services.testing_services Тестирование сервисов в Angular}
17 |
18 | ## Связанное API
19 |
20 | * {@link api/ng API сервисов в Angular}
21 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.services.testing_services.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Angular Services: Тестирование сервисов
3 | @description
4 |
5 | Ниже приведен модульный тест для сервиса «notify» в примере «Зависимостей» в разделе {@link
6 | dev_guide.services.creating_services Создание сервисов}. Пример модульного теста использует Jasmine
7 | spy (макет) вместо реальных браузерных сообщений (alert).
8 |
9 |
10 | var mock, notify;
11 |
12 | beforeEach(function() {
13 | mock = {alert: jasmine.createSpy()};
14 |
15 | module(function($provide) {
16 | $provide.value('$window', mock);
17 | });
18 |
19 | inject(function($injector) {
20 | notify = $injector.get('notify');
21 | });
22 | });
23 |
24 | it('should not alert first two notifications', function() {
25 | notify('one');
26 | notify('two');
27 |
28 | expect(mock.alert).not.toHaveBeenCalled();
29 | });
30 |
31 | it('should alert all after third notification', function() {
32 | notify('one');
33 | notify('two');
34 | notify('three');
35 |
36 | expect(mock.alert).toHaveBeenCalledWith("one\ntwo\nthree");
37 | });
38 |
39 | it('should clear messages after alert', function() {
40 | notify('one');
41 | notify('two');
42 | notify('third');
43 | notify('more');
44 | notify('two');
45 | notify('third');
46 |
47 | expect(mock.alert.callCount).toEqual(2);
48 | expect(mock.alert.mostRecentCall.args).toEqual(["more\ntwo\nthird"]);
49 | });
50 |
51 |
52 |
53 | ## Связанные разделы
54 |
55 | * {@link dev_guide.services.understanding_services Понимание сервисов}
56 | * {@link dev_guide.services.creating_services Создание сервисов}
57 | * {@link dev_guide.services.managing_dependencies Управление зависимостями сервисов}
58 | * {@link dev_guide.services.injecting_controllers Внедрение сервисов в контроллеры}
59 |
60 | ## Связанное API
61 |
62 | * {@link api/ng API сервисов}
63 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.services.understanding_services.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Сервисы Angular: Понимание сервисов
3 | @description
4 |
5 | Сервисы Angular это одиночки (singletons — классы, у которых есть только один экземпляр), которые выполняют
6 | конкретные задачи, общие для веб-приложений, например, {@link api/ng.$http $http сервис} предоставяет
7 | низкоуровневый доступ к браузерному объекту `XMLHttpRequest`.
8 |
9 | Чтобы использовать сервис Angular, необходимо обозначить его в списке зависимостей контроллера или
10 | другого сервиса. Система внедрения зависимости в Angular позаботится об остальном. Система инжектора отвечает
11 | за создание экземпляра сервиса, разрешение зависимостей и предоставление зависимостей фабричным функциям по запросу.
12 |
13 | Angular внедряет зависимости, используя «конструктор» инъекций (этот сервис передается через фабричную
14 | функцию). Поскольку JavaScript динамически типизированный язык, система внедрения зависимости в Angular
15 | не может использовать статические типы для определения зависимости сервисов. По этой причине необходимо
16 | явно определить зависимости с помощью свойства `$inject`. Например:
17 |
18 | myController.$inject = ['$location'];
19 |
20 | Angular поставляется с сервисами для стандартных операций. Как и другие основные переменные и идентификаторы,
21 | встроенные сервисы всегда начинаются с `$` (например, `$http` упомянутый выше). Также можно создавать свои
22 | собственные сервисы.
23 |
24 |
25 | ## Связанные разделы
26 |
27 | * {@link di Внедрение зависимости в Angular}
28 | * {@link dev_guide.services.creating_services Создание сервисов в Angular}
29 | * {@link dev_guide.services.managing_dependencies Управление зависимостями сервисов}
30 | * {@link dev_guide.services.testing_services Тестирование сервисов в Angular}
31 |
32 | ## Связанное API
33 |
34 | * {@link api/ng API сервисов в Angular}
35 | * {@link api/angular.injector API инжектора}
36 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.templates.css-styling.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Templates: Работа с CSS
3 | @description
4 |
5 |
6 | Angular устанавливает собственные CSS-классы. Это делается для того, чтобы приложение можно было удобно стилизовать.
7 |
8 | # CSS-класс, которые использует Angular
9 |
10 | * `ng-invalid`, `ng-valid`
11 | - **Применение:** Angular применяет этот класс для виджета поля ввода, если введенное значение проходит или не проходит проверку (см. директиву {@link api/ng.directive:input input}).
12 |
13 | * `ng-pristine`, `ng-dirty`
14 | - **Применение:** директива {@link api/ng.directive:input input} применяет класс `ng-pristine` к новым виджетам полей ввода, которые еще не изменялись пользователем. После того как пользователь что-то изменит, класс поменяется на `ng-dirty`.
15 |
16 | ## Связанные разделы
17 |
18 | * {@link dev_guide.templates Шаблоны}
19 | * {@link forms Формы}
20 |
--------------------------------------------------------------------------------
/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc:
--------------------------------------------------------------------------------
1 | @ngdoc overview
2 | @name Developer Guide: Templates: Filters: Создание фильтров
3 | @description
4 |
5 | Написать собственный фильтр очень просто: достаточно зарегистрировать новый фильтр (внедренный) фабричной функцией
6 | в ваш модуль. Фабричная функция должна возвращать новую функцию фильтра, которая принимает входное значение
7 | в качестве первого аргумента. Любые аргументы фильтра передаются в качестве дополнительных аргументов в
8 | функцию фильтра.
9 |
10 | Следующий пример фильтра переворачивает текстовую строку. Кроме того, он опционально преобразует текст в
11 | верхний регистр.
12 |
13 | This page is currently unavailable because your are offline.
4 |Please connect to the Internet and reload the page.
5 | -------------------------------------------------------------------------------- /example/buzz/buzz.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: -webkit-gradient(linear, left top, left 100, from(#bbb), to(#fff)); 3 | background-repeat: no-repeat; 4 | margin: 0px; 5 | font-family: sans-serif; 6 | font-size: 12px; 7 | } 8 | 9 | body > div { 10 | border-top: 1px solid white; 11 | border-bottom: 1px solid black; 12 | text-align: center; 13 | background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#888)); 14 | -webkit-background-origin: padding; -webkit-background-clip: content; 15 | } 16 | body > div button { 17 | margin: 5px; 18 | } 19 | 20 | body > div span:FIRST-CHILD { 21 | float: left; 22 | font-family: monospace; 23 | font-size: 1.5em; 24 | color: black; 25 | padding: 2px 5px; 26 | } 27 | 28 | body > div span:last-child { 29 | float: right; 30 | } 31 | 32 | ul { 33 | list-style: none; 34 | padding: 10px; 35 | margin: 0; 36 | } 37 | 38 | body > ul > li { 39 | border: 1px solid black; 40 | margin: 15px 5px; 41 | padding: 0; 42 | -webkit-box-shadow: 5px 5px 5px #888; 43 | } 44 | 45 | body > ul > li > h1 { 46 | margin: 0; 47 | background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999)); 48 | font-size: 13px; 49 | border-bottom: 1px solid black; 50 | } 51 | 52 | h1 > img, 53 | li > img { 54 | max-height: 30px; 55 | max-width: 30px; 56 | vertical-align: middle; 57 | padding: 3px; 58 | } 59 | 60 | a > img { 61 | margin-right: 5px; 62 | margin-top: 5px; 63 | } 64 | 65 | body > ul > li > h1 > a:last-child { 66 | float: right; 67 | margin: 10px; 68 | } 69 | 70 | body > ul > li > div { 71 | background-color: white; 72 | background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); 73 | margin: 0; 74 | padding: 10px; 75 | } 76 | 77 | body > ul > li ul { 78 | margin: 0; 79 | padding: 0; 80 | margin-left: 5px; 81 | border-left: 5px solid lightgray; 82 | } 83 | 84 | body > ul > li ul > li { 85 | margin: 0; 86 | padding: 10px; 87 | background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); 88 | } 89 | 90 | -------------------------------------------------------------------------------- /example/buzz/buzz.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |23 | view1 | view2 | blank 24 |
25 | 26 |tweets=(TODO: display me!!!)33 | 34 | 35 | -------------------------------------------------------------------------------- /example/tweeter/tweeterclient.js: -------------------------------------------------------------------------------- 1 | function noop() {} 2 | $(document).ready(function() { 3 | function xhr(method, url, data, callback){ 4 | jQuery.getJSON(url, function() { 5 | callback.apply(this, arguments); 6 | scope.updateView(); 7 | }); 8 | } 9 | 10 | var resourceFactory = new ResourceFactory(xhr); 11 | 12 | var Tweeter = resourceFactory.route("http://twitter.com/statuses/:service:username.json", {}, { 13 | home: {method:'GET', params: {service:'home_timeline'}, isArray:true }, 14 | user: {method:'GET', params: {service:'user_timeline/'}, isArray:true } 15 | }); 16 | 17 | 18 | var scope = window.scope = angular.compile(document, { 19 | location:angular.startUrlWatcher() 20 | }); 21 | 22 | function fetchTweets(username){ 23 | return username ? Tweeter.user({username: username}) : Tweeter.home(); 24 | } 25 | 26 | scope.set('fetchTweets', fetchTweets); 27 | scope.set('users', [ 28 | {screen_name:'mhevery', name:'Mi\u0161ko Hevery', 29 | notes:'Author of
myStyle={{myStyle}}
22 |
20 | * // Дано:
21 | * // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
22 | * // Маршрут: /Chapter/:chapterId/Section/:sectionId
23 | * //
24 | * // Тогда
25 | * $routeParams ==> {chapterId:1, sectionId:2, search:'moby'}
26 | *
27 | */
28 | function $RouteParamsProvider() {
29 | this.$get = valueFn({});
30 | }
31 |
--------------------------------------------------------------------------------
/src/ng/window.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @ngdoc object
5 | * @name ng.$window
6 | *
7 | * @description
8 | * Просто ссылка на объект браузера `window`. Хотя `window` и доступен глобально в JavaScript,
9 | * при его использовании возникает проблема при тестировании, т.к. он является глобальной переменной.
10 | * В Angular мы всегда ссылаемся на него через сервис `$window`, т.к. в этом случае его можно переопределить,
11 | * удалить или заменить другим при тестировании.
12 | *
13 | * Любые выражения, вычисляемые в любой области видимости не должны работать с глобальным объектом `window`.
14 | *
15 | * @example
16 |