????Angular????кü?????????? ????????MV*??????? ?????????????????????Model??????????????????????Web????????????????????? ???? ??????????????????directive?? ???????????????鷳??DOM??????? ??????Щ?? Angular??????????????? ?????????????.
??????Web??????????????? ??????????????????????????? ????? ?????????????????????. ??????????????????????????? ?????????????? ???????????? ???????????? ?????????????????? ????????????????????????????????? ??????棬 ????????????????????? ??????????????????????????????? ??????ò??·???????????????????????? ????????????? ???????????????????????????????? ???????????????????????????????.
????????????α????????????????????Angular?? ??????Angular??????????????? ???????Angular?????????? ???????????Angular???????????д?? ??JUnit + Mockito???????? Angular???????????????о?д?????????????? ???????TDD??????????????.
????????????????Angular?????Angular?????????? ????????????????????????????????. ????????????????? ???????????????????Angular???? ????????????Angular???????????????? ??????Angular????????????????? ?????????????е???? ??????д???????????.
???????????????Angular??????????? ???????ж?????????￡? ???????????????????:Thinking in Angular
????????????????????Angular????????????????Angular????.
????????????κε?DOM????
??????DOM??????????????????y???Angular?????directive????? ?????Angular??????????????DOM??????????. ???????????????? ??????????????????????????directive?? ????????????? ?????????????????????????? ????????е???????????????? ?????????? ??????????????????????????????????? ?????????????????????
????<label for=“email”>Your email:</label>
????<input id=“email” type=“text” ng-model=“email” validate-on-blur/>
????angular.module(“TheNG”?? [])
????.directive(“validateOnBlur”?? function () {
????return {
????link: function (scope?? element?? attrs) {
????var validate = function (email) {
????return email.indexOf(‘@gmail.com’) !== –1;
????};
????element.on(‘blur’?? function () {
????if (!validate(scope.email)) {
????element.addClass(‘error-box’);
????}
????});
????}
????};
????}
????);
??????????????????????????????(???????????????????????? ???????????)?? ???????directive?????????????? ????????????????????????????????????????д??????????.
????????????????directive?????????????DOM???????????.
???????????????on()????????????. ?????б?????????????????directive???ε???????????? angular???????????directive??????????飬 ?????????????????????ng-blur??????blur???.
????????????????????addClass()?? angular???????????????????directive?? ???????????????????directive??ng-class?????????滻addClass()????.
????????????·????????:
????<label for=“email”>Your email:</label>
????<input id=“email” type=“text” ng-model=“email” ng-blur=“validate()” ng-class=“{‘error-box': !isValid}” validate-on-blur/>
????angular.module(“TheNG”?? [])
????.directive(“validateOnBlur”?? function () {
????return {
????link: function (scope?? element?? attrs) {
????scope.isValid = true;
????scope.validate = function () {
????scope.isValid = scope.email.indexOf(‘@gmail.com’) !== –1;
????};
????}
????};
????}
????);
?????????????????汾?????? ??????????汾?????? ??????????Щ. ???μ?汾???棬 ??????????????????? ???ж????????????????? ??????????????? ???????????????????????????? ?????????????angular???directive???????.
?????????????????? ????????????汾?????д???????? ?????????????????????? ????????跨????????????blur????? ????????????????????????error-box???class?? ?????????飬 ?????????????ЩDOM???￡? ?????ò??????????DOM??????DOM tree????? ??????????????????.
???????汾????????? ??????????Model?isValid???????????????????????validate()??????????????????????У? ?????????????? ?????????????????validate()?????? ??????isValid?????????. SO EASY!~