AngularJ로 프런트엔드 프레임워크를 구축하는 방법은 무엇입니까? Anglejs로 프론트엔드 프레임워크를 구축하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

AngularJ로 프런트엔드 프레임워크를 구축하는 방법은 무엇입니까? Anglejs로 프론트엔드 프레임워크를 구축하는 방법에 대한 자세한 설명

寻∝梦

풀어 주다： 2018-09-08 15:38:18

원래의

2695명이 탐색했습니다.

이 글은 주로 angularjs의 프론트엔드 프레임워크 구축 소개와 프로젝트 시작 방법을 단계별 설명과 함께 설명합니다. 이 글을 함께 바

angularjs에 대한 서문:

이 이제 반년 넘게 인턴부터 졸업까지 전면에 적혀 있습니다. 처음 회사에 입사했을 때 백엔드에서는 익숙한 지식을 사용했지만, 프론트엔드에서는 Angularjs에 대해 들어본 적이 없었기 때문에 처음부터 지금까지 능숙하게 작성했다고 볼 수 있습니다. 내용이 올라왔습니다. 하지만 모든 것이 여전히 매우 혼란스럽습니다. 최근에 기술을 연습하기 위해 나만의 프로젝트가 있었기 때문에 연습을 위한 프런트 엔드로Angularjs를 선택했습니다. 이는 지난 6년 동안 제가 배운 내용의 요약이라고 볼 수도 있습니다. 개월. 백엔드를 작성하다보니 지금은 프론트엔드 프로젝트를 처음부터 연습하고 있습니다. 더 힘들 수 있지만 점진적으로 진행됩니다. 이것은 또한 이 회사에서의 나의 경험을 요약한 것으로 간주될 수도 있습니다.

1.angularjs에 대하여

하하, 실제로 Baidu에서 구할 수 있으므로 여기서는 많이 말하지 않겠습니다. 우리 모두는 거인의 어깨 위에 서 있습니다.

2. AngularJ 앱의 시드 얻기

저 같은 초보자는 처음 Angularjs를 시작했을 때 프로젝트 디렉터리를 작성할 능력이 없었습니다. 나 자신. 그래서 github에서 토렌트를 찾았습니다.
주소: https://github.com/glitchtank/angular-seed-master
git을 설치한 다음 로컬로 복제해야 합니다
git 복제 https://github.com/glitchtank /angular -seed-master
이 시드에 대한 자세한 소개는 다음 README.md를 참조하세요. 여기서는 소개하지 않겠습니다. 프론트 엔드 배경을 가진 학생들은 내가 말도 안되는 소리를 하고 있다고 생각할 것입니다. .

3. 노드 설치 및 프로젝트 시작

nodejs 다운로드 주소: https://nodejs.org/en/download/ 자신의 운영체제 버전에 맞게 다운로드하여 설치하세요. #🎜🎜 #windows cmd를 입력하고 방금 복제한 프로젝트를 입력한 후 node scripts/web-server.js 명령을 실행합니다.
그런 다음 브라우저에 http://localhost:8000/app/index.html을 입력하여 확인합니다. Simple 페이지에서 프로젝트는 그 이후로 성공적으로 시작되었습니다.

AngularJ로 프런트엔드 프레임워크를 구축하는 방법은 무엇입니까? Anglejs로 프론트엔드 프레임워크를 구축하는 방법에 대한 자세한 설명

참고:

1. 포트 8000이 이미 다른 프로그램에 의해 사용되고 있는 경우 웹 서버를 사용할 수 있습니다. js에서 default_port를 수정하고 다른 포트로 변경합니다.
2. node scripts/web-server.js 명령 실행 시 script를 입력한 후 node web-server.js를 실행하면 http://localhost를 입력합니다. 브라우저: 8000/app/index.html 보고서 404.

4. 전체 프로젝트 알아보기

AngularJ로 프런트엔드 프레임워크를 구축하는 방법은 무엇입니까? Anglejs로 프론트엔드 프레임워크를 구축하는 방법에 대한 자세한 설명

css 폴더가 작성되었습니다.

img 폴더에는 우리가 사용해야 하는 일부 사진이 저장되어 있습니다.
Controller.js 컨트롤러
Filter.js 우리가 직접 작성한 일부 필터
백엔드 API를 호출하기 위한 service.js의 연결은 일반적으로 여기에 위치합니다

5. 첫 번째 작은 예

이 예는 "차세대 웹 애플리케이션 개발"에서 가져온 것입니다. with Angularjs' 책의 장바구니 예시입니다.

다음 콘텐츠가 포함된 shopCart.html 프로젝트 아래에 새 HTML 페이지를 만듭니다.

<!DOCTYPE html><html ng-app="myApp"><head lang="en">
    <meta charset="UTF-8">
    <title>购物车例子</title></head><body ng-controller="CartController"><h1>your order</h1><p ng-repeat="item in items">
    <span>{{item.title}}</span>
    <input ng-model="item.count">
    <!--angularjs内置过滤器currency,实现美元格式化-->
    <span>{{item.price |currency}}</span>
    <span>{{item.price*item.count |currency}}</span></p><script src="lib/angular/angular.js"></script><script src="js/app.js"></script><script src="js/controllers.js"></script><script src="js/services.js"></script><script src="js/filters.js"></script><script src="js/directives.js"></script></body></html>

로그인 후 복사

Add

function CartController($scope){
    $scope.items=[
        {tile:&#39;pea&#39;,count:8,price:3.00},{tile:&#39;apple&#39;,count:9,price:4.00}
    ]
}

로그인 후 복사

js/controller.js에서 프로젝트 시작# file 🎜🎜#

입력란에 수량을 마음대로 입력하면 그에 따라 후속 계산 결과가 바뀌는 것을 알 수 있습니다. 이것은 Anglejs의 데이터 바인딩입니다. jquery보다 훨씬 편리합니다. AngularJ로 프런트엔드 프레임워크를 구축하는 방법은 무엇입니까? Anglejs로 프론트엔드 프레임워크를 구축하는 방법에 대한 자세한 설명