Tutorial AngularJS: A Comprehensive Guide, Part 2
Part 1
$ rootScope is not much different from $ scope, it's just the top-level $ scope object from which all other scopes originate. When Angular starts creating your application, it creates a $ rootScope object, and all bindings and application logic create $ scope objects that are inherited from $ rootScope.
Usually we do not use $ rootScope, but with its help we can provide data transfer between different scopes.
The controller allows you to interact View and Model. This is where the presentation logic synchronizes the interface with the model. The purpose of the Controller is to trigger changes in Model and Video. In Controller, Angular brings together the business logic and presentation logic.
')
We have already touched controllers by declaring the ng-controller attribute to display the $ scope data. This attribute links the scope and instance of the Controller, and provides access to the data and methods of the Controller from the DOM.
Before using the controller, you must create it. We use the material already covered:
The controller takes two arguments — a name by which it can be referenced, and a callback function. In this case, in fact, it will be a function that describes the body of the controller.
So that the Angular methods do not look like callbacks, I allocate functions outside the Angular syntax.
So it looks cleaner and easier to read. I called the function MainCtrl because the named functions are easier to debug.
The following examples imply that the module was created.
The purpose of the Controller is to interpret the business logic of the model and convert it into a presentation format. In Angular, this can be done in different ways, depending on how we receive the data.
The controller communicates with the Service, and transfers data in the same or modified format to our View through the $ scope object. When the View is updated, the Controller's logic is also updated, and it can be sent back to the server via the Service. But first, we will create several objects in the Controller and associate them with $ scope to figure out how the Controller works. We will not paint the business logic; for brevity, we will add it below and receive data from the Service.
With $ scope we bind an array. After that, it will be available in the DOM, where it can be passed to one of the built-in Angular Directives, ng-repeat, to loop through the data and create a structure in the DOM based on the template and data.
Controllers are similar to classes, but using them through $ scope objects is not like using classes. They suggested using the this keyword instead of $ scope. Angular developers have introduced this feature within controllerAs syntax, where the Controller is made up as an instance stored in a variable - much like using new with a variable to create a new object.
We omit the $ scope call and use this.
Then we add “as” where we need to create an instance of the Controller in the DOM.
The entry MainCtrl as main means that all data is in the variable main, therefore items from the last example are turned into main.items.
So it is clearer to which controller the property belongs, when we have many controllers or nested controllers. In addition, it helps to avoid name conflicts.
Each $ scope created has an $ parent object. Without using controllerAs, we would need to use references to $ parent for any methods in the scope of $ parent, and $ parent. $ Parent for the area to a higher level, and so on. Now we can just use the variable name.
Services allow you to store data Models and business logic, for example, communicating with the server via HTTP. Services and Factories are often confused - the difference is in how the corresponding objects are created.
It is important to remember that all Services are singletones, there is only one Service for each injection. By convention, the names of the Services are given in Pascal style, that is, “my service” is written as “MyService”.
6.1 Service method
The method creates a new object that communicates with the backend and provides tools for working with business logic. A service is an object of constructor that is called through the keyword new, in connection with which our logic is connected to the service using the keyword this. Service creates a singleton object.
Now you can insert the Service into the Controller.
Before the Service, you cannot execute code, since all methods are created as objects. The Factory is different.
The factory methods return an object or a function, so we can use closures, or return a host object to which we can bind methods. You can create private and public scopes. All Factories are becoming Services, which is why we call them so.
We will recreate the UserService from the example, for comparison using the factory method.
With closures, you can emulate a private scope. It would be possible to create something similar inside the service constructor method, but here you can see what comes back and what remains inside the scope of the Service. You can also create private helper functions that remain in scope when the function has already returned, and you can use them from public methods. Inside the Controller, such Services are used in the same way.
Services are usually used not for the presentation logic, but for the business logic layer. This is a backend communication via REST over Ajax.
While we looked at the programmer side of Angular, but did not show how it can be used from HTML. The next step is to use the powerful features of template making.
Angular expressions are JavaScript-like snippets that can be used in templates to make conditional changes to the DOM — both in the elements and their properties, as well as in the text. They live inside {{}} links and are executed within $ scope. There are no loops or if / else, and we cannot throw exceptions. You can do only small operations or call the values of $ scope properties.
For example, {{value}} is an expression. In expressions, you can use logical operators like || and &&, or the ternary operator value? true: false.
With their help, you can create flexible templates and update variables without reloading pages.
You can get the length of the array by declaring an expression using the length property.
Angular will replace length by value, and we will see “4 pcs. in stock"
After this usage, the values are automatically linked inside Angular, so any updates affect the value of the expressions. If we remove one item from the array, the appearance will automatically be updated to “3 pcs. in stock". No fuss, no extra callbacks.
There is a whole bunch of directives prefixed with ng- *. Let's start with ng-click and tie the function to a new piece of the HTML template. In the example, I go through the array and show the quantity of goods in stock.
The ng-click attribute is associated with the main.removeFromStock () function. I give her the goods that we are currently processing in a cycle. The $ index property is useful for removing items from an array — we don't need to manually count the index of the current item.
Now the function can be added to the controller. $ Index and the array element are passed to the function, and the method does the following:
When creating methods, it is necessary to take into account that the value of this can differ, depending on the use and execution context. I usually create a link to the controller as
This is how the presentation logic that works with the interface is created. Only one step is missing - updating the Model. Before removing an element from vm.items, we must send a DELETE request to the backend, and after a successful response, remove it from the array. Then the DOM will be updated only in case of successful processing of the request and will not mislead the user.
Although the template engine is powerful enough, you should always remember about the possibilities of code reuse in future programs. Directives are well suited for this.
There are two types of Directives - some work with bundles inside Angular, and others we create ourselves. A directive can do anything - provide logic for a given element, or itself be an element and provide a template with logic within itself. Idea Directives in extending the capabilities of HTML.
Look at the built-in directives Angular, then try to create your own.
We have already met her, so I will give only a simple example.
ng-repeat copies the element and reproduces it, filling the data of objects from the array. If you delete an item from an array, the DOM will be updated automatically.
Used to initialize a new nonexistent model, or to bind an existing one.
If the $ scope main.message property contains a value, it will be passed to input. If there is no such value in $ scope, it will simply be initialized. We can pass these values to other directives, for example in ng-click.
Its beauty is that we don’t need to hang event handlers ourselves. Angular itself will calculate the value of the expression inside the directive and hang the handler on the event. Unlike onClick = '', the ng-click directive belongs to its scope, i.e. is not global.
Here I pass main.message to the main.showMessage method, and there Angular treats it as a simple JavaScript object. This is the beauty of Angular - all the data bundles in the DOM are objects, we can simply parse them, manipulate them, convert them to JSON and send them to the backend.
In order for Angular to take care of the features of browsers with the href and src parameters, we use ng-href = "and ng-src =" instead.
This Directive looks like a description of the properties and values of the object. Instead of the traditional calls elem.addClass (className) and elem.removeClass (className), Angular adds and deletes classes based on the given expressions.
Angular finds out the value of main.response and adds a warning or ok class depending on it.
These guidelines are often found when using Angular. This is a convenient way to show and hide data depending on the value of the property.
To switch the visibility of an item, we use ng-click.
The only difference is that ng-show or ng-hide determines whether the element should initially be visible or hidden.
ng-if does not just hide the elements, but deletes them. If the element needs to be recreated after changing the value of the property, a new $ scope is created for it. It also has a positive effect on the speed of the framework.
Directive similar to the case / switch statement in programming, or advanced ng-if. Depending on the value of $ scope, one of several elements is selected.
Values can be inserted into the DOM using the {{value}} syntax, but there is another option, ng-bind. The differences in syntax can be seen in the example.
ng-bind can be used to avoid blinking when the page loads. Angular automatically hides content that is loaded through Directives. When using curly brackets, they may be visible in the text of the document. When using ng-bind, inserts are not visible until Angular calculates the desired values.
Single-page applications use one page without reloading, the content of which is updated automatically. This is achieved using the ng-view attribute with an empty element like, which serves as a container for any dynamically inserted code received via XMLHttpRequest.
Different Views are inserted into the ng-view, depending on the path in the URL. For example, you can tell Angular to insert login.html if the URL contains myapp.com/#/login, and change the content as the URL changes.
Although the built-in Directives add functionality to HTML, it is sometimes necessary to add your own functions to further extend the capabilities. Consider an API for creating your directives.
Customizable Directives are one of the most complex concepts in the Angular API, because they do not look like familiar software concepts. They play the role of Angular to implement the concept of the web of the near future - custom elements, shadow DOM, templates and HTML import. Let's gradually examine the Directives, breaking them into layers.
NEs are used in cases of code reuse or template code, when we can declare one element, and the code associated with it will automatically be attached to it.
Angular has four ways to use Directives - Custom Elements, Custom Attributes, Class Names and Comments. The last two I try to avoid, because they are easy to get confused, and besides, comments have problems with IE. The safest and cross-browser way - Custom attributes. Let's look at these methods in the following order: Element, Attribute, Class, Comment.
Directives have a restrict property through which you can limit their use to one of these methods. By default, Directives are used via 'EA', which means Element, Attribute. Other options are C for classes and M for comments.
Shadow DOM works in such a way that within certain parts of a regular DOM document there are attached documents. They support HTML, CSS, and JavaScript scope.
In the Shadow DOM, you can define both pure HTML and content to be imported into it. We can put the text in the Custom item:
And the text "Hello, everyone!" Is available in the Shadow DOM.
There are three different ways to use patterns in directives. Two are almost the same, and the third stores the pattern in the string.
Announces the desired template. The template is formatted as a string, and then Angular compiles it and inserts it into the DOM.
Example:
When using this approach, it is convenient to enter the JavaScript logic between the lines. I use a construct with [] .join (""), it makes the text more readable.
The templateUrl property allows you to point to an external resource or element
$ 4.1 rootScope
$ rootScope is not much different from $ scope, it's just the top-level $ scope object from which all other scopes originate. When Angular starts creating your application, it creates a $ rootScope object, and all bindings and application logic create $ scope objects that are inherited from $ rootScope.
Usually we do not use $ rootScope, but with its help we can provide data transfer between different scopes.
5 controllers
The controller allows you to interact View and Model. This is where the presentation logic synchronizes the interface with the model. The purpose of the Controller is to trigger changes in Model and Video. In Controller, Angular brings together the business logic and presentation logic.
')
We have already touched controllers by declaring the ng-controller attribute to display the $ scope data. This attribute links the scope and instance of the Controller, and provides access to the data and methods of the Controller from the DOM.
Before using the controller, you must create it. We use the material already covered:
angular .module('app', []) .controller('MainCtrl', function () { }); The controller takes two arguments — a name by which it can be referenced, and a callback function. In this case, in fact, it will be a function that describes the body of the controller.
So that the Angular methods do not look like callbacks, I allocate functions outside the Angular syntax.
function MainCtrl () { } angular .module('app', []) .controller('MainCtrl', MainCtrl); So it looks cleaner and easier to read. I called the function MainCtrl because the named functions are easier to debug.
The following examples imply that the module was created.
5.1 Methods and logic of presentations
The purpose of the Controller is to interpret the business logic of the model and convert it into a presentation format. In Angular, this can be done in different ways, depending on how we receive the data.
The controller communicates with the Service, and transfers data in the same or modified format to our View through the $ scope object. When the View is updated, the Controller's logic is also updated, and it can be sent back to the server via the Service. But first, we will create several objects in the Controller and associate them with $ scope to figure out how the Controller works. We will not paint the business logic; for brevity, we will add it below and receive data from the Service.
function MainCtrl ($scope) { $scope.items = [{ name: ' ', id: 7297510 },{ name: '', id: 0278916 },{ name: '', id: 2389017 },{ name: '', id: 1000983 }]; } angular .module('app') .controller('MainCtrl', MainCtrl); With $ scope we bind an array. After that, it will be available in the DOM, where it can be passed to one of the built-in Angular Directives, ng-repeat, to loop through the data and create a structure in the DOM based on the template and data.
<div ng-controller="MainCtrl"> <ul> <li ng-repeat="item in items"> {{ item.name }} </li> </ul> </div> 5.2 New syntax “controllerAs”
Controllers are similar to classes, but using them through $ scope objects is not like using classes. They suggested using the this keyword instead of $ scope. Angular developers have introduced this feature within controllerAs syntax, where the Controller is made up as an instance stored in a variable - much like using new with a variable to create a new object.
We omit the $ scope call and use this.
function MainCtrl () { this.items = [{ name: ' ', id: 7297510 },{ name: '', id: 0278916 },{ name: '', id: 2389017 },{ name: '', id: 1000983 }]; } angular .module('app') .controller('MainCtrl', MainCtrl); Then we add “as” where we need to create an instance of the Controller in the DOM.
The entry MainCtrl as main means that all data is in the variable main, therefore items from the last example are turned into main.items.
<div ng-controller="MainCtrl as main"> <ul> <li ng-repeat="item in main.items"> {{ item.name }} </li> </ul> </div> So it is clearer to which controller the property belongs, when we have many controllers or nested controllers. In addition, it helps to avoid name conflicts.
Each $ scope created has an $ parent object. Without using controllerAs, we would need to use references to $ parent for any methods in the scope of $ parent, and $ parent. $ Parent for the area to a higher level, and so on. Now we can just use the variable name.
6 Services and Factories
Services allow you to store data Models and business logic, for example, communicating with the server via HTTP. Services and Factories are often confused - the difference is in how the corresponding objects are created.
It is important to remember that all Services are singletones, there is only one Service for each injection. By convention, the names of the Services are given in Pascal style, that is, “my service” is written as “MyService”.
6.1 Service method
The method creates a new object that communicates with the backend and provides tools for working with business logic. A service is an object of constructor that is called through the keyword new, in connection with which our logic is connected to the service using the keyword this. Service creates a singleton object.
function UserService () { this.sayHello = function (name) { return ' ' + name; }; } angular .module('app') .service('UserService', UserService); Now you can insert the Service into the Controller.
function MainCtrl (UserService) { this.sayHello = function (name) { UserService.sayHello(name); }; } angular .module('app') .controller('MainCtrl', MainCtrl); Before the Service, you cannot execute code, since all methods are created as objects. The Factory is different.
6.2 Factory methods
The factory methods return an object or a function, so we can use closures, or return a host object to which we can bind methods. You can create private and public scopes. All Factories are becoming Services, which is why we call them so.
We will recreate the UserService from the example, for comparison using the factory method.
function UserService () { var UserService = {}; function greeting (name) { return ' ' + name; } UserService.sayHello = function (name) { return greeting(name); }; return UserService; } angular .module('app') .factory('UserService', UserService); With closures, you can emulate a private scope. It would be possible to create something similar inside the service constructor method, but here you can see what comes back and what remains inside the scope of the Service. You can also create private helper functions that remain in scope when the function has already returned, and you can use them from public methods. Inside the Controller, such Services are used in the same way.
function MainCtrl (UserService) { this.sayHello = function (name) { UserService.sayHello(name); }; } angular .module('app') .controller('MainCtrl', MainCtrl); Services are usually used not for the presentation logic, but for the business logic layer. This is a backend communication via REST over Ajax.
7 Using Templates through the Angular Core
While we looked at the programmer side of Angular, but did not show how it can be used from HTML. The next step is to use the powerful features of template making.
7.1 Expressions
Angular expressions are JavaScript-like snippets that can be used in templates to make conditional changes to the DOM — both in the elements and their properties, as well as in the text. They live inside {{}} links and are executed within $ scope. There are no loops or if / else, and we cannot throw exceptions. You can do only small operations or call the values of $ scope properties.
For example, {{value}} is an expression. In expressions, you can use logical operators like || and &&, or the ternary operator value? true: false.
With their help, you can create flexible templates and update variables without reloading pages.
function MainCtrl () { this.items = [{ name: ' ', id: 7297510 },{ name: '', id: 0278916 },{ name: '', id: 2389017 },{ name: '', id: 1000983 }]; } angular .module('app') .controller('MainCtrl', MainCtrl); You can get the length of the array by declaring an expression using the length property.
<div ng-controller="MainCtrl as main"> {{ main.items.length }} . </div> Angular will replace length by value, and we will see “4 pcs. in stock"
7.2 Use of basic guidelines
After this usage, the values are automatically linked inside Angular, so any updates affect the value of the expressions. If we remove one item from the array, the appearance will automatically be updated to “3 pcs. in stock". No fuss, no extra callbacks.
There is a whole bunch of directives prefixed with ng- *. Let's start with ng-click and tie the function to a new piece of the HTML template. In the example, I go through the array and show the quantity of goods in stock.
<div ng-controller="MainCtrl as main"> <div> {{ main.items.length }} . </div> <ul> <li ng-repeat="item in main.items" ng-click="main.removeFromStock(item, $index)"> {{ item.name }} </li> </ul> </div> The ng-click attribute is associated with the main.removeFromStock () function. I give her the goods that we are currently processing in a cycle. The $ index property is useful for removing items from an array — we don't need to manually count the index of the current item.
Now the function can be added to the controller. $ Index and the array element are passed to the function, and the method does the following:
function MainCtrl () { this.removeFromStock = function (item, index) { this.items.splice(index, 1); }; this.items = [...]; } angular .module('app') .controller('MainCtrl', MainCtrl); When creating methods, it is necessary to take into account that the value of this can differ, depending on the use and execution context. I usually create a link to the controller as
var vm = this; vm – ViewModel. . : function MainCtrl () { var vm = this; vm.removeFromStock = function (item, index) { vm.items.splice(index, 1); }; vm.items = [...]; } angular .module('app') .controller('MainCtrl', MainCtrl); This is how the presentation logic that works with the interface is created. Only one step is missing - updating the Model. Before removing an element from vm.items, we must send a DELETE request to the backend, and after a successful response, remove it from the array. Then the DOM will be updated only in case of successful processing of the request and will not mislead the user.
Although the template engine is powerful enough, you should always remember about the possibilities of code reuse in future programs. Directives are well suited for this.
8 Directives
There are two types of Directives - some work with bundles inside Angular, and others we create ourselves. A directive can do anything - provide logic for a given element, or itself be an element and provide a template with logic within itself. Idea Directives in extending the capabilities of HTML.
Look at the built-in directives Angular, then try to create your own.
8.1 ng-repeat
We have already met her, so I will give only a simple example.
<ul> <li ng-repeat="item in main.items"> {{ item }} </li> </ul> ng-repeat copies the element and reproduces it, filling the data of objects from the array. If you delete an item from an array, the DOM will be updated automatically.
8.2 ng-model
Used to initialize a new nonexistent model, or to bind an existing one.
Message: {{main.message}}
If the $ scope main.message property contains a value, it will be passed to input. If there is no such value in $ scope, it will simply be initialized. We can pass these values to other directives, for example in ng-click.
8.3 ng-click
Its beauty is that we don’t need to hang event handlers ourselves. Angular itself will calculate the value of the expression inside the directive and hang the handler on the event. Unlike onClick = '', the ng-click directive belongs to its scope, i.e. is not global.
<input type="text" ng-model="main.message"> <a href=" ng-click="main.showMessage(main.message);"> </a> Here I pass main.message to the main.showMessage method, and there Angular treats it as a simple JavaScript object. This is the beauty of Angular - all the data bundles in the DOM are objects, we can simply parse them, manipulate them, convert them to JSON and send them to the backend.
8.4 ng-href / ng-src
In order for Angular to take care of the features of browsers with the href and src parameters, we use ng-href = "and ng-src =" instead.
<a ng-href="{{ main.someValue }}">Go</a> <img ng-src="{{ main.anotherValue}}" alt="> 8.5 ng-class
This Directive looks like a description of the properties and values of the object. Instead of the traditional calls elem.addClass (className) and elem.removeClass (className), Angular adds and deletes classes based on the given expressions.
<div class="notification" ng-class="{ warning: main.response == 'error', ok: main.response == 'success' }"> {{ main.responseMsg }} </div> Angular finds out the value of main.response and adds a warning or ok class depending on it.
8.6 ng-show / ng-hide
These guidelines are often found when using Angular. This is a convenient way to show and hide data depending on the value of the property.
To switch the visibility of an item, we use ng-click.
<a href=" ng-click="showMenu = !showMenu"> !</a> <ul ng-show="showMenu"> <li>1</li> <li>2</li> <li>3</li> </ul> The only difference is that ng-show or ng-hide determines whether the element should initially be visible or hidden.
8.7 ng-if
ng-if does not just hide the elements, but deletes them. If the element needs to be recreated after changing the value of the property, a new $ scope is created for it. It also has a positive effect on the speed of the framework.
<div ng-if="main.userExists"> </div> 8.8 ng-switch
Directive similar to the case / switch statement in programming, or advanced ng-if. Depending on the value of $ scope, one of several elements is selected.
<div ng-switch on="main.user.access"> <div ng-switch-when="admin"> <!-- code for admins --> </div> <div ng-switch-when="user"> <!-- code for users --> </div> <div ng-switch-when="author"> <!-- code for authors --> </div> </div> 8.9 ng-bind
Values can be inserted into the DOM using the {{value}} syntax, but there is another option, ng-bind. The differences in syntax can be seen in the example.
<p>{{ main.name }}</p> <p ng-bind="main.name"></p> ng-bind can be used to avoid blinking when the page loads. Angular automatically hides content that is loaded through Directives. When using curly brackets, they may be visible in the text of the document. When using ng-bind, inserts are not visible until Angular calculates the desired values.
8.10 ng-view
Single-page applications use one page without reloading, the content of which is updated automatically. This is achieved using the ng-view attribute with an empty element like, which serves as a container for any dynamically inserted code received via XMLHttpRequest.
Different Views are inserted into the ng-view, depending on the path in the URL. For example, you can tell Angular to insert login.html if the URL contains myapp.com/#/login, and change the content as the URL changes.
8.11 HTML extension
Although the built-in Directives add functionality to HTML, it is sometimes necessary to add your own functions to further extend the capabilities. Consider an API for creating your directives.
9 Customizable Directives
Customizable Directives are one of the most complex concepts in the Angular API, because they do not look like familiar software concepts. They play the role of Angular to implement the concept of the web of the near future - custom elements, shadow DOM, templates and HTML import. Let's gradually examine the Directives, breaking them into layers.
9.1 Custom items
NEs are used in cases of code reuse or template code, when we can declare one element, and the code associated with it will automatically be attached to it.
Angular has four ways to use Directives - Custom Elements, Custom Attributes, Class Names and Comments. The last two I try to avoid, because they are easy to get confused, and besides, comments have problems with IE. The safest and cross-browser way - Custom attributes. Let's look at these methods in the following order: Element, Attribute, Class, Comment.
<my-element></my-element> <div my-element></div> <div class="my-element"></div> <!-- directive: my-element --> Directives have a restrict property through which you can limit their use to one of these methods. By default, Directives are used via 'EA', which means Element, Attribute. Other options are C for classes and M for comments.
9.2 Shadow DOM
Shadow DOM works in such a way that within certain parts of a regular DOM document there are attached documents. They support HTML, CSS, and JavaScript scope.
In the Shadow DOM, you can define both pure HTML and content to be imported into it. We can put the text in the Custom item:
<my-element> ! </my-element> And the text "Hello, everyone!" Is available in the Shadow DOM.
9.3 HTML Templates and Import
There are three different ways to use patterns in directives. Two are almost the same, and the third stores the pattern in the string.
9.3.1 property template
Announces the desired template. The template is formatted as a string, and then Angular compiles it and inserts it into the DOM.
Example:
{ template: '<div>' + '<ul>' + '<li ng-repeat="item in vm.items">' + '{{ item }}' + '</li>' + '</ul>' + '</div>' } When using this approach, it is convenient to enter the JavaScript logic between the lines. I use a construct with [] .join (""), it makes the text more readable.
{ template: [ '<div>', '<ul>', '<li ng-repeat="item in vm.items">', '{{ item }}', '</li>', '</ul>', '</div>' ].join('') } 9.3.2 property templateUrl
The templateUrl property allows you to point to an external resource or element
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);
, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);, .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl); , .
:
{ templateUrl: 'items.html' }
Angular DOM id, , HTTP GET.
<script type="text/ng-template" id="/hello.html"> <div> <ul> <li ng-repeat="item in vm.items"> {{ item }} </li> </ul> </div> </script>
text/ng-template, , JavaScript. , . template, . , Angular , ng-include ng-view. Angular GET- .
$templateCache .
9.4 API
API , . – return, . , .
function someDirective () { return { }; } angular .module('app') .directive('someDirective', someDirective);
.
function someDirective () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'something', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="some-directive">', 'My directive!', '</div>' ].join('') }; } angular .module('app') .directive('someDirective', someDirective);
9.4.1 restrict
restrict – . , 'A'. 'E', – 'M' – 'C'.
9.4.2 replace
. <some-directive></some-directive> replace: true, .
9.4.3 scope
$scope , . $scope , .
9.4.4 controllerAs
, . controllerAs: 'something', something.myMethod()
9.4.5 controller
. MainCtrl , controller: 'MainCtrl'. controller: function () {}. ViewModel .
9.4.6 link
link , DOM, - -, Angular.
DOM, link. $scope, $element $attrs, DOM, {{ }}. link , Angular.
9.5
, “email”, To, Subject Message.
<compose-email> , . DOM , , . .
function composeEmail () { return { restrict: 'EA', replace: true, scope: true, controllerAs: 'compose', controller: function () { }, link: function ($scope, $element, $attrs) { }, template: [ '<div class="compose-email">', '<input type="text" placeholder="To..." ng-model="compose.to">', '<input type="text" placeholder="Subject..." ng-model="compose.subject">', '<textarea placeholder="Message..." ng-model="compose.message"></textarea>', '</div>' ].join('') }; } angular .module('app') .controller('composeEmail', composeEmail);
composeEmail , HTML. , Angular , composeEmail <compose-email></compose-email>
10
, - . , , , . .
DOM | , Angular, $filter, JavaScript HTML.
HTML :
{{ filter_expression | filter : expression : comparator }}
JavaScript :
$filter('filter')(array, expression, comparator);
HTML. .
10.1
, Angular . $scope.timeNow = new Date().getTime():
<p> : {{ timeNow | date:'dd-MM-yyyy' }} </p>
10.2 JSON
JSON JavaScript JSON. DOM . JSON </code> <source lang="html"> <pre> {{ myObject | json }}
10.3 limitTo orderBy
– . ?
limitTo , – ng-repeat.
<ul> <li ng-repeat="user in users | limitTo:10"> {{ user.name }} </li> </ul>
10 . limitTo ng-repeat.
orderBy , . :
{ name: 'Todd Motto', }
:
<ul> <li ng-repeat=" user in users | orderBy:'name' "> {{ user.name }} </li> </ul>
.
11
. Angular API. . $digest.
11.1
, . .filter(). .
, .
function myFilter () { return function () { // }; } angular .module('app') .filter('myFilter', myFilter);
. ( Angular ).
function toLowercase () { return function (item) { return item.toLowerCase(); }; } angular .module('app') .filter('toLowercase', toLowercase);
item . , :
<p>{{ user.name | toLowercase }}</p>
11.2
. , . , , 'A'.
function namesStartingWithA () { return function (items) { return items.filter(function (item) { return /$a/i.test(item.name); }); }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
ng-repeat:
<ul> <li ng-repeat="item in items | namesStartingWithA"> {{ item }} </li> </ul>
:
<ul> <li ng-repeat="item in items | namesStartingWithA:something"> {{ item }} </li> </ul>
something :
function namesStartingWithA () { return function (items, something) { // "items", "something" }; } angular .module('app') .filter('namesStartingWithA', namesStartingWithA);
11.3
.filter(), , . , this.namesStartingWithA, , . controllerAs.
function SomeCtrl () { this.namesStartingWithA = function () { }; } angular .module('app') .controller('SomeCtrl', SomeCtrl);
DOM :
<ul> <li ng-repeat="item in vm.items | filter:namesStartingWithA"> {{ item }} </li> </ul>
12 $routeProvider
Angular, : Angular . , , URL. ngRoute
angular .module('app', [ 'ngRoute' ]);
, , $routeProvider .config(). .when().
, – «» /inbox , . .when() , URL. – . .otherwise(), .
function router ($routeProvider) { $routeProvider .when('/inbox', {}) .otherwise({ redirectTo: '/inbox' }); } angular .module('app') .config(router);
, . , inbox.html.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html' }) .otherwise({ redirectTo: '/inbox' });
. Angular controller controllerAs.
$routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .otherwise({ redirectTo: '/inbox' });
, – , . , URL ( id ..). . , id 173921938 /inbox/email/173921938, - '/inbox/email/:id'.
/inbox/email/173921938, Angular , /inbox/email/902827312.
:
function router ($routeProvider) { $routeProvider .when('/inbox', { templateUrl: 'views/inbox.html', controller: 'InboxCtrl', controllerAs: 'inbox' }) .when('/inbox/email/:id', { templateUrl: 'views/email.html', controller: 'EmailCtrl', controllerAs: 'email' }) .otherwise({ redirectTo: '/inbox' }); }); angular .module('app') .config(router);
, . , . ng-view. - :
<div ng-view></div>
URL Angular, , . , .
12.1 $routeParams
$routeParams URL , . , id :id
, $routeParams:
function EmailCtrl ($routeParams, EmailService) { // $routeParams { id: 20999851 } EmailService .get($routeParams.id) // .success(function (response) {}) .error(function (reason) {}); } angular .module('app') .('EmailCtrl', EmailCtrl);
13
, , DOM .
, .
<form name="myForm"></form>
Angular , , , ..
13.1 HTML5
HTML5 pattern, . Angular . , Angular , required ng-required, . Angular.
13.2 $pristine
Angular $pristine – , . Angular ng-pristine , .
13.4 $dirty
pristine – , . ng-dirty, ng-pristine . $pristine .
13.5 $valid
$valid. , ng-required, , ng-valid
13.6 $invalid
valid. , $invalid – ng-invalid. , .
13.7
– , - . , . , .
<input type="text" ng-model="user.name" placeholder=" "> <button ng-disabled="!user.name.length"> </button>
user.name.length true, . , .
14 $http $resource
Angular API, $http $resource. , $digest, .
14.1 $http
jQuery $.ajax, . $http . $http({...}), $http.get(...). $http API , $q.
, . HTTP- GET:
$http.get('/url') .success(function (data, status, headers, config) { }) .error(function (data, status, headers, config) { });
, , . , :
$http.get('/url') .success(function (response) { }) .error(function (reason) { });
.then(), Angular:
$http.get('/url') .then(function (response) { // }, function (reason) { // });
jQuery, Angular $http $scope.$apply(), .
14.2 $resource
$http ngResource. API $resource, CRUD- (create, read, update, delete). $resource , REST.
function MovieService ($resource) { return $resource('/api/movies/:id', { id: '@_id' }, { update: { method: 'PUT' } } ); } angular .module('app') .factory('MovieService', MovieService);
Movies .
function MovieCtrl (MovieService) { var movies = new MovieService(); // movies.update(/* some data */); } angular .module('app') .controller('MovieCtrl', MovieCtrl);Source: https://habr.com/ru/post/247283/
All Articles