AngleJ를 사용하여 웹 프로젝트를 빌드하는 방법은 무엇입니까? Anglejs를 사용한 웹 프로젝트 구축에 대한 자세한 소개

寻∝梦

풀어 주다： 2018-09-08 14:38:11

원래의

2033명이 탐색했습니다.

이 글은 주로 angularjs에 대한 웹 프로젝트의 단계별 구성을 소개합니다. Anglejs를 사용하여 웹 프로젝트를 구축하려면 먼저 이 글을 읽어야 합니다. 바

1 머리말

angularjs Huohuo의 프론트엔드 프레임워크는 매우 인기가 높습니다. 이제 버전 2.0이 출시되었습니다. 여기서 소개하는 내용은 학습 버전 1.2의 일부 결과입니다.

2. AngularJ에 대한 간략한 소개

Angular JS 공식문서에서는 이렇게 소개하고 있습니다. JavaScript 클라이언트 측 기술을 사용하여 완전히 작성되었습니다. 다른 유서 깊은 웹 기술(HTML, CSS
및 JavaScript)과 함께 작동하여 웹 애플리케이션 개발을 그 어느 때보다 쉽고 빠르게 만듭니다.

AngularJS는 주로 단일 페이지 웹 애플리케이션을 구축하는 데 사용됩니다. 개발자와 일반적인 웹 애플리케이션 개발 작업 간의 추상화 수준을 높여 대화형 최신 웹 애플리케이션을 더 쉽게 구축할 수 있습니다. 자세한 내용은 AngularJs 권위 있는 튜토리얼을 참조하세요

다음 내용은 AngularJ에 대해 어느 정도 이해하고 있는 학생들을 위한 것입니다. 이해하지 못하는 학생들은 권위 있는 튜토리얼을 먼저 읽어보세요.

3. 코드 디자인

먼저 프로젝트 파일 디렉터리를 살펴보세요. # 🎜 🎜#

#🎜🎜 #

index.html은 우리 시스템의 액세스 포털 파일 역할을 합니다. 물론 우리가 작성해야 하는 첫 번째 파일입니다.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<p>
    <p>
        <p ng-include="&#39;views/common/menu.html&#39;"></p>
        <p ui-view></p>
    </p>
</p>
<script src="libs/angular.js"></script>
<script src="libs/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="module/first/firstController.js"></script>
<script src="module/second/secondController.js"></script>
</body>
</html>

로그인 후 복사

코드 설명:

ng-app은 역할을 나타냅니다. ofangularjs 범위는 p와 같이 html 태그에 쓸 수 있습니다. 우리는 일반적으로 html 태그의 머리 부분에 씁니다. 이는 전체 html이 우리의 anglejs에 영향을 받는다는 것을 의미합니다. 일반적으로 하나의 HTML에 하나의 ng-app만 작성하면 충분합니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AngularJS 개발 매뉴얼

을 참조하세요.)

ui-view는 라우팅을 나타내며, 이는 경로를 나타냅니다. 내 URL에 해당하는 모든 페이지는 이 p 아래에 표시됩니다. 내용은 p에 쓸 수 없으며, 쓰면 무효가 됩니다. ### ## ## ## ## ## ## ## ## ## ####3.2 App.js###### 🎜 🎜### 🎜#

var app = angular.module('myApp',
    [
        'ui.router',
        'secondModule',
        'firstModule'
    ]);

app.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('first', {
            url: '/first',
            templateUrl: 'views/first/first.html',
            controller: 'firstController'
        })
        .state('second', {
            url: '/second',
            templateUrl: 'views/second/second.html',
            controller: 'secondController'
        })

    $urlRouterProvider.otherwise('first')
})

로그인 후 복사

먼저 myApp 모듈의 이름은 ng-의 이름과 동일해야 합니다. app in index.html 일관성을 유지하기 위해 [ ]에 참조할 모듈을 삽입합니다. 예를 들어 첫 번째 모듈 이름은 ui-view입니다.

그런 다음 경로 정의를 시작하고 두 서비스 제공자 $stateProvider, $urlRouterProvider를 참조하기 위해 구성 메소드를 호출하기 시작합니다. 그런 다음 $를 호출합니다. stateProvider의 상태 메소드는 각 경로를 정의합니다. $urlRouterProvider.otherwise('first')는 URL에 나타나는 주소가 경로에 정의되지 않은 경우 첫 번째 경로에 해당하는 페이지로 이동한다는 의미입니다.

이 글은 여기서 끝납니다(자세한 내용을 보려면 PHP 중국어 웹사이트

AngularJS 사용자 매뉴얼