Angular의 핵심 아이디어는 데이터를 통해 모든 것을 주도하는 것이며 다른 모든 것은 데이터의 확장입니다.
모든 것이 객체라는 아이디어를 적용하기 위해 모든 것이 데이터라고 말할 수 있습니다.
프로젝트 구성에 대해
(1) 요구 사항과 여인
먼저 Angular에 들어가거나 사용하면 항상 비슷한 질문에 당황하게됩니다. 나의 실질적인 대답은 당신이 요구 사항이나 여인이 필요하지 않다는 것입니다. 전자는 Angular 자체가 모듈의 구현을 가지고 있기 때문에 사용되지 않습니다. 후자는 각도 조직 구조와 프로젝트 구성이 너무 복잡하기 때문에 불필요하기 때문입니다. Github에 종자 프로젝트를 작성하거나 당기십시오.
(2) 프로젝트 구조를 구성하는 방법
이 문제는 사람마다 프로젝트마다 완전히 다양하기 때문에 약간 쓸모가 없습니다. 코드 함수에 따라 하나의 조직 구조, 즉 컨트롤러가 하나의 폴더에 배치되고 서비스는 한 폴더에 배치됩니다. 다른 하나는 구현 된 기능을 따릅니다. 예를 들어, 사용자는 해당 템플릿, 서비스 및 컨트롤러를 사용자 폴더에 배치합니다.
둘 다 괜찮으며 유지 보수 관점에서 두 번째는 더 나을 것입니다.
(3) 컨트롤러 및 서비스 부서
여기서 컨트롤러는 일반적으로 페이지에 하나의 컨트롤러입니다. 페이지에 공통 부분이 있으면 공개 부품은 항상 컨트롤러를 사용합니다. 서비스는 두 부분으로 나뉘어져야하며, 하나는 서버 데이터와 상호 작용하는 서비스이며, 다른 하나는 기능적 공통 컨텐츠로, 재사용 가능한 서비스를 자체적으로 작성하는 것과 유사한 일부 재사용 가능한 서비스를 제공합니다.
서비스가 함수 및 모듈에 따라 더 나누어야하는지 여부는 프로젝트에 따라 다릅니다.
(4) 각도 플러그인 및 라이브러리 사용
프로젝트가 온라인으로 기성품을 얻는 것은 현실적이지는 않지만 모든 것을 직접 작성하는 것은 훨씬 더 비현실적입니다. Angular의 많은 플러그인은 Angular Team 또는 jQuery 플러그인으로 캡슐화 된 일부 사람들이 개발합니다. 플러그인에 대한 내 견해는 매우 간단합니다. 사용하면 가능한 빨리 사용할 수 있습니다. 필요를 충족시킬 수 없다면 직접 작성하거나 기존 플러그인에서 개선 할 수 있습니다.
몇 시간 동안 디버깅을 처리 할 수없는 플러그인의 경우 내 조언을 듣고 포기하십시오. 대부분의 플러그인은 UI 플러그인이므로 복잡성을 추구 할 필요가 없습니다. 때로는 간단한 HTML 컨트롤도 고유 한 간단한 아름다움을 가지고 있습니다.
각도 플러그인 충돌, 특히 UI 플러그인이 발생하면 대부분의 경우 각도 UI 및 Angular-Strap과 같은 중 하나를 포기해야합니다.
사용 팁
아래 본문으로 가자 Angular를 사용하는 과정에서 내가 사용한 기술 중 일부를 나열하겠습니다.이 기술은 장면 형태로 하나씩 나열됩니다. 나는 여기서 각도의 기본 개념을 설명하지 않을 것입니다. 이 기사는 기본 튜토리얼이 아니라 숙련 된 것입니다.
(1) 각도와 파이썬에서 "{{}}"사이의 플라스크 충돌
Python의 플라스크가 사용하는 템플릿에서 데이터 바인딩은 또한 두 개의 "{"버팀대를 통과하여 Angular의 데이터 바인딩과 충돌합니다. 이것에 대한 두 가지 해결책이 있습니다. 하나는 Angular의 결합 마크를 수정하고 다른 하나는 플라스크의 바인딩 마크를 수정하는 것입니다. 두 솔루션 모두 여기에 제공됩니다.
각도 수정 :
$ interpolateProvider.startSymbol ( '{[{'). endsymbol ( '}]}');
// 구성 에이 문장을 추가하고 경로 모듈에 넣으십시오. 여기에서는 {[{{}]} 바인딩에 {[{}]} 결합에 결합하는 원래 각도 {{}} 바인딩을 변경합니다.
플라스크 수정 :
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 ='} ', variable_start_string =', variable_end_string = ', variable_start_string =', block_end_string = '%}' comment_end_string = '#>',)) app = customflask (__ name__, instance_path = '/web')각도를 사용한 후 전면 및 후면이 분리되므로 플라스크를 수정하는 것이 좋습니다. Flask의 Jinjia 템플릿은 더 이상 필요하지 않습니다. 동시에 각도 결합 태그를 수정하면 다른 컨트롤과 라이브러리에 문제가 있습니다.
(2) URL은 항상 "#"으로 기본값을 제거합니다.
경로를 설정할 때 HTML5 모드를 활성화하십시오.
Angular.Module ( 'router', [ 'ngroute']). config ([ '$ lourteprovider', '$ locationProvider', function ($ lourteprovider, $ locationProvider) {$ locationProvider.html5mode (true); // set this sentence});(3) ng-click = "표현"및 유사한 지시 사항, 표현식에 여러 표현을 작성하는 방법은 무엇입니까?
예를 들어 NG 클릭에서 값을 2 개의 변수에 할당하려면 ";"을 통해 값을 분할 할 수 있습니다. 세미콜론:
<a ng-click = "obja = 1; objb = 2"> </a>
(4) $ 시계는 효과가 없거나 한 번만 적용됩니다.
일반적으로,이 상황은 문자열 또는 번호, $ scope. $ watch ( "name", function () {})을들을 때 나타납니다. 적용되지 않거나 한 번만 적용됩니다. 해결책은 $ watch가 가능한 한 객체에 리스팅되고 객체에서 듣고 싶은 값을 첨부한다는 것입니다.
Angular-UI에서 Modal을 사용하면 더 분명합니다. 구체적인 이유는 $ 범위의 상속 때문입니다. 모달은 현재 페이지의 컨트롤러에서 다른 범위를 만드는 것과 동일하기 때문에 리터럴의 프로토 타입 체인을 검색하고 추적하는 것은 불가능합니다. 해결하려면 프로토 타입 체인을 통해 부모-자식 범위를 통해 데이터 새로 고침 바인딩을 달성하기위한 객체가 있어야합니다.
(5) NG-View의 내용이 전체 페이지에 표시되기를 바랍니다.
일반적으로 페이지에는 고정 된 부분이 고정 된 상단 메뉴 또는 사이드 바와 같은 고정 된 부분이있을 수 있으며 각 경로는 NG-View의 템플릿을 변경합니다. 페이지가 전체 페이지가 완전히 표시되기를 원하는 경우 Top-Menu와 같은 고정 된 부분이 포함되지 않습니다.
다음은 일반적으로 index.html 및 ng-view로 표시되는 Template.html입니다. Top-Menu 및 Sidebar는 Index.html에 있습니다. 그들의 디스플레이는 변수를 NG-IF에 바인딩하여 숨겨져 있습니다.
페이지를 자체적으로 완전히 표시해야하고 사이드 바가 표시되지 않으면 $ SCOPE를 통해 컨트롤러에 메시지가 전송되고 인덱스 페이지의 컨트롤러는 $ scope. $를 통해 메시지에 장착됩니다. 메시지가 들리면 가시 및 숨겨진 사이드 바를 제어하는 변수가 변경됩니다.
서비스를 사용하여 글로벌 변수를 제어 할 수 있으며 개인 권장 사항은 여전히 메시지 방송을 통해 이루어집니다.
(6) NG-SHOW 대신 NG-IF를 사용해야합니다
이것은 각도의 작은 구덩이이거나 크거나 작은 구덩이라고 할 수 있습니다. 일부 긴 목록 데이터는 기본적으로 숨겨져 있고 클릭하여 표시 될 수 있습니다. 가시 및 숨겨진 것을 제어 할 수있는 컨텐츠 의이 부분에는 많은 데이터 바인딩이 동반됩니다. 이것은 페이지를 렌더링 할 때 성능에 큰 영향을 미칩니다.
목록을 가져 가라. 예를 들어, Angular는 일반적으로 페이지에 데이터 바인딩이 2,000 개 이하인 것을 권장합니다. 2,000 개의 모델을 직접 바인딩 한 다음로드하는 페이지가 있으면 매우 고정되어 있음을 알게됩니다. 100 개의 모델을 NG-SHOW로 설정하면 기본적으로 표시되지 않으면 여전히 매우 고정되어 있음을 알 수 있습니다.
그런 다음 모든 NG-SHO를 NG-IF로 교체하면 두 개의 응용 프로그램과 같이 성능이 즉시 빠르게 진행됩니다. 그 이유는 NG-SHOW가 여전히 모든 바인딩을 실행하고 NG-IF가 바인딩이 True와 동일 할 때 바인딩을 실행하기 때문입니다. 즉, 바인딩이 표시되면 바인딩을 실행합니다. 이것은 성능을 크게 향상시킬 것입니다. 이 간단한 수정을 전에 사용했고 페이지는 약 10 배 더 빨리로드되었습니다.
따라서 NG-IF를 사용할 수 있으면 모든 NG-SHOW 및 NG-HIDE 대신 사용하십시오.
(7) NG-BIND-HTML에 대 한
일반적으로 데이터로는 HTML 요소에 결합되며 NG 바인드는 충분하지만 일부 상황에서는 정상 데이터가 아니라 HTML입니다. 그런 다음 NG 바인드로는 충분하지 않습니다. 컨텐츠를 HTML 형식으로 출력하는 NG-BIND-HTML을 사용해야합니다. 예를 들어, 클래스와 함께 HTML을 출력하려면 NG-BIND-HTML을 사용하고 NgSanitize의 협력이 필요하며 해당 파일을 도입해야합니다.
(8) NG- 반복 데이터 필터 후 결과를 얻습니다
이것은 목록을 형성하는 여러 NG 반복 데이터와 같은 검색 할 때 일반적으로 사용됩니다. 그런 다음 필드를 필터링하면 필터 후 결과를 가져와야합니다. 두 가지 방법이 있습니다.
하나는 다음과 같이 html ng-repeat로 작성되었습니다.
ng-repeat = "foodcategory._displayfoods = (foodcategory.foods | 필터 : { 'name': searchObj.foodfilter} | Orderby : Food.Sort_order)"
이런 식으로 _displayfoods는 필터 후 최종 디스플레이 결과입니다. 또 다른 방법은 두 개의 데이터 세트를 사용하는 것입니다. 하나의 세트는 컨트롤러에 작성된 다음 필터 및 OrderBy가 컨트롤러에서 작동합니다. 최종 결과는 ng-repeat에 사용됩니다.
첫 번째 방법은 더 편리하지만 두 번째 방법은 더 좋고 성능이 좋습니다.
(9) NG-Class 및 NG 스타일은 판단에 의해 값을 할당합니다
변수의 값에 따라 특정 클래스 및 다른 스타일을 적용할지 여부를 결정하십시오.
ng-class = "{ 'state-error':! foodform.foodstock. $ valid}"
ng-style = "{color : i.color == ''|| i.name == 'live'? 'default': '#ffff'}"
(10) 양식 검증은 입력을 예로 들어 입력합니다
각도 형태는 입력의 HTML5 속성을 통해 확인할 수 있습니다. 여기에서는 주로 양식 및 입력 이름 속성을 통해 잠겨 있습니다. formname.inputname. $ valid 이름이 inputname 인 공간이 자체 속성 확인을 전달하는지 여부를 나타냅니다.
(11) $ Resource 및 $ HTTP에 대한 $ 약속
$ q.all ([resource.query (). $ promise, resource2.query (). $ promise]) foodfactory.food.get ({id : result.id}). $ promise.then (function (data) {});});이것은 설명되지 않고 직접 읽으십시오. $ http의 약속은 수동으로 반품해야하므로 일반적으로 $ 리소스를 통과합니다.
(12) $ watch의 한 가지 속성만이 청취합니다
$ watch의 세 번째 매개 변수를 Deep Watch에 True로 설정하십시오. 그러나 때로는 컬렉션의 모든 속성을 원하거나 듣지 않아도됩니다. For Loop을 통해 $를 루프 할 수는 있지만 너무 실망 스럽습니다.
다음 작성 방법을 통해 컬렉션의 단일 객체 속성을 모니터링 할 수 있습니다.
$ scope.people = [{ "groupname": "g1", "pufies": [{ "id": "1,"name ":"bill "}, {"id ": 2,"name ":"bill2 "}]}, {"groupname ":"g2 ","persions ": [{id": 3, "name": "{"} : "Bill4"}]}] $ scope. $ scope. $ watch (function ($ scope) {return $ scope.people.map (function (obj) {return obj.persions.map (function (g) {return g.name});});}, function (newval) {$ scope.count ++; $ scope.ms.ms. 진실);(13) 셰이크 방지 치료를 분해합니다
이것은 자주 출발 처리에 매우 유용하며 NG-Change 및 $ Watch와 같은 일부 시나리오에 적합합니다. 예를 들어, 키워드 검색이 제거되면 $ debounce가 서비스로 캡슐화되고 인터페이스가 직접 호출됩니다. 코드 : http://jsfiddle.net/warspawn/6k7kd/
(14) 신속하게 위치로 찾습니다
일반적으로, 페이지는 <a id = "하단"> </a> 형식을 통해 빠른 포지셔닝을 달성하기 위해 JS 코드와 결합 될 수 있습니다. 각도에서는 유사한 원칙을 통해 구현되며 코드는 다음과 같습니다.
var old = $ location.hash (); $ location.hash ( 'batchmenu-bottom'); $ anchorscroll (); $ location.hash (old);
직접 위치. 해시로 인해 URL 변경 및 페이지 점프가 발생하므로 점프를 방지하는 코드가 추가됩니다.
나는 당분간 너무 많이 요약했다. 많은 것들이 정보를 검색하고 혼자서 실천합니다. 필요한 TX에 도움이되기를 바랍니다. 앞으로 새로운 것이 있다면 계속 쓸 것입니다.
위는 각도 응용 기술의 요약입니다. 우리는 앞으로 관련 기사를 계속 추가하고 구성 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!