angularjs を使用して Web アプリケーションを開発するにはどうすればよいですか? Angularjs 開発 Web アプリケーションの例-jsチュートリアル-php.cn

angularjs を使用して Web アプリケーションを開発するにはどうすればよいですか? Angularjs 開発 Web アプリケーションの例

寻∝梦

リリース： 2018-09-06 15:06:09

オリジナル

1203 人が閲覧しました

この記事では主にangularjsを使った簡単なWebアプリケーションの開発方法を紹介します。知りたい方は急いでご覧ください。angularjsでWebアプリケーションを開発する方法を詳しく紹介しています。次に、一緒に記事を読みましょう

まずは angularjs の強みを理解しましょう:

現在、さまざまな種類の Web 開発者が AngularJS を広く使用しており、この優れたフレームワークがさまざまなニーズを満たすことができることが十分に証明されています。。 Web 開発者として、初心者であっても、豊富な実務経験があるとしても、優れたフレームワークを選択することが作業の必須の前提条件であり、AngularJS はまさに理想的なソリューションです。 AnguarJS を使用する過程で、アプリケーション開発と、より優れた魅力的なアプリケーション結果を構築する方法について詳しく学ぶことができます。アプリケーションの作成にベストプラクティスを採用したい場合は、AngularJS も非常に役立ちます。全体として、このフレームワークの強力な機能と機能は、アプリケーション開発のニーズを持っている友人を決して失望させることはありません。

AngularJS には多くの優れた機能があります。今日は、その使用方法を理解するのに役立つ簡単なアプリケーションを例に挙げます。 Firebase を使用すると、シンプルだが実用的なアプリケーションを簡単に構築できます。開発したアプリは完成品として、誰でもいつでもログインしたり、ログインして記事を公開したりできるようになります。

これは AngularJS と Firebase の紹介です:

AngularJS は現在、Web 開発者の間で最も人気のある JavaScript MVC フレームワークです。ユニークなアプリケーションを作成したい場合は、強力な HTML 関数拡張機能のおかげで、これが最適な選択となることは間違いありません。 AngularJS のおかげで、アプリケーションを構築するために多くのコードを使用する必要がなくなり、その驚くべき依存関係の挿入とバインドのメカニズムにより、アプリケーション開発が非常に便利になります。

その一方で、Firebase は AngularJS の優れたサポートを提供できるため、作成したアプリケーションのバックエンドサポートを開発する手間が省けます。 Firebase の助けを借りて、私たちのアプリケーションはリアルタイムでデータのバックアップを実行できるようになります。もちろん、必要な API 呼び出しは引き続き不可欠です。

AngularJS 自体はすでに非常に強力ですが、Firebase の助けを借りて、アプリケーションの結果を次のレベルに引き上げることができます。

本文はここから始まります。注意してください:

AngularJS を使用してこのシンプルな小さな Web アプリケーションを作成し始める前に、まず angular-seed プロジェクトをダウンロードする必要があります。ダウンロードが完了したら、対応するダウンロードディレクトリを開き、そのディレクトリに依存関係をインストールして実行する必要があります。具体的なコードは次のとおりです:

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

ログイン後にコピー

次のステップは、次の代表者を使用してノードサーバーを起動することです:

$ npm start ## Start the server

ログイン後にコピー

ノードサーバーが起動して実行されたら、ブラウザを開いて http:// にアクセスする必要があります。 localhost:8000/app/index.html、実行中のデフォルトアプリが表示されます。

次に、アプリケーションコードが保存されている、angular-seed プロジェクトフォルダーの下のアプリケーションディレクトリに移動します。

アプリケーションのコアとなるapp.jsもアプリケーションフォルダーに格納されます。 app.js 内のすべてのアプリケーションレベルのモジュールとルートを宣言する必要があります。

さらに、ここには angular-seed の 2 つのビュー、つまりビュー 1 とビュー 2 もあります。これらは常にデフォルトの形式で存在します。アプリケーションフォルダー内のこれらのビューを削除する必要があります。

次に、アプリケーションを最初から作成します。まず、app.js を開いて、その中の既存のコードをすべて削除する必要があります。 app.js でアプリケーションルートを定義するには、AngularJS のモジュールの 1 つである ngRoute を使用する必要があります。デフォルトでは、app.js にはこのモジュールが含まれていないため、使用するにはアプリケーションに手動で挿入する必要があります。次のコードを使用して、AngularJS モジュールの追加を完了できます:

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

ログイン後にコピー

ngRoute モジュールは、ルーティングを完全に構成できる重要なコンポーネント、つまり $routeProvider をもたらします。ルート定義を完了するには、次のコードを使用して $routeProvider を angular-module の構成メソッドに挿入する必要があります:

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

ログイン後にコピー

上記の手順を完了すると、index.html を開くことができます。 Index.html 内のすべてのコンテンツをクリアし、スクリプト参照と div だけを残します。

ルーティングを変更するたびに、上記の方法に従って div コンテンツを調整する必要があります。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトをお勧めします。そこには、見たいangularjs ビデオチュートリアルがあります)

次に、ビュー内にシンボルを作成します:

に新しいフォルダーを作成する必要があります。 appディレクトリに置き、homeという名前にします。このフォルダー内に、home.js と home.html という 2 つの追加フォルダーを作成します。まず 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文件并湢以下代码：