ホームページ >ウェブフロントエンド >jsチュートリアル >angularjs を使用して Web アプリケーションを開発するにはどうすればよいですか? Angularjs 開発 Web アプリケーションの例
angularjs を使用して Web アプリケーションを開発するにはどうすればよいですか? Angularjs 開発 Web アプリケーションの例
- 寻∝梦オリジナル
- 2018-09-06 15:06:091240ブラウズ
この記事では主に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('myApp', [ 'ngRoute' ])
ngRoute モジュールは、ルーティングを完全に構成できる重要なコンポーネント、つまり $routeProvider をもたらします。ルート定義を完了するには、次のコードを使用して $routeProvider を angular-module の構成メソッドに挿入する必要があります:
'use strict';
angular.module('myApp', [
'ngRoute'
]).
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';
angular.module('myApp.home', ['ngRoute'])
// Declared route
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
});
}])
// Home controller
.controller('HomeCtrl', [function() {
}]);现在应用程序已经准备就绪。打开app.js，而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由，具体代码如下所示：
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.home' // Newly added home module
]).
config(['$routeProvider', function($routeProvider) {
// Set defualt view of our app to home
$routeProvider.otherwise({
redirectTo: '/home'
});
}]);如果大家希望显示自己的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的应用场景介绍
以上がangularjs を使用して Web アプリケーションを開発するにはどうすればよいですか? Angularjs 開発 Web アプリケーションの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。