ºÝºÝߣ
Submit Search
Angular js ???? ??? ???
?
Download as PPTX, PDF
?
0 likes
?
380 views
Tae Ho Kang
Follow
Angular js ???? ??? ???
Read less
Read more
1 of 18
Download now
Download to read offline
More Related Content
Angular js ???? ??? ???
1.
Lesson 08 ???? ???
??? ????? AngularJS ????? Undefined
2.
AngularJS??? ???? ? AngularJS
???: ???? 1. ?????? ?? ?????? ??? 2. ???Singleton???? ??? 3. ?????? ??Hub??? ??? 4. ??? ?? ?? Injectable Dependencies???? ??? ¨C ??? ???? ? ???? ??? ???? ???? ??? ???????? ??? ??? ???? ???? ???. ? ??? ¨C (???? ??) $provide? ??? ??? ?? ? ¨C ???, ?? ????? ??? ??? ?? ??
3.
AngularJS??? ???? ?? ?
AngularJS ??? ????? ?????? ??? ?? ? ??? ????? ??? ?? 1. new ???? ?? ???? ?? 2. ???? ??? ?? ???? ?? 3. ??? ??? ??? ???? ???? ?? ¨C 1, 2?? ????? ??? ????? ?? 3?? ???? ????? ??. ? ??? ??? ?? ??? ???? ?? ????? ????
4.
AngularJS??? ???? ?? 1)
new ???? ?? ???? ?? demoCtrl ??? BookmarkResource??? ???? ??. ? ??? ???? BookmarkResource? ???? ?? Ajax? JsonParse??? ???? ?? ??? ?. ?, Ajax ???? ??? JsonParse??? ?? Xml ???? ???? ?? ??? ?? ???? ??. function demoCtrl(){ var bookmark = new BookmarkResource(new Ajax(), new JsonParse()); }
5.
AngularJS??? ???? ?? 2)
???? ??? ?? ???? ?? BookmarkResource? ??? ??? ????? ?? ???? ??? ??? ????? ??? ??? ???? ????. ???? ??? BookmarkResource? ??? ???? ??? ???? ??? ??? ???? BookmarkResource? ???? getAjax, getJasonParser??? ??? ??? ??? ???? ??. ??? ???? ??? bookmark ??? ?? ?? demoCtrl ??????? BookmarkResource? ??? ???? ??? ??. ?? ??? Ajax? ???? Json ??? ?? Xml ???? ????? ?? ???? ??? ??? ?? ?? ??? ??? ???? ??. ??? ??? ?????? ???? ??????? ??? ???? ???? ???? ? ?? ?? ???? ?? ?????? ???. var factory = { getBookmarkResource: function(){ return new BookmarkResource(factory.getAjax(), factory.getJasonParser(); }, getAjax: function() { return new Ajax(); }, getJasonParser: function() { return new JsonParser(); } } function demoCtrl(){ var bookmark = factory.getBookmarkResource();
6.
AngularJS??? ???? ?? 3)
??? ??? ??? ???? ???? ?? ? ??? ??????? BookmarkResource? ??? ???? ????? ??? ?? ? ? ?? . ??? ??? ??? BookmarkResource? ??????? ??? ?? ???? ??? ?? ???. ????(DI)??? ??? ?? ????? BookmarkResource? ?? ??? ????. ??????? BookmarkResource? ??? ????? ? ??? ?? ???????? ???? ??? ???? BookmarkResource? ?? ?? ? ?? ???. ?? ?????? ?? ???. function demoCtrl(BookmarkResource) { var bookmark = BookmarkResource.get(); }
7.
Module.factory? ??? Hello
??? ??? ?? ??? 3? ??? ??? ??? ???? ???? ??? BookmarkResource ???? ??? ????? ??. ???? ???? ?? ????? ????. angular.module()??? ??? ??? ??? ?? ????? ?? ? ?? angular.module(¡®sampleApp¡¯, []) .factory(¡®hello¡¯, [function() { var helloText = ¡°? ?????.¡±; return { say : function(name) { return name + helloText; } }; }]) .controller(¡®mainCtrl¡¯, function($scope, hello) { $scope.hello = hello.say(¡°??¡±); }); <div ng-controller=¡°mainCtrl¡±> <p>{{hello}}</p></div>
8.
??? ?? ?? ?
??? ?? $provide.factory(...)? ? ? ??. ?? API? factory ??? $provide.factory ??? ????? ???. ???? ?? ?? ????? factory ???? ?? $provide.factory ???? ?? ??? ??? ??? ??? ??? ??? $injector? ??? ??? ??? ? ???. ? ???? ?? ?? ?? AngularJS ???? ??? ????? ??? ? $injector.invoke ???? ????? ?? ????? ????? ?? ??? ??? $injector.get("?? ??")?? ??? ?? ?? ????? ???? ??? ??? ???? ??? ?? ?? ? ??? invoke?? ??? ??? ????.
9.
$provide? ??? Provider
?? - Value? ???? ?? sampleApp ?? ??? ??? ?? ??? value ???? ??? AppNm ???? ????. AppNm ???? ??? ¡®demo app¡¯ ??? ?? ??? ?? ????. ?? ???? mainCtrl?????? ??? ???? ????. angular.module(¡®sampleApp¡¯, []) .value(¡®AppNm¡¯, ¡®demo app¡¯) .controller(¡®mainCtrl¡¯, function($scope, AppNm) { $scope.appNm = AppNm; });
10.
$provide? ??? Provider
?? - Factory? ???? ?? Factory? ???? ???? ??? ?? ?? ?? ?? API? ??? $provide.factory ???? ????? Value?? ??? ? ?? ??? ??? ??? ??. ?? ??? ??? ???? ???? ???? ?? ???? ? ? ??. Module.factory(¡®?????¡¯, function([???? ???]){ ¡¡¡¡¡. });
11.
$provide? ??? Provider
?? - Service? ???? ?? ?????? ??? ??? ?? OOP ??? ??? ??? ? ??. Service ???? ??? ??? ??? ???? ? ????. $provide.service ???? ?? ???? ???? ?? ??? ????. (1) factory(¡®CalcByF¡¯, [function () { return new Calculator(); // new ??????, ??? }]) (2) service(¡®CalcByS¡¯, Calculator); // servcie ???? ?? ??? ?? ???? ?? Ex) function Calculator($log) { // Calculator ??? ??? $log ???? ?? ???? ??? ?? this.lastValue = 0; this.add = function(a, b) { ¡¡¡¡.. } ; }
12.
$provide? ??? Provider
?? - Provider? ???? ??(1) ???? $provide? value, factory, service ???? ?????, ?? alias?? ??? ??? ?? ???? ??? ? AngularJS? $provide.provider?? ??????. angular.module(¡®sampleApp¡¯, []) .provider(¡®Logger¡¯, [ function() { function Logger(msg) { ¡¡. } ¡¡¡. this.$get = [function() { return Logger; }]; }]) } }); Provider ???? ??? ? factory, service ? ????? ??? ??? ??? ?? ?? ???? provider ??? ????. ? provider ??? this.$get = [funciton(){¡.}]? ???? ??? ??. ? this.$get? ??? ??? ??? $injector? ???? ?? ??? ???? ?? ? ????.
13.
$provide? ??? Provider
?? - Provider? ???? ??(2) Factory???? ?? ???? ??? ??? ???? ? ??? ?? ?? ? Function service(name, Class) { $provide.provider(name, function() { this.$get = function($injector) { return $injector.instaniate(Class); }; }); } // service ???? ???? ??? ??? ????? ?? // ? ??? ???? ??? ????.
14.
$provide? ??? Provider
?? - ??? ????? ???? ??? ?? ???? ??? factory? service ???? ????? ??? ???? provider ???? ????? ??. ???? ???? ?? ??? ??? ?? ? ?? ??. module API? config??? ??? ? ??. Config ??? ????? ??? ?????? ??? ? ?? ???? ??? ??. this.setDefaultLevel = function(level) { switch(level) { case ¡®debug¡¯: ¡ .config(¡®LoggerProvider¡¯, function(LoggerProvider) { LoggerProvider.setDefaultLevel(¡°debug¡±); }]) Logger ??? ?????? setDefaultLevel ???? ?? ?? ??? ????. ??? this? ???? ?? ??? ????? ??. ??? ? Logger ??? ?????? Module.config ????? ???? ??? ????? ?? ?? this ??? ??? ???? ???? ?? ? ? ??. ??? AngularJS? ??? ¡°????Provider¡±¡±? ??? ????? ??? ???.
15.
$provide? ??? Provider
?? - constant? ???? ?? PI?? ??? ?? constant ???? ??? ??? ??. ? ??? circle ????, Cal ????? ??? ????. Constant ???? ????? config???? ??? ? ?? ?????? ?? ??? ? ??. angular.module(¡®sampleApp¡¯, []) .constant(¡®PI¡¯, 3.14159) .provider(¡®Cal¡¯, [function() { var defaultRadius = 10; this.setDefaultRadius = funciton(radius) { defaultRadius = radius; } this.$get = [¡®PI¡¯, function(PI) { return { ¡¡. } } }]) .config(function (CalProvider, PI) { CalProvider.setDefaultRadius(5); console.log(PI); }) .directive(¡®circle¡¯, [¡®Cal¡¯, ¡®PI¡¯, function(Cal, PI) { return { restrict : ¡®E¡¯, template : ¡®<canvas width = ¡°100¡± height=¡°100¡±></canvas>¡¯, ¡¡¡ }) }); ??constant? ???? ??? ?value?? ???? ??? ????. - ??? * constant ???? ??? ??? : config ????? ??? ? ??. * value ???? ??? ??? : config ????? ??? ? ??.
16.
$injector? ??? ???
??(1) sampleApp ?? ?? ?, var injector = angular.injector([¡®ng¡¯, ¡®sampleApp¡¯])? ??? $injector ??? ??? ??. ??? has ???? ??? ???? ng ??? sampleApp ??? ??? ??? ??. Hello?? ???? ?? ???? ???? get ???? ??? Hello ??? ??? ??? helloTo ???? ??? Hello ??? ?? - $injector? ??? * invoke : ??? ??? ????? ??? ???? ???? ?? * instantiate : ??? ??? ??? ??? ? ? ??? ???? ???? ?????. // AngularJS ? ?????? ?? ?? angular.module(¡®sampleApp¡¯, []) .factory(¡®Hello¡¯, [function() { return { helloTo : function(name) { console. Log (¡®hello¡¯ + name); } }; }]) // AngularJS ? ?????? ?? ?? var injector = angular.injector([¡®ng¡¯, ¡®sampleApp¡¯]), hasHello = injector.has(¡®Hello¡¯), HelloSvc = null; if(hasHello) { HelloSvc = injector.get(¡®Hello¡¯); HelloSvc.helloTo(¡°??¡±); }); AngularJS ? $injector? $provide? ?? ??? ??? ?????? ??? ??? ????? ???? ??? ??. $injector? AngularJS??????? ??? ? ???? ??. ??? $injector? ?????. - ?? ?????? ????? ?? ???? ??? ??. var injector = angular.injector([¡®mySampleModule¡¯, ¡®ng¡¯]);
17.
$injector? ??? ???
??(2) Invoke ???? instantiate ???? ??? <body>??? ¡°hello ??¡± ???? ????. invoke? ??? ??? ???? ???? Instantiate? ??? ??? ??? ??? ??? ????. HelloAppender? AngularJS?? ???? $compile, $rootScope???? ???? ??? Hello ???? ??? ??? ???? ????? <body>??? ????. // AngularJS ? ?????? ?? ?? $(function() { var injector = angular.injector([¡®ng¡¯, ¡®sampleApp¡¯]), invokeReturnValue = null, helloAppenderInstance1 = null, helloAppenderInstance2 = null; invokeReturnValue = injector.invoke(function(Hello) { var hello = Hello.helloTo(¡®??¡¯); $(¡®body¡¯).append(hello); return hello; }); function HelloAppender(Hello, $compile, $rootScope) { var helloEl = $(¡®<p>{{hello}}</p>¡¯); var scope = $rootScope.$new(); scope.hello = ¡°¡±; $(¡®body¡¯).append($compile(helloEl)(scope)); // $compile: ??? ???DOM? scope??, scope??? ?? ?? ???? DOM? ?? this.setName = function (name ) { scope.hello = hello.helloTo(name); scope.$digest(); } ; }
18.
???? ??? ??
? ?? ? - AngularJS ???? $injector? ??? ??? ???? ????? ??? ???? ???? ? ?, AngularJS?? DI? ??? ?? ? ???? ?? ?? ? ??? ?? ?? ? ?? ?? ?? ? $provide? provider ?? ?? ? this.$get? ??? ?? ? $provide? factory ?? ?? ? $provide? service ?? ?? ? AngularJS? ???? ???
Download