Angular 응용 프로그램 기술 요약

앵글러의 핵심 사고 방식은 모든 것을 데이터로 드라이브하는 것입니다. 다른 것들은 데이터의 확장입니다.

제이스크립트의 모든 것이 객체라는 사고 방식을 따라, 앵글러에서는 모든 것이 데이터라고 말할 수 있습니다.

　 关于项目构建　　　

　　　 (1) requirejs以及Yeoman

　　　 在刚开始接触或使用Angular的时候，总会对类似问题感到疑惑，我实践的答案是无需使用requirejs或Yeoman。前者不使用，因为Angular本身有module的实现。后者是因为Angular的组织结构以及项目构建没有必要弄得如此复杂，可以手写或者在GitHub上pull一个seed项目。

　　　 (2) 如何组织项目结构

　　　 这个问题有点棘手，因为完全因人而异，因项目而异。个人推荐的是两种组织结构，一种按照代码功能，也就是controller都放在一个文件夹下，services都放在一个文件夹下。另一种则遵循所实现的功能，比如User就把对应的template，services，controller都放在User文件夹下。

　　　 两种都可以，从维护角度来看，第二种会更好一些。

　　　 (3) controller以及service的划分

　　　 在这里，controller通常就是一个页面一个controller，如果一个页面有公共部分，公共部分永远使用一个controller。对于service需要划分为两个部分，一个是与服务器交互数据的service，另一个是一些功能性common的内容，其中放置一些自己编写的可复用服务，类似于notify等。

　　　 至于service是否需要按照功能和模块进一步划分，这取决于项目。

　　　 (4) Angular插件以及库的使用

　　　 对于一个项目，所有东西都从网上拿现成的肯定不现实，但是所有东西都自己写就更不实际了。Angular的许多插件是由Angular团队开发出来或者由一些人用jQuery插件封装的。我对插件的观点很简单，如果能够满足需求就赶紧使用，不能满足就自己编写或者在已有插件上进行改进。

　　　 对于调试几个小时仍然无法解决的插件，听我的建议，放弃它吧。大多数插件都是一些UI插件，大可不必追求复杂，有时候简单的HTML控件也自有它简约的美。

　　　 如果你遇到Angular插件冲突，尤其是UI插件，大多数情况下需要放弃其中之一，比如angular。-ui와 Angular-strap.　　　

　 使用技巧

　　　 正文从这里开始，我将列举我在使用Angular过程中使用的一些技巧，将按照场景一一列举。这里对于Angular的一些基础概念不会进行解释，本文是一些技巧性的内容，而不是基础教程。

　　　 (1) angular에서 "{{ }}"은 Python의 flask과 충돌합니다

　　　 Python의 flask에서 사용하는 템플릿에서 데이터 바인딩은 두 개의 "{" 대문자 괄호를 통해 이루어집니다. 이는 angular의 데이터 바인딩과 충돌합니다. 이를 해결하는 방법은 두 가지가 있습니다. 하나는 angular의 바인딩 표시를 수정하는 것이고, 다른 하나는 flask의 바인딩 표시를 수정하는 것입니다. 두 가지 방법 모두 제공합니다.

　　　 angular을 수정하다:

$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
// 이 문장을 config에 추가하면 됩니다. route의 module에 추가하세요. 여기서는 기존 angular의 {{ }} 바인딩을 {[{ }]}} 바인딩으로 수정합니다.　　　

　　　 flask을 수정하다:

class CustomFlask(Flask):
  jinja_options = Flask.jinja_options.copy()
  jinja_options.update(dict(
    block_start_string='{%',
    block_end_string='%}',
    variable_start_string='{#',
    variable_end_string='#}',
    comment_start_string='<#',
    comment_end_string='#>',
  ))
app = CustomFlask(__name__, instance_path='/web')

　　　 여기서 저는 flask를 수정하는 것을 추천합니다. 왜냐하면 angular를 사용하면 클라이언트와 서버의 분리가 됩니다. flask의 jinjia 템플릿은 더 이상 필요하지 않으며, Angular의 바인딩 표시를 수정하면 다른 컨트롤과 라이브러리에 문제가 발생할 수 있습니다.

　　　 (2) URL에서 항상 기본적으로 '#'이 포함되도록 제거합니다

　　　 route를 설정할 때, HTML을 활성화합니다5모드.

angular.module('router', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
 function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);  // 
 }
]
  

　　　 (3) ng-click="expression" 및 유사한 명령어, expression에서 여러 표현식을 작성하는 방법은 무엇인가요?63;

　　　 예를 들어, 나는 ng-click에서2변수에 값을 할당하려면, ";" 구분자로 분리할 수 있습니다:

<a ng-click="obja=1;objb=2></a>

　　　 (4) $watch가 작동하지 않거나 한 번만 작동합니다

　　　 이러한 경우 일반적으로 문자나 숫자를 감지할 때 발생합니다, $scope.$watch("name",function(){}). 작동하지 않거나 한 번만 작동하면, 해결책은 $watch를 가능한 한 객체를 감지하는 것이며, 감지하려는 값을 객체에 추가하면 됩니다.

　　　 angular을 사용할 때-ui의 modal이 이렇게 나타납니다. 이유는 $scope의 상속 때문입니다. modal은 현재 페이지의 controller에서 다시 하나의 scope를 생성하는 것과 같기 때문에, 상대적인 값은 프로토타입 루프를 통해 검색할 수 없습니다. 해결책은 객체를 사용하여 프로토타입 루프를 통해 부모 자식 scope 간 데이터 갱신 바인딩을 실현해야 합니다.

　　　 (5) ng를 기대합니다-view의 내용이 전체 페이지로 표시됩니다

　　　 일반적으로 페이지에는 고정된 top-menu나 sidebar과 같은 고정되지 않는 부분, 그리고 매번 route가 변경될 때마다 ng-view의 template, 페이지가 전체적으로 표시되고 싶을 때, top-menu와 같은 고정된 부분.

　　　 이곳은 일반적으로 index.html과 ng-view가 표시하는 template.html, top-menu와 sidebar은 index.html에 위치하며, 그들의 표시/숨기기를 ng를 통해-if 변수를 바인딩합니다.

　　　 만약 페이지가 완전히 표시되고 사이드바 등을 표시하지 않도록 하려면, controller에서 $scope.$emit을 통해 메시지를 전달하고, index 페이지의 controller는 $scope.$on을 통해 메시지를 감지합니다. 메시지를 듣면 사이드바 표시를 제어하는 변수를 변경합니다.

　　　 service를 통해 전역 변수를 제어할 수도 있으며, 개인적으로 메시지 브로드캐스트 방식을 추천합니다.

　　　 (6) 반드시 ng를 사용하십시오-if ng 대신-show

　　　 이는 angular의 작은 문제점입니다. 또는 작지 않고 큰 문제점입니다. 일부 긴 목록 데이터는 기본적으로 숨겨져 있고 클릭하면 표시되는 형태로 표시될 수 있습니다. 이 부분의 보이지 않는 내용도 많은 데이터 바인딩을 동반합니다. 이는 페이지 렌더링 시 성능에 크게 영향을 미칩니다.

　　　 예를 들어, 일반적으로 angular은 페이지의 데이터 바인딩을 최대로2000개의, 현재 페이지가 직접 바인딩된 경우2000개의 모델을 로드하면 매우 느리게 느껴질 것입니다. 만약에 매100의 model을 ng에 설정합니다-show를 사용하면 기본적으로 표시되지 않지만, 여전히 느리게 느껴집니다.

　　　 그런 다음 모든 ng-show를 ng로 변경하면-if을 사용하면 성능이 갑자기 두 개의 애플리케이션처럼 빠르게 느껴집니다. 원인은 ng-show는 여전히 모든 바인딩을 실행합니다, ng-if는 true와 같이, 즉 표시될 때까지 실행되지 않습니다. 이렇게 하면 성능이 크게 향상됩니다. 저는 이 간단한 수정을 통해 페이지 로드 속도가 빨라졌습니다10배 이상입니다.

　　　 따라서 ng를 사용할 수 있는 경우에만-if의 경우, 모든 ng를 이를 대신 사용합니다.-show와 ng-hide를 사용합니다.　　　

　　　 (7) ng에 대해-bind-html

　　　 일반적으로 html 요소에 데이터를 바인딩하는 경우 ng-bind만으로도 충분하지만, 일부 상황에서는 일반 데이터가 아니라 html을 바인딩해야 할 수 있습니다. 그런 경우 ng-bind만으로는 충분하지 않아 ng-bind-html을 사용하면 내용이 html 형식으로 출력됩니다. 예를 들어 class를 포함한 html을 출력하려면 ng-bind-html에서도 사용하며, 또한 ngSanitize와의 협력이 필요하며, 필요한 파일을 포함해야 합니다.

　　　 (8) ng를 가져옵니다-repeat 데이터가 filter된 결과

　　　 이는 일반적으로 검색 시 사용되며, 예를 들어 다중 ng-repeat 데이터를 목록으로 형성한 후, 필터 한 필드를 통해 filter된 결과를 얻으려면,2이 방법.

　　　 한 가지는 html의 ng-repeat에서 이렇게 작성됩니다:

ng-repeat="food in foodCategory._displayfoods = (foodCategory.foods | filter: { 'name': searchobj.foodfilter } | orderBy: food.sort_order)"

　　 이렇게 _displayfoods는 filter된 최종 표시 결과입니다. 다른 방법은 두套 데이터를 사용하여, 하나는 controller에 작성되고, filter 및 orderBy는 controller에서 처리되며, 최종 결과는 ng-repeat.

　　　 첫 번째 방법이 더 편리하고, 두 번째 방법은 더 좋으며 성능도 좋습니다.

　　　 (9) ng-class 및 ng-style은 조건을 통해 할당됩니다

　　　 변수의 값에 따라 특정 class를 적용하거나 다른 style 스타일을 결정합니다.

　　　 ng-class="{'state-error':!foodForm.foodstock.$valid}"

　　　 ng-style="{ color: i.color=='' || i.name=='活' ? 'default' : '#fff' }"

　　　 (10) form 검증을 input 예로 들어 설명합니다.

　　　 angular의 form은 input의 HTML5속성을 검증하십시오. 여기서는 주로 form 및 input의 name 속성을 사용하여 잠금을 설정합니다. formname.inputname.$valid는 inputname 이름의 공간이 자신의 속성 검증을 통과했는지를 나타냅니다.

　　　 (11) $resource와 $http의 $promise

$q.all([
 resource.query().$promise,
 resource2.query().$promise
]).then(functon(success){
 console.log(success);
},functon(error){
 console.log(error);
});
foodFactory.food.save(f).$promise.then(function(result){
 foodFactory.food.get({id:result.id}).$promise.then(function(data){
 });
});

　　　 이는 설명이 필요 없습니다. 바로 보시면 됩니다. $http의 promise는 수동으로 반환되어야 하므로 일반적으로 $resource를 사용합니다.

　　　 (12) 단순히 collection의 한 속성을 $watch로 모니터링

　　　 $watch의 세 번째 파라미터를 true로 설정하면 deep watch를 할 수 있습니다. 하지만 때로는 전체 collection의 속성을 모니터링하고 싶지 않거나 필요하지 않을 때도 있습니다. 그럴 때는 단순히 for 루프를 사용하여 $watch를 돌리는 것보다 훨씬 더 나은 방법이 있습니다.

　　　 이렇게 쓰면 collection의 단일 object 속성을 모니터링할 수 있습니다.

$scope.people = [
  {
    "groupname": "g"1", 
    "persions": [
      {
        "id": 1, 
        "name": "bill"
      }, 
      {
        "id": 2, 
        "name": "bill"2"
      }
    ]
  }, 
  {
    "groupname": "g"2", 
    "persions": [
      {
        "id": 3, 
        "name": "bill"3"
      }, 
      {
        "id": 4, 
        "name": "bill"4"
      }
    ]
  }
]
$scope.$watch(function($scope) {
  return $scope.people.map(function(obj) {
    return obj.persions.map(function(g){
      return g.name
    });
  });
}, function (newVal) {
  $scope.count++;
  $scope.msg = 'person name was changed'+ $scope.count;
}, true);

　　　 (13) debounce 디버프 처리

　　　 이는 자주 발생하는 처리에 매우 유용하며, ng와 유사한 경우에 적용됩니다.-change,$watch의 일부 상황에 대해 설명합니다. 예를 들어, 키워드에 따라 실시간으로 검색하는 경우, $debounce를 서비스로 패키징하여 직접 인터페이스를 호출합니다. 코드: http://jsfiddle.net/Warspawn/6K7Kd/

　　　 (14)로 빠르게 특정 위치로 이동할 수 있습니다

　　　 일반적으로 페이지 내에서 <a id="bottom"></a>와 같은 형식으로 js 코드를 결합하여 빠르게 위치를 찾을 수 있습니다. angular에서도 유사한 원리로 구현됩니다. 코드는 다음과 같습니다:　　　　　　

 var old = $location.hash();
     $location.hash('batchmenu-bottom');
     $anchorScroll();
     $location.hash(old);

　　　 이렇게 쓰는 이유는 직접 location.hash를 사용하면 URL이 변경되고 페이지가 이동하는 것을 방지하기 위해 코드를 추가했기 때문입니다.

　　　 현재는 이렇게 정리했습니다. 많은 것들은 자료 검색 및 자신의 실제 경험에서 나왔습니다. 필요한 TX에게 도움이 되길 바랍니다. 앞으로 새로운 것들이 생기면 계속 작성할 계획입니다.

　　　　　 이것이 Angular 애플리케이션 기술의 요약입니다. 이어서 관련 기사를 추가하여 정리할 계획입니다. 감사합니다!

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자에게 소유되며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 이 사이트는 소유권을 가지지 않으며, 인공 편집을하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 위반 내용을 발견하면, 이메일을 notice#w로 보내 주세요!3codebox.com에 이메일을 보내면 (#을 @으로 변경하십시오) 신고를 하고, 관련 증거를 제공하십시오. 확인되면, 이 사이트는 즉시 위반 내용을 삭제합니다.