{"id":247283,"date":"2015-01-04T00:51:03","date_gmt":"2015-01-03T20:51:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=247283"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=247283","title":{"rendered":"\u0423\u0447\u0435\u0431\u043d\u0438\u043a AngularJS: \u0412\u0441\u0435\u043e\u0431\u044a\u0435\u043c\u043b\u044e\u0449\u0435\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e, \u0447\u0430\u0441\u0442\u044c 2<\/span>"},"content":{"rendered":"
\u0427\u0430\u0441\u0442\u044c 1<\/i><\/a><\/p>\n

4.1 $rootScope<\/h4>\n

$rootScope \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 $scope, \u043f\u0440\u043e\u0441\u0442\u043e \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 $scope \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041a\u043e\u0433\u0434\u0430 Angular \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 $rootScope, \u0438 \u0432\u0441\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0438 \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b $scope, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0430\u043c\u0438 $rootScope.<\/p>\n

\u041e\u0431\u044b\u0447\u043d\u043e \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c $rootScope, \u043d\u043e \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u043c\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.
<\/a> <\/p>\n

5 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b<\/h4>\n

\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0412\u0438\u0434\u0443 \u0438 \u041c\u043e\u0434\u0435\u043b\u0438. \u042d\u0442\u043e \u0442\u043e \u043c\u0435\u0441\u0442\u043e, \u0433\u0434\u0435 \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u043c\u043e\u0434\u0435\u043b\u044c\u044e. \u0426\u0435\u043b\u044c \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u2013 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u041c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0412\u0438\u0434\u0435. \u0412 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 Angular \u0441\u0432\u043e\u0434\u0438\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n

\u041c\u044b \u0443\u0436\u0435 \u043a\u0430\u0441\u0430\u043b\u0438\u0441\u044c \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432, \u043e\u0431\u044a\u044f\u0432\u0438\u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 ng-controller \u0434\u043b\u044f \u043f\u043e\u043a\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 $scope. \u042d\u0442\u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0438\u0437 DOM.<\/p>\n

\u041f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0435\u0433\u043e \u043d\u0430\u0434\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0443\u0436\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043d\u044b\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u043c:<\/p>\n

angular   .module('app', [])   .controller('MainCtrl', function () { }); <\/code><\/pre>\n
  \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u2013 \u0438\u043c\u044f, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043d\u0430 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f, \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0442\u0435\u043b\u043e \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430.<\/p>\n
  \u0427\u0442\u043e\u0431\u044b \u043c\u0435\u0442\u043e\u0434\u044b Angular \u043d\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438, \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b, \u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u043d\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 Angular.<\/p>\n
function MainCtrl () {  }  angular   .module('app', [])   .controller('MainCtrl', MainCtrl); <\/code><\/pre>\n
  \u0422\u0430\u043a \u043e\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e\u0447\u0438\u0449\u0435 \u0438 \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043b\u0435\u0433\u0447\u0435. \u042f \u043d\u0430\u0437\u0432\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e MainCtrl, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043b\u0435\u0433\u0447\u0435 \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c.<\/p>\n
  \u041f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u044e\u0442, \u0447\u0442\u043e \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d.<\/p>\n
5.1 \u041c\u0435\u0442\u043e\u0434\u044b \u0438 \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0439<\/h5>\n
  \u0426\u0435\u043b\u044c \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u2013 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0435\u0451 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0412 Angular \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n
  \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043e\u0431\u0449\u0430\u0435\u0442\u0441\u044f \u0441 \u0421\u0435\u0440\u0432\u0438\u0441\u043e\u043c, \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0442\u043e\u043c \u0436\u0435, \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0432 \u043d\u0430\u0448 \u0412\u0438\u0434 \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044a\u0435\u043a\u0442 $scope. \u041a\u043e\u0433\u0434\u0430 \u0412\u0438\u0434 \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d, \u043b\u043e\u0433\u0438\u043a\u0430 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u0438 \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 \u0421\u0435\u0440\u0432\u0438\u0441. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u0438 \u0441\u0432\u044f\u0436\u0435\u043c \u0438\u0445 \u0441\u043e $scope, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440. \u0411\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443 \u043c\u044b \u0440\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0434\u043b\u044f \u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0451 \u043d\u0438\u0436\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 \u0421\u0435\u0440\u0432\u0438\u0441\u0430.<\/p>\n
function MainCtrl ($scope) {   $scope.items = [{     name: '\u041d\u0430\u0431\u043e\u0440 \u043d\u044b\u0440\u044f\u043b\u044c\u0449\u0438\u043a\u0430',     id: 7297510   },{     name: '\u0428\u043d\u043e\u0440\u043a\u0435\u043b\u044c',     id: 0278916   },{     name: '\u0413\u0438\u0434\u0440\u043e\u043a\u043e\u0441\u0442\u044e\u043c',     id: 2389017   },{     name: '\u041f\u043e\u043b\u043e\u0442\u0435\u043d\u0446\u0435',     id: 1000983   }]; }  angular   .module('app')   .controller('MainCtrl', MainCtrl); <\/code><\/pre>\n
  \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 $scope \u043c\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 DOM, \u0433\u0434\u0435 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432 Angular, ng-repeat, \u0447\u0442\u043e\u0431\u044b \u0432 \u0446\u0438\u043a\u043b\u0435 \u043f\u0440\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u043e \u0434\u0430\u043d\u043d\u044b\u043c \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0432 DOM, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n
<div ng-controller="MainCtrl">   <ul>       <li ng-repeat="item in items">           {{ item.name }}       <\/li>   <\/ul> <\/div> <\/code><\/pre>\n
5.2 \u041d\u043e\u0432\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441 \u00abcontrollerAs\u00bb<\/h5>\n
  \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u044b, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u044b $scope \u043d\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041e\u043d\u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e this \u0432\u043c\u0435\u0441\u0442\u043e $scope. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Angular \u0432\u0432\u0435\u043b\u0438 \u0442\u0430\u043a\u0443\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0430 controllerAs, \u0433\u0434\u0435 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430, \u0445\u0440\u0430\u043d\u044f\u0449\u0435\u0433\u043e\u0441\u044f \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u2013 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 new \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430.<\/p>\n
  \u041c\u044b \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432\u044b\u0437\u043e\u0432 $scope \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c this.<\/p>\n
function MainCtrl () {   this.items = [{     name: '\u041d\u0430\u0431\u043e\u0440 \u043d\u044b\u0440\u044f\u043b\u044c\u0449\u0438\u043a\u0430',     id: 7297510   },{     name: '\u0428\u043d\u043e\u0440\u043a\u0435\u043b\u044c',     id: 0278916   },{     name: '\u0413\u0438\u0434\u0440\u043e\u043a\u043e\u0441\u0442\u044e\u043c',     id: 2389017   },{     name: '\u041f\u043e\u043b\u043e\u0442\u0435\u043d\u0446\u0435',     id: 1000983   }]; }  angular   .module('app')   .controller('MainCtrl', MainCtrl); <\/code><\/pre>\n
  \u041f\u043e\u0442\u043e\u043c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u201cas\u201d \u0442\u0430\u043c, \u0433\u0434\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0432 DOM.<\/p>\n
  \u0417\u0430\u043f\u0438\u0441\u044c MainCtrl as main \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 main, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 items \u0438\u0437 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0432 main.items.<\/p>\n
<div ng-controller="MainCtrl as main">   <ul>       <li ng-repeat="item in main.items">           {{ item.name }}       <\/li>   <\/ul> <\/div> <\/code><\/pre>\n
  \u0422\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0443 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0438\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432 \u0438\u043b\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435, \u044d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442 \u0438\u043c\u0451\u043d.<\/p>\n
  \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0433\u043e $scope \u0435\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 $parent. \u0411\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f controllerAs \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0431\u044b \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 $parent \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0438\u0437 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 $parent, \u0438 $parent.$parent \u0434\u043b\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u044b\u0448\u0435, \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439.<\/p>\n
6 \u0421\u0435\u0440\u0432\u0438\u0441\u044b \u0438 \u0424\u0430\u0431\u0440\u0438\u043a\u0438<\/h4>\n
  \u0421\u0435\u0440\u0432\u0438\u0441\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u041c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0447\u0435\u0440\u0435\u0437 HTTP. \u0427\u0430\u0441\u0442\u043e \u043f\u0443\u0442\u0430\u044e\u0442 \u0421\u0435\u0440\u0432\u0438\u0441\u044b \u0438 \u0424\u0430\u0431\u0440\u0438\u043a\u0438 \u2013 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u0438\u0445 \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b.<\/p>\n
  \u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0421\u0435\u0440\u0432\u0438\u0441\u044b \u2013 \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u044b, \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u044e \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0421\u0435\u0440\u0432\u0438\u0441. \u041f\u043e \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044e \u0438\u043c\u0435\u043d\u0430 \u0421\u0435\u0440\u0432\u0438\u0441\u0430\u043c \u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u0438\u043b\u0435 \u043f\u0430\u0441\u043a\u0430\u043b\u044f, \u0442\u043e \u0435\u0441\u0442\u044c \u00abmy service\u00bb \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u00abMyService\u00bb. 
  6.1 \u041c\u0435\u0442\u043e\u0434 service<\/p>\n
  \u041c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0449\u0430\u0435\u0442\u0441\u044f \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u043e\u0439. \u0421\u0435\u0440\u0432\u0438\u0441 \u2013 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 constructor, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u0447\u0435\u0440\u0435\u0437 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e new, \u0432 \u0441\u0432\u044f\u0437\u0438 \u0441 \u0447\u0435\u043c \u043d\u0430\u0448\u0430 \u043b\u043e\u0433\u0438\u043a\u0430 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 this. \u0421\u0435\u0440\u0432\u0438\u0441 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043e\u0431\u044a\u0435\u043a\u0442-\u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d.<\/p>\n
function UserService () {   this.sayHello = function (name) {     return '\u041f\u0440\u0438\u0432\u0435\u0442 \u0442\u0435\u0431\u0435 ' + name;   }; }  angular   .module('app')   .service('UserService', UserService); <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0421\u0435\u0440\u0432\u0438\u0441 \u0432 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440.<\/p>\n
function MainCtrl (UserService) {   this.sayHello = function (name) {     UserService.sayHello(name);   }; }  angular   .module('app')   .controller('MainCtrl', MainCtrl); <\/code><\/pre>\n
  \u041f\u0435\u0440\u0435\u0434 \u0421\u0435\u0440\u0432\u0438\u0441\u043e\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u043e\u0434, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0423 \u0424\u0430\u0431\u0440\u0438\u043a\u0438 \u0432\u0441\u0451 \u043e\u0431\u0441\u0442\u043e\u0438\u0442 \u0438\u043d\u0430\u0447\u0435.<\/p>\n
6.2 \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b<\/h5>\n
  \u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f, \u0438\u043b\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 host, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b. \u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0443\u044e \u0438 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0412\u0441\u0435 \u0424\u0430\u0431\u0440\u0438\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0421\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0442\u0430\u043a \u0438\u0445 \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c.<\/p>\n
  \u041c\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c UserService \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434.<\/p>\n
function UserService () {   var UserService = {};   function greeting (name) {     return '\u041f\u0440\u0438\u0432\u0435\u0442 \u0442\u0435\u0431\u0435 ' + name;   }   UserService.sayHello = function (name) {     return greeting(name);   };   return UserService; }  angular   .module('app')   .factory('UserService', UserService); <\/code><\/pre>\n
  \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u044d\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 service constructor, \u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f, \u0430 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0421\u0435\u0440\u0432\u0438\u0441\u0430. \u0422\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0433\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0436\u0435 \u0432\u0435\u0440\u043d\u0443\u043b\u0430\u0441\u044c, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432. \u0412\u043d\u0443\u0442\u0440\u0438 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u0435 \u0421\u0435\u0440\u0432\u0438\u0441\u044b \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435.<\/p>\n
function MainCtrl (UserService) {   this.sayHello = function (name) {     UserService.sayHello(name);   }; }  angular   .module('app')   .controller('MainCtrl', MainCtrl); <\/code><\/pre>\n
  \u0421\u0435\u0440\u0432\u0438\u0441\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043d\u0435 \u0434\u043b\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0439, \u0430 \u0434\u043b\u044f \u0441\u043b\u043e\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438. \u042d\u0442\u043e \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u0447\u0435\u0440\u0435\u0437 REST \u043f\u043e Ajax.<\/p>\n
7 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u044f\u0434\u0440\u043e Angular<\/h4>\n
  \u041f\u043e\u043a\u0430 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043a\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 Angular, \u043d\u043e \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438, \u043a\u0430\u043a \u0436\u0435 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0437 HTML. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u2013 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0449\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n
7.1 \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h5>\n
  \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f Angular \u2013 \u044d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043d\u0430 JavaScript \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 DOM \u2013 \u043a\u0430\u043a \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445, \u0442\u0430\u043a \u0438 \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435. \u041e\u043d\u0438 \u0436\u0438\u0432\u0443\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0441\u044b\u043b\u043e\u043a {{}} \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 $scope. \u0422\u0430\u043c \u043d\u0435\u0442 \u0446\u0438\u043a\u043b\u043e\u0432 \u0438\u043b\u0438 if\/else, \u0438 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f. \u041c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u043b\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 $scope.<\/p>\n
  \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, {{ value }} \u2013 \u044d\u0442\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u0412 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0432\u0440\u043e\u0434\u0435 || \u0438 &&, \u0438\u043b\u0438 \u0442\u0435\u0440\u043d\u0430\u0440\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 value? true: false.<\/p>\n
  \u0421 \u0438\u0445 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0433\u0438\u0431\u043a\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n
function MainCtrl () {   this.items = [{     name: '\u041d\u0430\u0431\u043e\u0440 \u043d\u044b\u0440\u044f\u043b\u044c\u0449\u0438\u043a\u0430',     id: 7297510   },{     name: '\u0428\u043d\u043e\u0440\u043a\u0435\u043b\u044c',     id: 0278916   },{     name: '\u0413\u0438\u0434\u0440\u043e\u043a\u043e\u0441\u0442\u044e\u043c',     id: 2389017   },{     name: '\u041f\u043e\u043b\u043e\u0442\u0435\u043d\u0446\u0435',     id: 1000983   }]; }  angular   .module('app')   .controller('MainCtrl', MainCtrl); <\/code><\/pre>\n
  \u041c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043b\u0438\u043d\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u043e\u0431\u044a\u044f\u0432\u0438\u0432 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0435\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e length.<\/p>\n
<div ng-controller="MainCtrl as main">   {{ main.items.length }} \u0448\u0442. \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 <\/div> <\/code><\/pre>\n
  Angular \u0437\u0430\u043c\u0435\u043d\u0438\u0442 length \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u201c4 \u0448\u0442. \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438\u201d<\/p>\n
7.2 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432<\/h5>\n
  \u041f\u043e\u0441\u043b\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 Angular, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u044e\u0431\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0415\u0441\u043b\u0438 \u043c\u044b \u0443\u0431\u0435\u0440\u0451\u043c \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043e\u0434\u0438\u043d \u043f\u0440\u0435\u0434\u043c\u0435\u0442, \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u043e \u201c3 \u0448\u0442. \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438\u201d. \u041d\u0438\u043a\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043d\u0438, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0448\u043d\u0438\u0445 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432.<\/p>\n
  \u0415\u0441\u0442\u044c \u0446\u0435\u043b\u0430\u044f \u043a\u0443\u0447\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c ng-*. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 ng-click \u0438 \u043f\u0440\u0438\u0432\u044f\u0436\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u043a\u0443\u0441\u043e\u0447\u043a\u0443 HTML-\u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u043f\u0440\u043e\u0445\u043e\u0436\u0443 \u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u043e\u0432\u0430\u0440\u0430 \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438.<\/p>\n
<div ng-controller="MainCtrl as main">   <div>     {{ main.items.length }} \u0448\u0442. \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438   <\/div>   <ul>       <li ng-repeat="item in main.items" ng-click="main.removeFromStock(item, $index)">           {{ item.name }}       <\/li>   <\/ul> <\/div> <\/code><\/pre>\n
  \u0410\u0442\u0440\u0438\u0431\u0443\u0442 ng-click \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 main.removeFromStock(). \u042f \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0435\u0439 \u0442\u043e\u0432\u0430\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0432 \u0446\u0438\u043a\u043b\u0435. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e $index \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u2013 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0434\u0435\u043a\u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0443. \u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f $index \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0438 \u043c\u0435\u0442\u043e\u0434 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
function MainCtrl () {   this.removeFromStock = function (item, index) {     this.items.splice(index, 1);   };   this.items = [...]; }  angular   .module('app')   .controller('MainCtrl', MainCtrl); <\/code><\/pre>\n
  \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043d\u0430\u0434\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 this \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u043d\u0438\u0442\u044c\u0441\u044f, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u041e\u0431\u044b\u0447\u043d\u043e \u044f \u0441\u043e\u0437\u0434\u0430\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043a\u0430\u043a<\/p>\n
var vm = this;  \u0433\u0434\u0435 vm \u2013 \u044d\u0442\u043e ViewModel. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u044e\u0442\u0441\u044f. \u041f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:  function MainCtrl () {   var vm = this;   vm.removeFromStock = function (item, index) {     vm.items.splice(index, 1);   };   vm.items = [...]; }  angular   .module('app')   .controller('MainCtrl', MainCtrl); <\/code><\/pre>\n
  \u0422\u0430\u043a \u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0430\u044f \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c. \u041f\u0440\u043e\u043f\u0443\u0449\u0435\u043d \u043b\u0438\u0448\u044c \u043e\u0434\u0438\u043d \u0448\u0430\u0433 \u2013 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u041c\u043e\u0434\u0435\u043b\u0438. \u041f\u0435\u0440\u0435\u0434 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0437 vm.items \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 DELETE \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434, \u0438 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0422\u043e\u0433\u0434\u0430 DOM \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u043d\u0435 \u0432\u0432\u0435\u0434\u0451\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0437\u0430\u0431\u043b\u0443\u0436\u0434\u0435\u043d\u0438\u0435. <\/p>\n
  \u0425\u043e\u0442\u044f \u0434\u0432\u0438\u0436\u043e\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043e\u0449\u043d\u044b\u0439, \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0432 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430\u0445. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b.<\/p>\n
8 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b<\/h4>\n
  \u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0438\u0434\u0430 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u2013 \u043e\u0434\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441\u043e \u0441\u0432\u044f\u0437\u043a\u0430\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 Angular, \u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0441\u0430\u043c\u0438. \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u2013 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438\u043b\u0438 \u0441\u0430\u043c\u0430 \u0431\u044b\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f. \u0418\u0434\u0435\u044f \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0432 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 HTML.<\/p>\n
  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b Angular, \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0438.<\/p>\n
8.1 ng-repeat<\/h5>\n
  \u041c\u044b \u0443\u0436\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u0441 \u043d\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0434\u0430\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n
<ul>   <li ng-repeat="item in main.items">     {{ item }}   <\/li> <\/ul> <\/code><\/pre>\n
  ng-repeat \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0435\u0433\u043e, \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0415\u0441\u043b\u0438 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, DOM \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n
8.2 ng-model<\/h5>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u043e\u0432\u043e\u0439 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439.<\/p>\n
  \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435: {{ main.message }}<\/p>\n
  \u0415\u0441\u043b\u0438 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 $scope main.message \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e \u0432 input. \u0415\u0441\u043b\u0438 \u0432 $scope \u043d\u0435\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043e\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ng-click.<\/p>\n
8.3 ng-click<\/h5>\n
  \u041f\u0440\u0435\u043b\u0435\u0441\u0442\u044c \u0435\u0433\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0435 \u043d\u0430\u0434\u043e \u0441\u0430\u043c\u0438\u043c \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. Angular \u0441\u0430\u043c \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438 \u043f\u043e\u0432\u0435\u0441\u0438\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 onClick=\u2019\u2019, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 ng-click \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0438\u0442 \u043a \u0441\u0432\u043e\u0435\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0442.\u0435. \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439.<\/p>\n
<input type="text" ng-model="main.message"> <a href=" ng-click="main.showMessage(main.message);">\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435<\/a> <\/code><\/pre>\n
  \u0417\u0434\u0435\u0441\u044c \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e main.message \u0432 \u043c\u0435\u0442\u043e\u0434 main.showMessage, \u0430 \u0442\u0430\u043c Angular \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 JavaScript. \u0412 \u044d\u0442\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u0435\u043b\u0435\u0441\u0442\u044c Angular \u2013 \u0432\u0441\u0435 \u0441\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 DOM \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0438\u0445, \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0438, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432 JSON \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434.<\/p>\n
8.4 ng-href\/ng-src<\/h5>\n
  \u0427\u0442\u043e\u0431\u044b Angular \u0441\u0430\u043c \u0437\u0430\u0431\u043e\u0442\u0438\u043b\u0441\u044f \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 href \u0438 src, \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0438\u0445 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ng-href=" and ng-src=".<\/p>\n
<a ng-href="{{ main.someValue }}">Go<\/a> <img ng-src="{{ main.anotherValue}}" alt="> <\/code><\/pre>\n
8.5 ng-class<\/h5>\n
  \u042d\u0442\u0430 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 elem.addClass(className) \u0438 elem.removeClass(className), Angular \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n
<div class="notification" ng-class="{   warning: main.response == 'error',   ok: main.response == 'success' }">   {{ main.responseMsg }} <\/div> <\/code><\/pre>\n
  Angular \u0432\u044b\u044f\u0441\u043d\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 main.response \u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043d\u0435\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 warning \u0438\u043b\u0438 ok.<\/p>\n
8.6 ng-show\/ng-hide<\/h5>\n
  \u042d\u0442\u0438 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Angular. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438 \u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n
  \u0414\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ng-click.<\/p>\n
<a href=" ng-click="showMenu = !showMenu">\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043c\u0435\u043d\u044e!<\/a> <ul ng-show="showMenu">   <li>1<\/li>   <li>2<\/li>   <li>3<\/li> <\/ul> <\/code><\/pre>\n
  \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e ng-show \u0438\u043b\u0438 ng-hide \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442, \u0434\u043e\u043b\u0436\u0435\u043d \u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u0438\u043b\u0438 \u0431\u044b\u0442\u044c \u0441\u043f\u0440\u044f\u0442\u0430\u043d\u043d\u044b\u043c. <\/p>\n
8.7 ng-if<\/h5>\n
  ng-if \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u044f\u0447\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0430 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0438\u0445. \u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0443\u0436\u043d\u043e \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 $scope. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0431\u044b\u0441\u0442\u0440\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n
<div ng-if="main.userExists">   \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043b\u043e\u0433\u0438\u043d <\/div> <\/code><\/pre>\n
8.8 ng-switch<\/h5>\n
  \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430, \u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0441 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c case \/ switch \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u0438\u043b\u0438 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 ng-if. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 $scope \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. <\/p>\n
<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> <\/code><\/pre>\n
8.9 ng-bind<\/h5>\n
  \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432 DOM \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 {{ value }}, \u043d\u043e \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442, ng-bind. \u0420\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0432\u0438\u0434\u043d\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n
<p>{{ main.name }}<\/p> <p ng-bind="main.name"><\/p> <\/code><\/pre>\n
  ng-bind \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043c\u0438\u0433\u0430\u043d\u0438\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. Angular \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u0438\u0434\u043d\u044b \u0432 \u0442\u0435\u043a\u0441\u0442\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 ng-bind \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043d\u0435 \u0432\u0438\u0434\u043d\u044b, \u043f\u043e\u043a\u0430 Angular \u043d\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n
8.10 ng-view<\/h5>\n
  \u041e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043e\u043a, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 ng-view \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0432\u0440\u043e\u0434\u0435 <div><\/div><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0443\u0436\u0438\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c\u043e\u0433\u043e \u0447\u0435\u0440\u0435\u0437 XMLHttpRequest.<\/p>\n
  \u041d\u0430 \u043c\u0435\u0441\u0442\u043e ng-view \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0412\u0438\u0434\u044b, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0443\u0442\u0438 \u0432 URL. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c Angular, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u043b login.html, \u0435\u0441\u043b\u0438 URL \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 myapp.com\/#\/login, \u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 URL.<\/p>\n
8.11 \u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 HTML<\/h5>\n
  \u0425\u043e\u0442\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 HTML, \u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c API \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432.<\/p>\n
9 \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b<\/h5>\n
  \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u2013 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u0432 API Angular, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438. \u041e\u043d\u0438 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u0432 \u0440\u043e\u043b\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 Angular \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0412\u0435\u0431 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u2013 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0442\u0435\u043d\u0435\u0432\u043e\u0439 DOM, \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438 \u0438\u043c\u043f\u043e\u0440\u0442 HTML. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u043c \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b, \u0440\u0430\u0437\u0431\u0438\u0432 \u0438\u0445 \u043d\u0430 \u0441\u043b\u043e\u0438.<\/p>\n
9.1 \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h5>\n
  \u041d\u042d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438\u043b\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0430 \u043a\u043e\u0434, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u043d\u0438\u043c, \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0451\u043d \u043a \u043d\u0435\u043c\u0443.<\/p>\n
  \u0412 Angular \u0435\u0441\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u2013 \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0434\u0432\u0443\u0445 \u044f \u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 \u043d\u0438\u0445 \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f, \u0438 \u043a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0443 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 IE. \u0421\u0430\u043c\u044b\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0439 \u0438 \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u2013 \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u044d\u0442\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435: Element, Attribute, Class, Comment.<\/p>\n
<my-element><\/my-element>  <div my-element><\/div>  <div class="my-element"><\/div>  <!-- directive: my-element --> <\/code><\/pre>\n
  \u0423 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e restrict, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u2018EA\u2019, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 Element, Attribute. \u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u2013 C \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u041c \u0434\u043b\u044f \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432.<\/p>\n
9.2 \u0422\u0435\u043d\u0435\u0432\u043e\u0439 DOM<\/h5>\n
  \u0422\u0435\u043d\u0435\u0432\u043e\u0439 DOM \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e DOM \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b. \u041e\u043d\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 HTML, CSS \u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 JavaScript.<\/p>\n
  \u0412 \u0422\u0435\u043d\u0435\u0432\u043e\u043c DOM \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043a\u0430\u043a \u0447\u0438\u0441\u0442\u044b\u0439 HTML, \u0442\u0430\u043a \u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432 \u043d\u0435\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0432 \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/p>\n
<my-element>   \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! <\/my-element> <\/code><\/pre>\n
  \u0418 \u0442\u0435\u043a\u0441\u0442 \u00ab\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442!\u00bb \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u0422\u0435\u043d\u0435\u0432\u043e\u043c DOM. <\/p>\n
9.3 \u0428\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0438\u043c\u043f\u043e\u0440\u0442 HTML <\/h5>\n
  \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0440\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432 \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430\u0445. \u0414\u0432\u0430 \u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445, \u0430 \u0442\u0440\u0435\u0442\u0438\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0432 \u0441\u0442\u0440\u043e\u043a\u0435. <\/p>\n
9.3.1 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e template <\/h6>\n
  \u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d. \u0428\u0430\u0431\u043b\u043e\u043d \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c Angular \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 DOM<\/p>\n
  \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n
{   template: '<div>' +      '<ul>' +       '<li ng-repeat="item in vm.items">' +         '{{ item }}' +       '<\/li>' +     '<\/ul>' +   '<\/div>' } <\/code><\/pre>\n
  \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430 JavaScript \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0441 [].join(»), \u043e\u043d\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c.<\/p>\n
{   template: [     '<div>',       '<ul>',         '<li ng-repeat="item in vm.items">',           '{{ item }}',         '<\/li>',       '<\/ul>',     '<\/div>'   ].join('') } <\/code><\/pre>\n
9.3.2 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e templateUrl<\/h6>\n
  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e templateUrl \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0440\u0435\u0441\u0443\u0440\u0441 \u0438\u043b\u0438 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <script><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043d\u0443\u0436\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d.<\/p>\n
  \u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0442\u044c:<\/p>\n
{   templateUrl: 'items.html' } <\/code><\/pre>\n
  Angular \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0438\u0449\u0435\u0442 \u0432 DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <script><\/code> \u0441 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c id, \u0430 \u0435\u0441\u043b\u0438 \u043d\u0435 \u043d\u0430\u0439\u0434\u0451\u0442, \u0442\u043e\u0433\u0434\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 HTTP GET.<\/p>\n
<script type="text\/ng-template" id="\/hello.html">   <div>     <ul>       <li ng-repeat="item in vm.items">         {{ item }}       <\/li>     <\/ul>   <\/div> <\/script> <\/code><\/pre>\n
  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0437\u0430\u0434\u0430\u0451\u043c \u0442\u0438\u043f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043a\u0430\u043a text\/ng-template, \u0447\u0442\u043e\u0431\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u0435\u0433\u043e \u0442\u0435\u043a\u0441\u0442, \u043a\u0430\u043a JavaScript. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b, \u0430 \u043d\u0435 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e template, \u043a\u043e\u0433\u0434\u0430 \u0448\u0430\u0431\u043b\u043e\u043d \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0435. \u041a\u043e\u0433\u0434\u0430 \u0448\u0430\u0431\u043b\u043e\u043d \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f, Angular \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0435\u0433\u043e, \u0438 \u043f\u043e\u0442\u043e\u043c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 ng-include \u0438 ng-view. \u0412 \u0438\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Angular \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442 GET-\u0437\u0430\u043f\u0440\u043e\u0441 \u0444\u0430\u0439\u043b\u0430 \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c.<\/p>\n
  \u0412\u0441\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 $templateCache \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u0436\u0438\u0437\u043d\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
9.4 API \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432<\/h5>\n
  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c API \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u041f\u0435\u0440\u0432\u0430\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u2013 return, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f \u043e\u0431\u044a\u0435\u043a\u0442. \u042d\u0442\u043e \u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b.<\/p>\n
function someDirective () {   return {    }; }  angular   .module('app')   .controller('someDirective', someDirective); <\/code><\/pre>\n
  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u0430\u043c\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432. <\/p>\n
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')   .controller('someDirective', someDirective); <\/code><\/pre>\n
9.4.1 restrict<\/h6>\n
  \u041c\u044b \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0438 restrict \u2013 \u043e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043c\u043e\u0436\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0438\u0445 \u2018A\u2019. \u0414\u043b\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u2018E\u2019, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u2013 \u2018M\u2019 \u0438 \u0438\u043c\u0451\u043d \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u2013 \u2018C\u2019.<\/p>\n
9.4.2 replace<\/h6>\n
  \u0417\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u0415\u0441\u043b\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <some-directive><\/some-directive><\/code> \u0438 \u0437\u0430\u0434\u0430\u0451\u043c replace: true, \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0451\u043d \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043a\u0440\u0438\u043f\u0442\u0430.<\/p>\n
9.4.3 scope<\/h6>\n
  \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c $scope \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0438\u043b\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0445\u043e\u0434\u0438\u0442 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430. \u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 $scope \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043e\u0431\u044b\u0447\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b.<\/p>\n
9.4.4 controllerAs<\/h6>\n
  \u041c\u044b \u0443\u0436\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0438\u043c\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u0415\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0434\u0430\u0451\u043c controllerAs: ‘something’, \u0442\u043e \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a something.myMethod()<\/p>\n
9.4.5 controller<\/h6>\n
  \u0417\u0430\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439. \u0415\u0441\u043b\u0438 MainCtrl \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442, \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a controller: ‘MainCtrl’. \u0414\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0447\u0435\u0440\u0435\u0437 controller: function () {}. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 ViewModel \u0438 \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u0421\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438.<\/p>\n
9.4.6 link<\/h6>\n
  \u0424\u0443\u043d\u043a\u0446\u0438\u044f link \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 DOM, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e, \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0435 \u0441 Angular.<\/p>\n
  \u0412 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u043c\u044b \u043d\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u0443\u0435\u043c DOM, \u043d\u043e \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 link. \u041e\u043d\u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c $scope, \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 $element \u0438 \u043e\u0431\u044a\u0435\u043a\u0442 $attrs, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 DOM, \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0449\u0435\u0433\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 {{ }}. \u0412\u043d\u0443\u0442\u0440\u0438 link \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u0434\u0430\u0436\u0435 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u044b Angular.<\/p>\n
9.5 \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432<\/h5>\n
  \u041f\u0440\u043e\u0439\u0434\u0451\u043c\u0441\u044f \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u201cemail\u201d, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u044f To, Subject \u0438 Message.<\/p>\n
  \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <compose-email><\/code>, \u043d\u0430 \u043c\u0435\u0441\u0442\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0442\u0430\u0432\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 DOM \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e, \u0438 \u0432\u0435\u0437\u0434\u0435 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0451\u043d \u043d\u0430 \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432.<\/p>\n
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); <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 composeEmail \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0443\u0441\u043a\u0438 HTML. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e Angular \u043f\u0430\u0440\u0441\u0438\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0442\u0430\u043a, \u0447\u0442\u043e composeEmail \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 <compose-email><\/compose-email><\/code><\/p>\n
10 \u0424\u0438\u043b\u044c\u0442\u0440\u044b<\/h4>\n
  \u0424\u0438\u043b\u044c\u0442\u0440\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438 \u0432\u044b\u0434\u0430\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u043d\u0430\u0431\u043e\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043b\u043e\u0433\u0438\u043a\u0435. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e, \u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u0442\u044b \u0432 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0434\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0438\u043c\u0451\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u0443\u044e \u0431\u0443\u043a\u0432\u0443. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b.<\/p>\n
  \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0431\u043e \u0432 DOM \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u043c\u0432\u043e\u043b \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0435\u0440\u0442\u044b | \u0432 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0430\u0440\u0441\u0438\u0442 Angular, \u043b\u0438\u0431\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0440\u0432\u0438\u0441 $filter, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 JavaScript \u043a\u043e\u0434\u0435 \u0432\u043c\u0435\u0441\u0442\u043e HTML.<\/p>\n
  HTML \u0441\u0438\u043d\u0442\u0430\u043a\u0441:<\/p>\n
{{ filter_expression | filter : expression : comparator }} <\/code><\/pre>\n
  JavaScript \u0441\u0438\u043d\u0442\u0430\u043a\u0441:<\/p>\n
$filter('filter')(array, expression, comparator); <\/code><\/pre>\n
  \u0427\u0430\u0449\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 HTML. \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432.<\/p>\n
10.1 \u0424\u0438\u043b\u044c\u0442\u0440\u044b \u0434\u0430\u0442\u044b<\/h5>\n
  \u0421 \u0434\u0430\u0442\u0430\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043c\u0443\u0442\u043e\u0440\u043d\u043e, \u043d\u043e Angular \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443. \u041f\u0440\u0438\u0432\u044f\u0436\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440 \u043a \u0434\u0430\u0442\u0435 \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445 \u043a $scope.timeNow = new Date().getTime():<\/p>\n
<p>   \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0443 \u043d\u0430\u0441: {{ timeNow | date:'dd-MM-yyyy' }} <\/p> <\/code><\/pre>\n
10.2 \u0424\u0438\u043b\u044c\u0442\u0440 JSON<\/h5>\n
  \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b JSON \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 JavaScript \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 JSON. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u041c\u043e\u0434\u0435\u043b\u0438 \u0432 DOM \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u0414\u043b\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u0435\u0440\u043d\u0438\u0442\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b JSON \u0432 \u0442\u044d\u0433\u0438 <pre><\/code><\/p>\n
<pre> {{ myObject | json }} <\/pre> <\/code><\/pre>\n
10.3 limitTo \u0438 orderBy<\/h5>\n
  \u041e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u2013 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0434\u0430\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041a\u0430\u043a \u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0430\u0431\u043e\u0440\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445?<\/p>\n
  limitTo \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0432 \u0412\u0438\u0434 \u2013 \u0435\u0433\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 ng-repeat.<\/p>\n
<ul>   <li ng-repeat="user in users | limitTo:10">     {{ user.name }}   <\/li> <\/ul> <\/code><\/pre>\n
  \u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u043d\u0435 \u0431\u043e\u043b\u0435\u0435 10 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 limitTo \u0432\u043d\u0443\u0442\u0440\u0438 ng-repeat.<\/p>\n
  orderBy \u0437\u0430\u0434\u0430\u0451\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0432\u043e\u0434\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u044f \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
{   name: 'Todd Motto', } <\/code><\/pre>\n
  \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043b\u0438\u0441\u0442 \u043f\u043e \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u0443 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
<ul>   <li ng-repeat=" user in users | orderBy:'name' ">     {{ user.name }}   <\/li> <\/ul> <\/code><\/pre>\n
  \u041d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445.<\/p>\n
11 \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b<\/h4>\n
  \u041c\u044b \u0432\u0441\u0435 \u0434\u0435\u043b\u0430\u043b\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445 \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u0445. \u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0445 \u0432 Angular \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 API. \u041c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u0441\u0432\u044f\u0437\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0435\u0437\u043e \u0432\u0441\u044f\u043a\u043e\u0433\u043e \u0442\u0440\u0443\u0434\u0430. \u0412\u0441\u0435 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043c\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u044b \u0432 \u0446\u0438\u043a\u043b\u0435 $digest.<\/p>\n
11.1 \u0424\u0438\u043b\u044c\u0442\u0440\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/h5>\n
  \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043e\u0434\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0438 \u0432\u044b\u0434\u0430\u044e\u0442 \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 .filter(). \u0412\u0441\u0435 \u0442\u0430\u043a\u0438\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u043b\u044e\u0431\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n
  \u0412\u043e\u0442 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n
function myFilter () {   return function () {     \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430   }; } angular   .module('app')   .filter('myFilter', myFilter); <\/code><\/pre>\n
  \u0412\u0441\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u043d\u0438\u0436\u043d\u0438\u0439 \u0440\u0435\u0433\u0438\u0441\u0442\u0440 (\u0445\u043e\u0442\u044f \u0443 Angular \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0444\u0438\u043b\u044c\u0442\u0440).<\/p>\n
function toLowercase () {   return function (item) {     return item.toLowerCase();   }; } angular   .module('app')   .filter('toLowercase', toLowercase); <\/code><\/pre>\n
  item \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0443 \u043a\u0430\u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0438\u043b\u044c\u0442\u0440 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435:<\/p>\n
<p>{{ user.name | toLowercase }}<\/p> <\/code><\/pre>\n
11.2 \u0424\u0438\u043b\u044c\u0442\u0440\u044b \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445<\/h5>\n
  \u0418\u043d\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u043c\u0435\u043d\u0430 \u043f\u043e \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u0435\u0440\u0432\u043e\u0439 \u0431\u0443\u043a\u0432\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u0444\u0438\u043b\u044c\u0442\u0440 \u0441\u043b\u043e\u0432, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0441 ‘A’.<\/p>\n
function namesStartingWithA () {   return function (items) {     return items.filter(function (item) {       return \/$a\/i.test(item.name);     });   }; } angular   .module('app')   .filter('namesStartingWithA', namesStartingWithA); <\/code><\/pre>\n
  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 ng-repeat:<\/p>\n
<ul>   <li ng-repeat="item in items | namesStartingWithA">     {{ item }}   <\/li> <\/ul> <\/code><\/pre>\n
  \u041f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0432 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u0435:<\/p>\n
<ul>   <li ng-repeat="item in items | namesStartingWithA:something">     {{ item }}   <\/li> <\/ul> <\/code><\/pre>\n
  something \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0444\u0438\u043b\u044c\u0442\u0440\u0430:<\/p>\n
function namesStartingWithA () {   return function (items, something) {     \/\/ \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u0438 \u043a "items", \u0438 \u043a "something"   }; } angular   .module('app')   .filter('namesStartingWithA', namesStartingWithA); <\/code><\/pre>\n
11.3 \u0424\u0438\u043b\u044c\u0442\u0440\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432<\/h5>\n
  \u0424\u0438\u043b\u044c\u0442\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043d\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 .filter(), \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0440\u043e\u043b\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u0430. \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 this.namesStartingWithA, \u0442\u043e\u0433\u0434\u0430 \u0444\u0438\u043b\u044c\u0442\u0440 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u0430 \u043d\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441 controllerAs.   <\/p>\n
 function SomeCtrl () {   this.namesStartingWithA = function () {    }; } angular   .module('app')   .controller('SomeCtrl', SomeCtrl); <\/code><\/pre>\n
  \u0421\u0438\u043d\u0442\u0430\u043a\u0441 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0432 DOM \u0441\u043b\u0435\u0433\u043a\u0430 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f:<\/p>\n
<ul>   <li ng-repeat="item in vm.items | filter:namesStartingWithA">     {{ item }}   <\/li> <\/ul> <\/code><\/pre>\n
12 \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0447\u0435\u0440\u0435\u0437 $routeProvider<\/h4>\n
  \u041c\u044b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u043c\u0438 Angular, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u043e\u0448\u043b\u0438 \u0434\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0439: \u043a\u0430\u043a \u0436\u0435 Angular \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0410 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0440\u043e\u0443\u0442\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043c\u0435\u043d\u044f\u043b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 URL. \u041d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u0440\u043e\u0443\u0442\u0435\u0440 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f ngRoute<\/p>\n
angular   .module('app', [     'ngRoute'   ]); <\/code><\/pre>\n
  \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0432 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u0443\u0442\u0438, \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044f $routeProvider \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044f \u0435\u0433\u043e \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 .config(). \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043c\u0435\u0442\u043e\u0434\u0443 .when(). <\/p>\n
  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u043f\u043e\u0447\u0442\u044b \u2013 \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u00ab\u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u00bb \/inbox \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0438\u0441\u0435\u043c. \u0422\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0432 .when() \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u043e\u0439, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u043d\u0443\u0436\u043d\u044b\u0439 URL. \u0412\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438. \u0415\u0441\u0442\u044c \u0435\u0449\u0451 \u043c\u0435\u0442\u043e\u0434 .otherwise(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0438 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043f\u0443\u0442\u0435\u0439.<\/p>\n
function router ($routeProvider) {   $routeProvider   .when('\/inbox', {})   .otherwise({     redirectTo: '\/inbox'   }); }  angular   .module('app')   .config(router); <\/code><\/pre>\n
  \u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0443\u0442\u0438 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u0412\u0438\u0434\u043e\u043c. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d inbox.html. <\/p>\n
$routeProvider .when('\/inbox', {   templateUrl: 'views\/inbox.html' }) .otherwise({   redirectTo: '\/inbox' }); <\/code><\/pre>\n
  \u0412\u0441\u0435\u043c \u0412\u0438\u0434\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440. \u0423 Angular \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 controller \u0438 controllerAs. <\/p>\n
$routeProvider .when('\/inbox', {   templateUrl: 'views\/inbox.html',   controller: 'InboxCtrl',   controllerAs: 'inbox' }) .otherwise({   redirectTo: '\/inbox' }); <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0412\u0438\u0434 \u2013 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0449\u0451\u043b\u043a\u0430\u0435\u043c \u043f\u043e \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u043c\u0443 \u043f\u0438\u0441\u044c\u043c\u0443, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0430\u043c\u043e \u043f\u0438\u0441\u044c\u043c\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0438\u0441\u0435\u043c \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 URL (\u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435 id \u0438 \u0442.\u043f.). \u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u0435 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0438\u0441\u044c\u043c\u0430 \u0441 id 173921938 \u043f\u0443\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \/inbox\/email\/173921938, \u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u2014 ‘\/inbox\/email\/:id’.<\/p>\n
  \u041a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043f\u0443\u0442\u044c \/inbox\/email\/173921938, Angular \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0441\u0430\u043c\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440, \u0447\u0442\u043e \u0438 \u0434\u043b\u044f \/inbox\/email\/902827312.<\/p>\n
  \u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
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); <\/code><\/pre>\n
  \u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0443\u0442\u0438. \u041d\u043e \u043d\u0443\u0436\u043d\u043e \u0435\u0449\u0451 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f ng-view. \u041e\u0431\u044b\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435:<\/p>\n
<div ng-view><\/div> <\/code><\/pre>\n
  \u0412\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f URL \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f Angular, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u0440\u0443\u0433\u043e\u0439 \u0448\u0430\u0431\u043b\u043e\u043d. \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
12.1 $routeParams<\/h5>\n
  \u0421\u0435\u0440\u0432\u0438\u0441 $routeParams \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0430\u0440\u0441\u0438\u0442 URL \u0438 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e \u043d\u0430\u0431\u043e\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u0432\u043b\u0435\u0447\u0451\u043d id \u043f\u0438\u0441\u044c\u043c\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u0447\u0435\u0440\u0435\u0437 :id<\/p>\n
  \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438\u0437 $routeParams:<\/p>\n
function EmailCtrl ($routeParams, EmailService) {   \/\/ $routeParams { id: 20999851 }   EmailService   .get($routeParams.id) \/\/ \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442   .success(function (response) {})   .error(function (reason) {}); } angular   .module('app')   .('EmailCtrl', EmailCtrl); <\/code><\/pre>\n
13 \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c<\/h4>\n
  \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043e\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u041c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0441\u0432\u0435\u0440\u043a\u0438 \u0438\u0445 \u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c\u0438 \u0441\u0432\u044f\u0437\u043a\u0438, \u0434\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f DOM \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n
  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u0439 \u0438\u043c\u044f, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0435\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0444\u043e\u0440\u043c\u044b.<\/p>\n
<form name="myForm"><\/form> <\/code><\/pre>\n
  Angular \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0435\u0442 \u0442\u0430\u043a\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0432\u043e\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043b \u043b\u0438 \u0442\u043e\u0442 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b, \u0438 \u0442.\u043f.<\/p>\n
13.1 HTML5 <\/h5>\n
  \u0412 HTML5 \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442 pattern, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0432\u0432\u043e\u0434 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043a\u043e\u0439. Angular \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, Angular \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043f\u043e\u043b\u0435\u0439, \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u043a required \u0432 \u0441\u0432\u043e\u0435\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0435 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c ng-required, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u0436\u0435 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u041c\u043e\u0434\u0435\u043b\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0435\u0449\u0451 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Angular.<\/p>\n
13.2 $pristine<\/h5>\n
  \u041f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b Angular \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043a \u0444\u043e\u0440\u043c\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e $pristine \u2013 \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a \u043d\u0435\u0439 \u0435\u0449\u0451 \u043d\u0435 \u043f\u0440\u0438\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u043b\u0441\u044f. Angular \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u043a\u043b\u0430\u0441\u0441 ng-pristine \u043a \u0442\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0449\u0451 \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c.<\/p>\n
13.4 $dirty<\/h5>\n
  \u041f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c pristine \u2013 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u043b. \u041a \u043d\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u044b ng-dirty, \u0430 \u043a\u043b\u0430\u0441\u0441\u044b ng-pristine \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f. \u0424\u043e\u0440\u043c\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e $pristine \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n
13.5 $valid<\/h5>\n
  \u041a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043e $valid. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0443 \u043f\u043e\u043b\u044f \u0435\u0441\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 ng-required, \u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043b \u0435\u0433\u043e, \u0442\u043e \u0435\u043c\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 ng-valid<\/p>\n
13.6 $invalid<\/h5>\n
  \u041f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c valid. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0432\u0441\u0435 \u0444\u043e\u0440\u043c\u044b \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 $invalid \u2013 \u0438\u043c \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d \u043a\u043b\u0430\u0441\u0441 ng-invalid. \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u0438\u043c\u0438 \u0434\u0432\u0443\u043c\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043f\u043e \u043c\u0435\u0440\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u043e\u0434\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e.<\/p>\n
13.7 \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u043e\u0434\u0435\u043b\u0438<\/h5>\n
  \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u2013 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0432\u0432\u0435\u0434\u0451\u0442. \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043a\u043d\u043e\u043f\u043a\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u041c\u043e\u0434\u0435\u043b\u0438. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0432\u0432\u0451\u043b \u0438\u043c\u044f, \u0444\u043e\u0440\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c.<\/p>\n
<input type="text" ng-model="user.name" placeholder="\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043c\u044f"> <button ng-disabled="!user.name.length">   \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0438\u043c\u044f <\/button> <\/code><\/pre>\n
  \u0415\u0441\u043b\u0438 user.name.length \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 true, \u043a\u043d\u043e\u043f\u043a\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f. \u0418 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0451 \u0432\u0440\u0435\u043c\u044f, \u043f\u043e\u043a\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0444\u043e\u0440\u043c\u043e\u0439.<\/p>\n
14 \u041e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0447\u0435\u0440\u0435\u0437 $http \u0438 $resource<\/h4>\n
  \u0414\u043b\u044f \u0441\u0432\u044f\u0437\u0438 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0432 Angular \u0435\u0441\u0442\u044c \u0434\u0432\u0430 API, $http \u0438 $resource. \u042d\u0442\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0441\u0432\u044f\u0437\u0438 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0446\u0438\u043a\u043b\u044b $digest, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044f \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438.<\/p>\n
14.1 $http<\/h5>\n
  \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043c\u0435\u0442\u043e\u0434\u043e\u043c jQuery $.ajax, \u0442\u043e \u0432\u0430\u043c \u0432\u0441\u0451 \u0441\u0440\u0430\u0437\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u043e. \u041c\u0435\u0442\u043e\u0434 $http \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u043a\u0430\u043a \u043e\u0431\u044a\u0435\u043a\u0442. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 $http({…}), \u0438\u043b\u0438 \u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u0440\u043e\u0434\u0435 $http.get(…). \u041c\u0435\u0442\u043e\u0434 $http \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 API \u043e\u0431\u0435\u0449\u0430\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c $q.<\/p>\n
  \u041c\u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u044b \u0441 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u044c\u044e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u0445. \u0412\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441 GET:<\/p>\n
$http.get('\/url') .success(function (data, status, headers, config) {  }) .error(function (data, status, headers, config) {  }); <\/code><\/pre>\n
  \u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0435 \u0438 \u043d\u0435\u0443\u0434\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u0438 \u0432 \u043e\u0442\u0432\u0435\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438. \u041e\u0431\u044b\u0447\u043d\u043e \u0432\u0441\u0435 \u0441\u0440\u0430\u0437\u0443 \u043e\u043d\u0438 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434:<\/p>\n
$http.get('\/url') .success(function (response) {  }) .error(function (reason) {  }); <\/code><\/pre>\n
  \u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043e\u0431\u0435\u0449\u0430\u043d\u0438\u0439 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 .then(), \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0432 Angular:<\/p>\n
$http.get('\/url') .then(function (response) {   \/\/ \u0443\u0441\u043f\u0435\u0445 }, function (reason) {   \/\/ \u043f\u0440\u043e\u0432\u0430\u043b }); <\/code><\/pre>\n
  \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 jQuery, Angular \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u0437\u043e\u0432\u044b $http \u0432 $scope.$apply(), \u0447\u0442\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0446\u0438\u043a\u043b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u0432\u044f\u0437\u0438.<\/p>\n
14.2 $resource<\/h5>\n
  \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 $http \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c ngResource. \u0412 \u043d\u0451\u043c \u0435\u0441\u0442\u044c API $resource, \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0434\u043b\u044f CRUD-\u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 (create, read, update, delete). $resource \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430\u043c REST.<\/p>\n
function MovieService ($resource) {   return $resource('\/api\/movies\/:id', { id: '@_id' },     {       update: {         method: 'PUT'        }     }   ); } angular   .module('app')   .factory('MovieService', MovieService); <\/code><\/pre>\n
  \u041c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0444\u0430\u0431\u0440\u0438\u043a\u0443 Movies \u0432 \u043d\u0430\u0448\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n
function MovieCtrl (MovieService) {   var movies = new MovieService();   \/\/ \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u0438\u043b\u044c\u043c\u0430   movies.update(\/* some data *\/); } angular   .module('app')   .controller('MovieCtrl', MovieCtrl); <\/code><\/pre>\n
<\/div>\n<\/p><\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/247283\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
       \u0427\u0430\u0441\u0442\u044c 1<\/i><\/a><\/p>\n
4.1 $rootScope<\/h4>\n
  $rootScope \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 $scope, \u043f\u0440\u043e\u0441\u0442\u043e \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 $scope \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041a\u043e\u0433\u0434\u0430 Angular \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 $rootScope, \u0438 \u0432\u0441\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0438 \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b $scope, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0430\u043c\u0438 $rootScope.<\/p>\n
  \u041e\u0431\u044b\u0447\u043d\u043e \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c $rootScope, \u043d\u043e \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u043c\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-247283","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/247283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=247283"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/247283\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=247283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=247283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=247283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}