Anglejs 연구 노트의 전체 프로젝트 구조_AngularJS

오늘의 주요 설명은 다음과 같습니다. 1. 완전한 프로젝트 구조 보여주기 2. $scope의 의미 3. 모듈화 및 종속성 주입.

1. 완전한 프로젝트 구조를 보여줍니다.

아래 코드는 모두 @大 Desertqiongqiu 선생님이 재현한 것입니다. 다시 인쇄하여 github에 올렸습니다. 이 링크로 이동하면 소스 코드를 볼 수 있습니다. 시청과 학습을 동시에 하면 최고의 효과~~~~

이제 이 스크린샷을 살펴보겠습니다.

완전한 Anglejs 프로젝트가 갖춰야 할 디렉터리 구조입니다. 각 폴더의 의미를 아래에서 설명하겠습니다.

1.css: 말할 필요도 없이 CSS 스타일 파일 몇 개만 넣으면 됩니다.

2. 프레임워크: 일반적으로 Bootstrap, UEditor 등과 같이 Anglejs 외에 타사에서 요구하는 일부 프런트엔드 프레임워크(UI)가 있습니다.

3.imgs: 말할 필요도 없이 이미지 파일을 넣습니다.

　4.index.html: 메인 파일입니다. 물론 프로젝트 파일이 많으면 별도의 폴더를 만들어 페이지를 저장할 수도 있습니다.

5.js: 말할 필요도 없이 새로 만든 js 파일을 직접 넣으세요.

6.tpls: 정식 이름은 템플릿, 즉 템플릿을 의미합니다. 내부에 배치되는 것은 html 코드의 일부입니다. angualrjs의 지시문 명령에서 templateUrl 속성과 함께 사용됩니다.

tpls 사용법을 살펴보겠습니다. 여기 tpls 폴더 아래에 test.html 파일이 있으며 코드는 다음과 같습니다.

<ul>
  <li>
    第一行test
  </li>
  <li>
    第二行test
  </li><li>
    第三行test
  </li>
</ul>

위에서는 여기 파일이 html의 일부일 뿐이라고 말했습니다. 예를 들어 이것은 ul 코드의 일부일 뿐입니다. 그렇다면 어떤 분들은 헷갈려 하시는데, 이렇게 글을 쓰면 무슨 소용이 있는지, 어떻게 사용해야 할까요? 걱정하지 마세요. 사용 방법을 알려드리겠습니다.

사실 지난 수업에서 말씀드렸는데 모르시는 분들을 위해 여기를 클릭하시면 제가 말씀드린 세 번째 포인트를 보실 수 있습니다. 이것이 의미하는 바는 html 태그를 정의한 다음 반환된 html 콘텐츠가 여기서 ul 부분이라는 것입니다.

구체적인 사용 코드를 살펴보겠습니다.

var appModule = angular.module('app', []); //app是html中ng-app指令的名称

 appModule.directive('hello', function() { //定义一个指令，名称叫hello
   return {
     restrict: 'E',
     //template: '<div>Hi there</div>',
     templateUrl:'/tpls/test.html',
     replace: true
   };
 });

위 코드 설명: hello 태그를 정의합니다. 이 태그를 사용하면 test.html의 내용이 반환됩니다(template 또는 templateUrl을 사용할 수 있음).

왜 위 ul 내용을 별도의 폴더에 넣어야 하나요? 이제 이해가 되셨나요? ? 그 이유는 반환되는 내용이 많을 때 링크를 직접 사용하면 코드가 명확해 보이도록 하기 때문입니다.

2. $scope를 살펴보세요.

아래 그림을 통해 일부 스코프와 해당 기능을 자세히 설명하겠습니다.

위 코드를 살펴보겠습니다. 먼저 $scope에 Greeting 속성을 추가하는 HelloCtrl이라는 컨트롤러를 정의합니다. Greeting 속성은 객체이고 text 속성에는 'Hello' 값이 추가됩니다. 그것은 간단합니다. 그런 다음 페이지에서 Greeting.text를 직접 호출하여 'Hello' 값을 가져올 수 있습니다. 놀랍지 않나요? 그렇다면 $scope가 정확히 무엇인가요? 왜 이러한 기능을 달성할 수 있습니까? 다음은 그 특징을 읽어본 후 어느 정도 이해해야 합니다.

1.$scope는 객체로도 이해될 수 있는 범위입니다.

　2.$scope는 $watch() 및 $apply() 등과 같은 몇 가지 도구와 메서드를 제공합니다.

　3.$scope도 실행 환경(scope)입니다.

　4. 하위 $scope는 상위 $scope의 속성과 메서드를 상속받을 수 있습니다.

5. 각 Angular 애플리케이션에는 $scope($rootscope, ng-app에 있음)가 하나만 있습니다.

3. 모듈화 및 종속성 주입

컨트롤러를 정의하는 다음 코드를 살펴보세요.

var myApp = angular.module('angularApp', []);

myApp.controller('HelloCtrl', ['$scope',function($scope) {
    $scope.greeting = {
      text: 'Hello'
    };
  }
]);
myApp.controller('ByeCtrl', ['$scope',function($scope) {
    //.....
  }
]);

처음에 설명한 컨트롤러의 정의를 아직도 기억하시나요? funciton name(){} 메서드를 직접 사용하세요. 우리는 컨트롤러가 너무 많으면 관리하기 어렵다는 것을 천천히 발견했습니다. angualrjs의 모듈화를 실현하려면 위의 작성 방법으로 변경해야 하며, 그런 다음 이 코드의 의미를 설명하겠습니다.

1행: 먼저 'myApp' 전체 페이지의 모듈 이름을 가져옵니다.,,,angularApp은 HTML의 ng-app 값입니다.

3행: 'HelloCtrl'이라는 컨트롤러를 정의합니다.

9호선은 위와 동일합니다.

이런 식으로 우리는 무의식적으로 모듈화를 달성했습니다! ! !

여기서는 컨트롤러 메서드만 호출하며 첫 번째 섹션에서 언급한 지시문, 필터 및 기타 메서드는 모두 myApp에서 호출되어 응답 기능을 구현해야 합니다. 그런 다음 여러 모듈을 사용하여 프로젝트를 완료하면 종속성 주입이 달성됩니다! !

좋습니다. 위의 내용은 세 가지 주요 모듈을 사용하기 위한 지침입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. . . 위의 내용에 대해 이해가 되지 않는 부분이 있는 경우 저에게 문의하시면 확실히 답변해 드리겠습니다. 모두 행복한 삶을 누리시길 바랍니다!