MEAN�X�^�b�N��p����Web�A�v���̊J�����@�ɂ��ďЉ�Ă����A�ځB����́AAngularJS�̃R���g���[���[��as�L�@�̎g�����ɉ����A���܂��܂ȃf�[�^�o�C���f�B���O�̍s�����Ȃǂɂ��ĉ������B
�@�O��́u���܂��畷���Ȃ�AngularJS�̊�b�m����5�̎�ȓ����A�C���X�g�[���A�ȒP�Ȏg�����v�ł́AAngularJS�̊T�v�ɂ��ďЉ�܂����B����͈��������AAngularJS�ɂ��ĉ�����Ă����܂��B
�@�Ȃ��A�{�L�������Ď��ۂɃT���v�����������ꍇ�́A�ȑO�̘A�ڋL���i��1���A��2���j�����Ċ����쐬���Ă����܂��傤�B
�@�O��̃T���v���ł́A��肠����HTML�����g�p����AngularJS�����Ă݂܂������A���ۂ̃A�v���ł̓R���g���[���[�Ƌ��Ɏg�p���邱�Ƃ������ł��B�����ł̓R���g���[���[�̊�{�ɂ��Đ������܂��B
�@AngularJS�ɂ����ăR���g���[���[�iController�j�́A���f���ƃr���[�𑀍삷�邽�߂̃R���|�[�l���g�ł���A���[�U�[�̑���ɉ�����������T�[�o�[�ʐM���s���ꍇ�ȂǂɎg�p���܂��B���̃R���g���[���[�̎��Ԃ́AAngularJS�̃X�R�[�v�I�u�W�F�N�g�i��q�j���g�p����AJavaScript�̃I�u�W�F�N�g�ł��B
�@�ł́A�V���v���ȃR���g���[���[�̗�����Ă݂܂��傤�i�������ł��A�ڑ�6���ō쐬����simple-angular�v���W�F�N�g���C�����Ďg�p���܂��j�B
�@�܂��͕\������HTML�iindex.html�j���L�q���܂��B
<!DOCTYPE html> <!-- 1 --> <html ng-app="mySimpleApp"> <head> <script src="bower_components/angular/angular.js"></script> <!-- 2 --> <script src="js/controller.js"></script> </head> <body> <!-- 3 --> <div ng-controller="MySimpleController"> <p>{{message}}</p> <button ng-click="greet()">click</button> </div> </body> </html>
�@�ȑO�Ƃ̈Ⴂ�́A���̒ʂ�ł��B
�@�O��Ang-app�f�B���N�e�B�u�́uAngularJS�̓K�p�͈͂��w�肷��v�Ɖ�����܂����B���̂Ƃ���ng-app���w�肵�������ł������A��L�̂悤�Ƀ��W���[�������w�肷�邱�Ƃ��ł��܂��B�����ł́A�umySimpleApp�v�Ƃ������O�̃��W���[����html�ȉ��ɓK�p���Ă��܂��B
�@AngularJS�ł̓��W���[���Ƃ��ăv���O������������x�̋K�͂ɂ܂Ƃ߂邱�ƂŁA�v���O�������ė��p���₷���Ȃ�����A���j�b�g�e�X�g�����₷���Ȃ����肵�܂��B���W���[�����͌�q����angular.module���g�����Ƃʼn\�ɂȂ�܂��B
�@���̌��������AAngularJS�̃R���g���[���[�pjs�t�@�C����ǂݍ���ł��܂��B
�@ng-controller�f�B���N�e�B�u�Ŏg�p����R���g���[���[���w�肵�Ang-click�ŁA�{�^���N���b�N���ɒ�`���ꂽ�������s���܂��B�����āAmessage�̕\������ւ��܂��B
�@�R���g���[���[���`����js�t�@�C�������Ă݂܂��傤�B
//���W���[���̒�` var myApp = angular.module('mySimpleApp',[]); //�R���g���[���[�̒�` myApp.controller('MySimpleController', ['$scope', function($scope) { $scope.message = 'initial message'; $scope.greet = function() { $scope.message = 'hello!'; }; }]);
�@�����ł͍ŏ���angular.module�����g����mySimpleApp���W���[�����`���Ă��܂��B
�@���Ȃ݂ɁAangular.module�͉��L�̂悤�Ɂu���W���[���̍쐬�v�Ɓu���W���[���擾�v�Ƃ���2��ނ̎g����������̂Œ��ӂ��Ă��������B
// ��2�����ɔz����w�肵���ꍇ�A // ���W���[����V�����쐬(�����̂��̂�����Ώ㏑��) var newMod = angular.module('simpleModule', []); // ��2�������w�肵�Ȃ��ꍇ�A // �����̃��W���[�����擾 var existsMod = angular.module('simpleModule');
�@���W���[���쐬��Acontroller�����g�����ƂŃR���g���[���[���`���Ă��܂��B��1�����̓R���g���[���[���ŁA��2�����̔z��ł̓A�m�e�[�V�������g�p���ăR���g���[���[�Ɂu$scope�v��DI�i�ˑ��������j���Ă��܂��iDI�ɂ��Ă͍���̘A�ڂʼn�����܂��j�B
�@$scope�Ƃ́AAngularJS�Ŏg�p����I�u�W�F�N�g�̈�ł��B�����Œ�`�����l����́A�f�B���N�e�B�u��html�Ŏg�p���邱�Ƃ��ł��A���f���̊Ď��Ȃǂ��s�����Ƃ��ł��܂��B
�@�����܂ŋL�q�ł�����Aindex.html���u���E�U�[�ŕ\�����Ă݂Ă��������B�{�^�����N���b�N����ƁA���b�Z�[�W����ւ��܂��B
�@�ȑO��AngularJS�i1.1�n�j�ł́AController��$scope�̐ݒ���s���AController���g�p����html����$scope�̊���l���Q�Ƃ�����@��������܂���ł����B������AngularJS 1.2�ȍ~�ł́Ang-contoller�f�B���N�e�B�u��as�L�@���g�p���āA$scope���g�킸��Controller�ւ̎Q�Ƃ�html����s����悤�ɂȂ�܂����B
�@as�L�@���g�p���ĈȑO�̃T���v��������������ƁA���̂悤�ɂȂ�܂��B
�@�܂���controller.js�����Ă݂܂��傤�B
var myApp = angular.module('mySimpleApp',[]); myApp.controller('MySimpleController',function() { this.message = 'initial message'; this.greet = function() { this.message = 'hello!'; }; });
�@��قǂ̃T���v���ł́Acontroller����$scope��DI���A$scope�I�u�W�F�N�g�ɑ��ĕϐ�������`���Ă��܂������A�����ł�$scope���g���Ă��܂���B
�@���ɁAhtml�����Ă݂܂��B
�E �E <div ng-controller="MySimpleController as simple"> <p>{{simple.message}}</p> <button ng-click="simple.greet()">click</button> </div> �E �E
�@as�L�@�͉��L�̂悤�ɏ����܂��B�����ł́AMySimpleController���usimple�v�Ƃ����Q�Ɩ��Ŏg�p�ł���悤�ɒ�`���AController�Œ�`�����ϐ�������g�p���Ă��܂��B
ng-controller="�o�R���g���[���[���p as �o�Q�Ɩ��p"
�@�����̗�͂ǂ������������ƂȂ�܂����A���L�T�C�g�Ō��y����Ă���悤�ɁA�v���g�^�C�v�`�F�[���ɂ܂����������N�����\�������邽�߁Aas�L�@�̕�����������Ă���悤�ł��B
Copyright © ITmedia, Inc. All Rights Reserved.