AngularJS�̗����Ō������Ȃ��R���g���[���[��as�L�@�A�f�[�^�o�C���f�B���O�̊�{�I�Ȏg�����FMEAN�X�^�b�N�Ŏn�߂�Web�A�v���J������i7�j�i1/2 �y�[�W�j

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

» 2015�N11��06�� 05��00�� ���J
[�����C���C�N���X���\�b�h]
uMEANX^bNŎn߂WebAvJṽCfbNX

�A�ږڎ�

�@�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

AngularJS�̃R���g���[���[

�@�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�\�\�ȑO�Ƃ̈Ⴂ

�@�܂��͕\������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>
index.html

�@�ȑO�Ƃ̈Ⴂ�́A���̒ʂ�ł��B

  • �y1�zhtml�^�O��ng-app�Ń��W���[�������w�肳��Ă���

�@�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

  • �y2�zcontroller.js��ǂݍ���ł���

�@���̌��������AAngularJS�̃R���g���[���[�pjs�t�@�C����ǂݍ���ł��܂��B

  • �y3�zdiv�^�O�ŃR���g���[���[���w�肵�Ă���A���̒��ŃN���b�N�C�x���g���w�肵�Ă���

�@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���\�\�u$scope�v��DI�i�ˑ��������j

�@�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!';
    };
}]);
js/controller.js

�@�����ł͍ŏ���angular.module�֐����g����mySimpleApp���W���[�����`���Ă��܂��B

�R�����@angular.module�́u���W���[���̍쐬�v�Ɓu���W���[���擾�v�Ƃ���2��ނ̎g����

�@���Ȃ݂Ɂ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

AngularJS 1.2�ȍ~�́uas�L�@�v��Controller�̒l���Q�Ƃ���

�@�ȑ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!';
    };
});
js/controller.js�i���R�����g�͏ȗ��j

�@��قǂ̃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
index.html

�@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

�@�@�@�@�@�@ 1|2 ���̃y�[�W��

Copyright © ITmedia, Inc. All Rights Reserved.

'; if( !this.isSubscription ) { this.insertTarget = document.querySelector('#cmsBody .subscription') || document.querySelector('#cmsBody .inner'); } }; BodyAdIMSWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdIMSWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); } // global reference window.itm = itm; //entry point BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); })();
�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

4AI by IT - AIAAA
Microsoft  WindowsőO2025
AI for GWjAO
[R[h^m[R[h Zg by IT - ITGWjArWlX̒SŊ􂷂gD
Cloud Native Central by IT - XP[uȔ\͂gD
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B