AngularJs Controller
AngularJs Controller управляет данными из приложений AngularJS.
AngularJs Controller - это обычный объект JavaScript.
AngularJs Controller
Приложение AngularJS контролируется контроллером.
Директива NG-Controller определяет контроллер приложения.
Контроллер - это объект JavaScript, созданный конструктором стандартного объекта JavaScript.
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "personctrl"> name: <input type = "text" ng-model = "firstname"> <br> name: {{fullname ()}} </div> <cript> var app = angular.module ('myApp', []); $ scope.lastname = "doe";Результаты работы:
имя:
фамилия:
Имя: Джон Доу
Приложения AngularJS определяются NG-APP. Приложение работает в пределах <div>.
Свойство ng-controller = "myctrl" является директивой AngularJS. Используется для определения контроллера.
Функция MyCtrl - это функция JavaScript.
Angularjs использует объект $ scope, чтобы вызвать контроллер.
В AngularJS $ Scope является объектом приложения (принадлежит переменным приложения и функциям).
Применение $ контроллера (эквивалентная области объема и управления) используется для сохранения объекта модели AngularJS.
Контроллер создает два свойства (FirstName и Lastname) в сфере прицела.
Директива NG-модели связывает входной домен со свойствами контроллера (FirstName и Lastname).
Метод контроллера
Приведенный выше пример демонстрирует объект контроллера с двумя свойствами: Lastname и FirstName.
Контроллер также может иметь методы (переменные и функции):
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "personctrl"> name: <input type = "text" ng-model = "firstname"> <br> name: {{fullname ()}} </div> <cript> var app = angular.module ('myApp', []); $ scope.lastname = "doe";Эффект бега:
имя:
фамилия:
Имя: Джон Доу
Контроллеры во внешних файлах
В крупных приложениях контроллер обычно хранится во внешнем файле.
Просто скопируйте код в теге <Script> на внешний файл с именем PersonController.js:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "personctrl"> name: <input type = "text" ng-model = "firstname"> <br> Имя: <input type = "text" ng-model = "lastname"> <br> <br> name: {{firstname + "" + lastname}} </div> <script src = "personcontroller.js"> </script> </body> </html>Результаты работы:
имя:
фамилия:
Имя: Джон Доу
Другие примеры
Следующий пример создает новый файл контроллера:
Angular.Module ('myApp', []). Controller ('namesctrl', function ($ scope) {$ scope.names = [{name: 'jani', страна: 'norway'}, {name: 'hege', страна: 'sweden'}, {name: 'Kai', country: 'den name'}];});Сохраните файл как namescontroller.js:
Затем используйте файл контроллера в приложении:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "namesctrl"> <ul> <li ng-repeat = "x в именах"> {{x.name + ',' + x.country}} </li> </ul> </div> <script src = "kinescontroller.js"> </script> </body> </html>Эффект бега:
Выше приведено сборник данных контроллера AngularJS, который будет дополнен позже.