ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
Lesson 08
???? ??? ???
????? AngularJS ?????
Undefined
AngularJS??? ????
? AngularJS ???: ????
1. ?????? ?? ?????? ???
2. ???Singleton???? ???
3. ?????? ??Hub??? ???
4. ??? ?? ?? Injectable Dependencies???? ???
¨C ??? ???? ? ???? ??? ???? ???? ???
???????? ??? ??? ???? ???? ???.
? ???
¨C (???? ??) $provide? ??? ??? ?? ?
¨C ???, ?? ????? ??? ??? ?? ??
AngularJS??? ???? ??
? AngularJS ??? ????? ?????? ??? ??
? ??? ????? ??? ??
1. new ???? ?? ???? ??
2. ???? ??? ?? ???? ??
3. ??? ??? ??? ???? ???? ??
¨C 1, 2?? ????? ??? ????? ??
3?? ???? ????? ??.
? ??? ??? ?? ??? ???? ?? ?????
????
AngularJS??? ???? ??
1) new ???? ?? ???? ??
demoCtrl ??? BookmarkResource??? ???? ??.
? ??? ???? BookmarkResource? ???? ??
Ajax? JsonParse??? ???? ?? ??? ?.
?, Ajax ???? ??? JsonParse??? ??
Xml ???? ???? ?? ??? ?? ???? ??.
function demoCtrl(){
var bookmark = new BookmarkResource(new Ajax(), new JsonParse());
}
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();
AngularJS??? ???? ??
3) ??? ??? ??? ???? ???? ??
? ??? ??????? BookmarkResource? ??? ????
????? ??? ?? ? ? ?? .
??? ??? ??? BookmarkResource? ???????
??? ?? ???? ??? ?? ???.
????(DI)??? ??? ?? ?????
BookmarkResource? ?? ??? ????.
??????? BookmarkResource? ??? ????? ?
??? ?? ???????? ???? ??? ????
BookmarkResource? ?? ?? ? ?? ???.
?? ?????? ?? ???.
function demoCtrl(BookmarkResource) {
var bookmark = BookmarkResource.get();
}
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>
??? ?? ??
? ??? ?? $provide.factory(...)? ? ? ??.
?? API? factory ??? $provide.factory ??? ????? ???.
???? ?? ?? ????? factory ???? ?? $provide.factory ???? ??
??? ??? ??? ??? ??? ??? $injector? ??? ??? ??? ? ???.
? ???? ?? ?? ?? AngularJS ???? ??? ????? ??? ?
$injector.invoke ???? ?????
?? ????? ????? ?? ??? ??? $injector.get("?? ??")?? ??? ??
?? ????? ???? ??? ??? ????
??? ?? ?? ? ??? invoke?? ??? ??? ????.
$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;
});
$provide? ??? Provider ??
- Factory? ???? ??
Factory? ???? ???? ??? ?? ?? ??
?? API? ??? $provide.factory ???? ?????
Value?? ??? ? ?? ??? ??? ??? ??.
?? ??? ??? ???? ???? ???? ??
???? ? ? ??.
Module.factory(¡®?????¡¯, function([???? ???]){
¡­¡­¡­¡­¡­. });
$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) {
¡­¡­¡­¡­.. } ;
}
$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? ???? ?? ??? ????
?? ? ????.
$provide? ??? Provider ??
- Provider? ???? ??(2)
Factory???? ?? ???? ??? ??? ???? ? ??? ?? ?? ?
Function service(name, Class) {
$provide.provider(name, function() {
this.$get = function($injector) {
return $injector.instaniate(Class);
};
});
} // service ???? ???? ??? ??? ????? ??
// ? ??? ???? ??? ????.
$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¡±¡±? ??? ????? ??? ???.
$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 ????? ??? ? ??.
$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¡¯]);
$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(); } ;
}
???? ??? ?? ? ?? ?
- AngularJS ???? $injector? ??? ??? ????
????? ??? ???? ???? ?
?, AngularJS?? DI? ??? ??
? ???? ?? ??
? ??? ?? ??
? ?? ?? ??
? $provide? provider ?? ?? ? this.$get? ??? ??
? $provide? factory ?? ??
? $provide? service ?? ??
? AngularJS? ???? ???

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? ???? ???