집 > 기사 > 웹 프론트엔드 > Anglejs로 웹 애플리케이션을 개발하는 방법은 무엇입니까? Angularjs 개발 웹 애플리케이션 예제

Anglejs로 웹 애플리케이션을 개발하는 방법은 무엇입니까? Angularjs 개발 웹 애플리케이션 예제

寻∝梦원래의: 2018-09-06 15:06:091196검색

이 글에서는 주로 angularjs를 사용하여 간단한 웹 애플리케이션을 개발하는 방법을 소개합니다. 알고 싶다면 서둘러서 Anglejs로 웹 애플리케이션을 개발하는 방법을 자세히 소개합니다. 다음으로 기사를 함께 읽어봅시다

먼저 AngularJS의 강점에 대해 알아봅시다.

현재 다양한 유형의 웹 개발자가 AngularJS를 널리 사용하고 있으며 이 우수한 프레임워크는 다양한 요구 사항을 충족할 수 있음을 충분히 입증했습니다. . 웹 개발자로서 이제 막 시작했든 풍부한 실무 경험을 가지고 있든 훌륭한 프레임워크를 선택하는 것은 작업에 필요한 전제 조건이며 AngularJS는 그러한 이상적인 솔루션입니다. AnguarJS를 사용하는 과정에서 애플리케이션 개발에 대해 더 많이 배우고 더 훌륭하고 매력적인 애플리케이션 결과를 구축하는 방법을 배울 수 있습니다. 애플리케이션 작성에 모범 사례를 채택하고 싶다면 AngularJS도 큰 도움이 될 수 있습니다. 전체적으로 이 프레임워크의 강력한 기능과 특징은 애플리케이션 개발 요구 사항을 충족하는 친구들을 결코 실망시키지 않을 것입니다.

AngularJS에는 뛰어난 기능이 많이 있습니다. 오늘은 사용 방법을 이해하는 데 도움이 되는 간단한 애플리케이션을 예로 들어 보겠습니다. Firebase를 사용하면 간단하면서도 실용적인 애플리케이션을 쉽게 구축할 수 있습니다. 완성된 앱으로 개발된 앱은 누구나 언제든지 로그인하거나 로그인하여 기사를 게시할 수 있습니다.

다음은 AngularJS 및 Firebase에 대한 소개입니다.

AngularJS는 현재 웹 개발자들 사이에서 가장 인기 있는 JavaScript MVC 프레임워크입니다. 독특한 애플리케이션을 만들고 싶다면 강력한 HTML 기능 확장 기능 덕분에 이 애플리케이션이 최선의 선택임이 분명합니다. AngularJS의 도움으로 우리는 더 이상 애플리케이션을 구축하기 위해 많은 코드를 사용할 필요가 없습니다. Angular의 놀라운 종속성 주입 및 바인딩 메커니즘은 애플리케이션 개발을 매우 편리하게 만들어줍니다.

반면에 Firebase는 AngularJS에 대한 탁월한 지원을 제공할 수 있으므로 모든 사람이 자신이 만드는 애플리케이션에 대한 백엔드 지원을 개발하는 수고를 덜 수 있습니다. Firebase의 도움으로 우리 애플리케이션은 실시간으로 데이터 백업을 수행할 수 있습니다. 물론 필요한 API 호출은 여전히 필수입니다.

AngularJS 자체는 이미 매우 강력하지만 Firebase의 도움으로 애플리케이션 결과를 한 단계 더 발전시킬 수 있습니다.

텍스트는 여기에서 시작됩니다. 참고:

이 간단한 작은 웹 애플리케이션을 만들기 위해 AngularJS를 사용하기 전에 먼저 각도 시드 프로젝트를 다운로드해야 합니다. 다운로드가 완료된 후 해당 다운로드 디렉터리를 열고 해당 디렉터리에 종속성을 설치하여 실행해야 합니다. 구체적인 코드는 다음과 같습니다.

$ cd angular-seed 
$ npm install ## Install the dependencies

다음 단계는 다음 대표자를 사용하여 노드 서버를 시작하는 것입니다.

$ npm start ## Start the server

노드 서버가 실행된 후 브라우저를 열고 http://를 방문해야 합니다. localhost:8000/app/index.html, 이제 실행 중인 기본 앱을 표시합니다.

다음으로, 애플리케이션 코드가 저장된 Angle-seed 프로젝트 폴더 아래의 애플리케이션 디렉터리를 방문하세요.

애플리케이션의 핵심인 app.js도 애플리케이션 폴더에 저장됩니다. app.js 내의 모든 애플리케이션 수준 모듈과 경로를 선언해야 합니다.

또한 여기에는 각도 시드의 두 가지 보기, 즉 보기 1과 보기 2도 있습니다. 항상 기본 형태로 존재합니다. 애플리케이션 폴더에서 이러한 보기를 삭제해야 합니다.

이제 처음부터 애플리케이션을 만들겠습니다. 먼저 app.js를 열고 그 안의 기존 코드를 모두 삭제해야 합니다. app.js에서 애플리케이션 경로를 정의하려면 AngularJS의 모듈 중 하나인 ngRoute를 사용해야 합니다. 기본적으로 app.js에는 이 모듈이 포함되어 있지 않으므로 이를 사용하려면 애플리케이션에 수동으로 삽입해야 합니다. 다음 코드를 사용하여 AngularJS 모듈 추가를 완료할 수 있습니다.

angular.module(&#39;myApp&#39;, [ 
&#39;ngRoute&#39; 
])

ngRoute 모듈은 라우팅을 완벽하게 구성할 수 있는 $routeProvider라는 중요한 구성 요소를 가져옵니다. 경로 정의를 완료하려면 다음 코드를 사용하여 $routeProvider를 각도 모듈의 구성 메소드에 삽입해야 합니다.

'use strict'; 
angular.module(&#39;myApp&#39;, [ 
&#39;ngRoute&#39; 
]). 
config(['$routeProvider', function($routeProvider) { 
// Routes will be here 
}]);

위 단계를 완료한 후 이제 index.html을 열 수 있습니다. index.html의 모든 콘텐츠를 지우고 스크립트 참조와 div만 남겨둡니다.

라우팅을 변경할 때마다 위의 방법에 따라 div 콘텐츠를 조정해야 합니다. (자세한 내용을 알고 싶다면 보고 싶은 angularjs 비디오 튜토리얼이 있는 PHP 중국어 웹사이트를 추천합니다.)

이제 뷰에서 심볼을 만듭니다.

다음에 새 폴더를 만들어야 합니다. app 디렉토리에 넣어서 이름이 home으로 지정됩니다. 이 폴더에는 home.js와 home.html이라는 두 개의 추가 폴더를 만듭니다. 먼저 home.html을 열고 다음 코드를 추가하세요.

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="icon" href="http://www.php.cn/favicon.ico"> 
<title>AngularJS & Firebase Web App</title> 
<link href="http://www.php.cn/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="http://www.php.cn/examples/signin/signin.css" rel="stylesheet"> 
<link href="justified-nav.css" rel="stylesheet"> 
</head> 
<body> 
<div> 
<div style="padding-bottom:0px;"> 
<h2>AngularJS & Firebase App!</h2> 
</div> 
<form role="form"> 
<input type="email" placeholder="Email address" required="" autofocus=""> 
<input type="password" placeholder="Password" required=""> 
<label> 
<a href="#"> Sign Up</> 
</label> 
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
</form> 
</div> 
</body>
</html>

在home.js当中，我们则需要创建一套路由机制以访问home视图。另外还需要为由home视图创建的$scope设置一套控制器。控制器永远负责控制与之对应的特定视图。具体代码如下所示：

use strict&#39;; 
angular.module(&#39;myApp.home&#39;, [&#39;ngRoute&#39;]) 
// Declared route 
.config([&#39;$routeProvider&#39;, function($routeProvider) { 
$routeProvider.when(&#39;/home&#39;, { 
templateUrl: &#39;home/home.html&#39;, 
controller: &#39;HomeCtrl&#39; 
}); 
}]) 
// Home controller 
.controller(&#39;HomeCtrl&#39;, [function() { 
}]);

现在应用程序已经准备就绪。打开app.js，而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由，具体代码如下所示：

&#39;use strict&#39;; 
angular.module(&#39;myApp&#39;, [ 
&#39;ngRoute&#39;, 
&#39;myApp.home&#39;           // Newly added home module 
]). 
config([&#39;$routeProvider&#39;, function($routeProvider) { 
// Set defualt view of our app to home 
$routeProvider.otherwise({ 
redirectTo: &#39;/home&#39; 
}); 
}]);

如果大家希望显示自己的home页面，则将home.js添加到该应用的主HTML模板文件当中。要完成这项操作，请打开index.html文件并湢以下代码：

<script src="home/home.js"></script>

现在一切工作已经完成，该应用随时准备加以运行了！要开始使用这款应用，我们需要重启服务器并将自己的浏览器指向http://localhost:8000/app/index.html以访问登入页面，在这里大家可以实现对该应用程序的访问。

如果大家需要使用Firebase（具体理由如前文所述），则需要首先创建一个Firebase账户。在账户创建完成后，我们将屏幕上所显示的已创建应用url添加进来，而后点击“管理该应用”。

创建自己的应用程序感觉不错吧？Angular.js能够为此类开发工作提供我们所需要的一切。而且只需几分钟，我们的这款简单小应用就已经正式上线啦！

好了，以上就是本篇关于angularjs开发web应用的全部内容了（想学更多就拉PHP中文网，AngularJS使用手册栏目学习），你学会了吗？没学会的继续读，知道学会为止。有问题的可以在下方留言提问。

【小编推荐】

angularjs的路由原理你知道吗？这里有angularjs路由的详细原理

angularjs应用场景有哪些？angularjs的应用场景介绍

위 내용은 Anglejs로 웹 애플리케이션을 개발하는 방법은 무엇입니까? Angularjs 개발 웹 애플리케이션 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Anglejs의 라우팅 원리를 아시나요? Anglejs 라우팅의 세부 원칙은 다음과 같습니다.다음 기사：Anglejs의 라우팅 원리를 아시나요? Anglejs 라우팅의 세부 원칙은 다음과 같습니다.