Node.js は実際の分析に Angular を使用します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Node.js は実際の分析に Angular を使用します

php中世界最好的语言

May 30, 2018 am 11:29 AM

angular javascript node.js

今回は、Node.js で Angular を使用する場合の実践的な分析をお届けします。Node.js で Angular を使用する際の注意点は何ですか? 以下は実際的なケースです。

「AngularJS の使用」では、AngularJS を Node.js プロジェクトに導入する方法について説明しました。今回は、AngularJS の手順、データバインディング、サービスなどを示す非常に簡単な例を提供します。

Web バックエンド管理システムを構築する予定です。管理者ごとに異なる権限が与えられます。ログイン後に管理者に表示されるメニューは、動的に生成されます (RBAC と同様)。この記事の例はこのプロジェクトからのものであり、もちろん、依然として最も単純なものです。

特別な指示がない場合、後で使用する例はエクスプレスジェネレーターを使用して生成されます。

Angular の小さなデモ

まずは始めてみましょう。

最初のステップは、myprojects ディレクトリに入り、「express AngularDemo」を実行することです。

2 番目のステップでは、AngularDemo ディレクトリに移動し、「npm install」を実行します。

3 番目のステップでは、AngularJS に移動して、最新の AngularJS ライブラリファイルをダウンロードします。1.4.3 分のバージョンをダウンロードし、名前を「angular-1.4」に変更しました。 .3 .min.js」を AngularDemo/public/javascripts に配置します。簡単なデモでは、この 1 つのファイルだけで十分です。

4 番目のステップは、使用するファイルを準備することです。

1 つ目は admin.html で、AngularDemo/public の下に置くだけです。 admin.html のエンコード形式は UTF8 を使用する必要があります。内容は次のとおりです。

<!DOCTYPE html>
<html ng-app="x-admin">
 <head>
  <meta charset="UTF-8">
  <title>X管理系统</title>
  <link rel="stylesheet" href="/stylesheets/admin.css" rel="external nofollow" >
 </head>
 <body>
  <p class="x-view-full" ng-controller="x-controller">
    <p class="x-project-header">
     <p id="x-project-title">X管理后台</p>
     <p id="x-login-user"><a href="/user/tttt" rel="external nofollow" rel="external nofollow" >{{currentUser}}</a> <a href="/logout" rel="external nofollow" rel="external nofollow" >退出</a></p>
    </p>
    <p class="x-sidemenu">
     <p class="x-sidemenu-one" ng-repeat="menu in menus" ng-show="menu.enabled">
      <p class="sidemenu-one">{{menu.text}}</p>
      <p class="x-sidemenu-two" ng-repeat="subMenu in menu.subMenus" ng-show="subMenu.enabled">
       <input type="button" class="sidemenu-button" value="{{subMenu.text}}" ng-click="setContent(subMenu.action)"></input>
      </p>
     </p>
    </p>
    <p class="x-contents">
     <p ng-include="content"></p>
    </p>
  </p>
  <script src="/javascripts/angular-1.4.3.min.js"></script>
  <script src="/javascripts/admin.js"></script>
 </body>
</html>

ログイン後にコピー

すると、admin.js ファイルが AngularDemo/public/javascripts に配置されます。 UTF8 エンコードの場合、内容は次のとおりです。

angular.module('x-admin', []).
controller('x-controller', function ($scope, $http) {
 $scope.currentUser="ZhangSan";
 $scope.content = '/welcome.html';
 $scope.menus = [
  {
   text: "系统管理",
   enabled: true,
   subMenus:[
    {
     text: "用户管理",
     enabled: true,
     action:"/login.html"
    },
    {
     text: "角色管理",
     enabled: true,
     action:"/role"    
    },
    {
     text: "权限管理",
     enabled: true,
     action:"/access"    
    }
   ]
  },
  {
   text: "内容管理",
   enabled: true,
   subMenus:[
    {
     text: "直播监控",
     enabled: true,
     action:"/stream-monitor"
    },
    {
     text: "预约管理",
     enabled: true,
     action:"/book-mgr"    
    }
   ]  
  },
  {
   text: "推送管理",
   enabled: true,
   subMenus:[
    {
     text: "推送列表",
     enabled: true,
     action:"/push-list"
    },
    {
     text: "新增推送",
     enabled: true,
     action:"/add-push"    
    }
   ]  
  }  
 ]; 
 $scope.setContent = function(action){
  console.log(action);
  $scope.content=action;
 };
});

ログイン後にコピー

次に、簡単な CSS ファイル admin.css を作成し、AngularDemo/public/stylesheets に配置しました。内容は次のとおりです:

a {
 color: #00B7FF;
}
p.x-view-full {
 width: 100%;
 height: 100%;
}
p.x-project-header {
 display: inline-block;
 position: absolute;
 border: 1px solid #E4E4E4;
 background: #F2F2F2;
 width: 100%;
 height: 60px;
 left: 0px;
 top: 0px;
}
p.x-sidemenu {
 display: inline-block;
 position: absolute;
 border: 1px solid #E4E4E4;
 background: #F2F2F2;
 left: 0px;
 top: 66px;
 width: 160px;
 height: 600px; 
}
p.x-contents {
 display: inline-block;
 position: absolute;
 left: 170px;
 top: 66px;
 min-width: 200px;
 min-height: 200px;
}
p.x-sidemenu-one{
 margin-left: 8px;
}
p.x-sidemenu-two{
 margin-left: 14px;
 font-size: 14px;
}
p.sidemenu-one{
 font-size: 18px;
 font-weight: bold;
 color: black;
}
.sidemenu-button{
 font-size: 14px;
 border: 0px;
 margin-bottom: 6px;
 background: #F2F2F2;
}
.sidemenu-button:hover {background-color: #218fd5;}
#x-project-title{
 position: absolute;
 display: inline-block;
 top: 20px;
 left: 20px;
 font-size: 28px;
 font-weight: bold;
 width: 200px;
}
#x-login-user{
 position: absolute;
 display: inline-block;
 top: 30px;
 right: 10px;
 width: 200px; 
 text-align: right;
}
p.admin-addUser{
 position: relative;
 top: 4px;
 left: 10px;
 width: auto;
 height: auto;
}

ログイン後にコピー

最後に、メニュー機能をデモンストレーションするには、welcome.html と login.html という 2 つの静的 HTML ファイルも必要です。どちらも public に配置できます。

welcome.html の内容は次のとおりです:

Welcome to X-Manager!

ログイン後にコピー

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>登录</title>
 </head>
 <body>
  <p class="form-container">
    <p class="form-header">登录</p>
    <form action=&#39;login&#39; method=&#39;POST&#39; align="center">
     <table>
      <tr>
        <td><label for="user">账号：</label></td>
        <td><input type="text" id="user" name="login_username" /></td>
      </tr>
      <tr>
        <td><label for="pwd">密码：</label></td>
        <td><input type="password" id="pwd" name="login_password" /></td>
      </tr>
      <tr>
       <td colspan=&#39;2&#39; align="right">
        <a href="/signup" rel="external nofollow" >注册</a>
        <input type="submit" value=&#39;登录&#39;/>
       </td>
      </tr>
     </table>
    </form>
  </p>
 </body>
</html>

ログイン後にコピー

5 番目のステップでは、AngularDemo ディレクトリで「npm start」コマンドを実行して、 Webサイト。

ステップ 6、ブラウザで「http://localhost:3000/admin.html」にアクセスします。次の効果が表示されるはずです:

基本的な AngularJS アプリケーションを作成する手順

まず、AngularDemo を実行してみましょう。次に、基本的な AngularJS アプリケーションを作成する手順を見てみましょう。

最初のステップは、Node.js Web サーバーを実装することです。この Express はデフォルトのアプリケーションテンプレートを使用します。app.js を見ると、パブリックディレクトリを処理するために app.static ミドルウェアを使用していることがわかります。ブラウザでパブリックディレクトリに直接アクセスできます。ファイル (http://localhost:3000/admin.html など)。

2 番目のステップは、admin.html などの AngularJS HTML テンプレートを実装することです。これが最も重要ですので、見てみましょう。

1. AngularJS ライブラリをロードします

さて、script 要素は、admin.html のように、HTML ドキュメントの body 要素の最後に配置されます。ブラウザーが angular-1.4.3.min.js ファイルをダウンロードして実行します。 HTML コードは次のとおりです。

<script src="/javascripts/angular-1.4.3.min.js"></script>

ログイン後にコピー

2. Angular モジュールを実装します

たとえば、この例では、HTML テンプレートをサポートするコントローラーを実装する admin.js です。

3. メインモジュール

script要素をロードし、Angularライブラリの後ろに配置します。 HTML コードは次のとおりです:

<script src="/javascripts/admin.js"></script>

ログイン後にコピー

4. ルート要素を定義します

admin.html には次のコード行があります:

<html ng-app="x-admin">

ログイン後にコピー

admin.js のコードの最初の行

angular.module('x-admin', [])

ログイン後にコピー

これらの 2 行のコードは対応しています。 ng-app は HTML で使用されます。ディレクティブは Angular モジュール名を指定します。このモジュール名は、angular.module を使用して JS コードでモジュールを定義するときに指定される最初のパラメーターです。この例では、モジュール名は「x-admin」です。

ng-app を HTML に関連付けたら、コントローラーを追加できます。

ng-app ディレクティブと angular.module メソッドについては、こちらを参照してください: http://docs.angularjs.cn/api。国内では銃をひっくり返す必要はありません。

使用angular.module定义模块时，第二个参数是依赖的模块列表，Angular会自动为你解决依赖注入问题。比如你依赖ui bootstrap，可以这么写：

angular.module('x-admin', ['ui.bootstrap'])

ログイン後にコピー

需要注意的是：文档里描述指令时，都是ngApp这种形式，而写代码时，是ng-app。angular的文档还是不错的，赞一个。

5. 添加控制器

admin.html文档中有这行代码：

<p class="x-view-full" ng-controller="x-controller">

ログイン後にコピー

上面的代码把名字是“x-controller”的控制器分配到

元素中，这样我们就可以在这个元素中使用js里定义的同名控制器的作用域内的数据（Model）。

admin.js的第2行代码：

controller('x-controller', function ($scope, $http) {

ログイン後にコピー

定义了一个控制器。具体的语法参考这里吧：http://docs.angularjs.cn/api。国内的，无需翻qiang。

controller是angular.Module的一个方法，用来定义控制器，原型是： controller(name, constructor);

第一个参数是控制器的名字，第二个参数是控制器的构造函数。构造函数的参数是控制器依赖的服务。

还有一种语法controller(name,[])，第二个参数是控制器的依赖数组。比如：

复制代码代码如下:

controller('x-controller',['$scope', '$http', function($scope, $http){}]);

我看1.3.x，1.4.x的文档里controller方法的原型都是第一种，第二种是我在《Node.js+MongoDB+AngularJS Web开发》里看到。两种我都测试了，都可以用。但跟什么版本什么关系，存疑了。

6. 实现作用域模型

使用Module的controller方法定义控制器时，会让开发者提供控制器的构造函数。当Angular编译HTML时，会使用开发者提供的控制器构造函数创建控制器的实例。构造函数内，会初始化一些数据，关联到作用域scope里的数据和方法，都可以直接被HTML引用。

我在admin.js里x-controller控制器的构造函数内，提供了menus数组，用于构造管理界面的左侧菜单；提供了currentUser，显示在管理界面右上角；content则用来保存管理界面左下角区域使用的局部html模板；最后呢，提供了一个setContent方法，以便用户可以通过管理界面的菜单来更改content，进而改变功能区域的内容。

7. 在HTML模板中使用指令和绑定数据

其实在实现作用域模型时，心里对“什么数据和哪个HTML元素对应”这一点是一清二楚的，不清楚你也实现不来啊不是。

一旦你实现了作用域模型，就可以在HTML模板里使用ng指令来关联数据了。其实有时候你是先写HTML模板，还是先实现作用域模型，还真分不太清楚。

我们以admin.html为例来说明一下ng指令的用法，注意，只提admin.html中用到的，没用到就看http://docs.angularjs.cn/api。我们用到了ng-app、ng-controller、ng-repeat、ng-click、ng-show、ng-include、{{}}。

ng-app和ng-controller已经说过了。咱说没提过的。

复制代码代码如下:

这行代码里用到了{{expression}}这种语法，花括号之间是一个使用作用域内的变量构成的JS表达式。示例里直接引用了currentUser变量，实际运行中会用admin.js里的currentUser的值替换HTML文档中的这部分代码。如果在运行过程中currentUser变量的值发生变化，HTML也会变化，这是数据绑定。

我们可以修改一下admin.js，使用$interval服务来启动一个定时器，修改currentUser的值。新的admin.js是这样的：

angular.module('x-admin', []).
controller('x-controller', function ($scope, $http, $interval) {
 $scope.currentUser="ZhangSan";
 $scope.content = '/welcome.html';
 $scope.menus = [
  ...... 
 ]; 
 $scope.setContent = function(action){
  console.log(action);
  $scope.content=action;
 };
 //2秒后改变一次currentUser
 $interval(function(){
  $scope.currentUser = "LiSi";
 }, 2000, 1);
});

ログイン後にコピー

ng-repeat指令可以根据一个集合，使用一个模板化的item来创建多个相似的HTML元素。

<p class="x-sidemenu-one" ng-repeat="menu in menus" ng-show="menu.enabled">

ログイン後にコピー

上面的代码使用ng-repeat指令，根据x-controller里定义的menus数组来创建多个

元素，每个都具有相同的结构。在ng-repeat指令内，通常使用“x in collections”这种语法来遍历作用域中的某个集合，而x又可以在ng-repeat定义的模板元素内部使用。比如上面定义的p模板，使用ng-show指令时就使用了“menu in menus”中定义的menu变量。同时这个p模板内部代码也引用了menu，参看下面的代码：

<p class="sidemenu-one">{{menu.text}}</p>

ログイン後にコピー

ng-show指令放在某个HTML元素内部，用来指示是否显示该元素。

ng-click指令可以指定某个元素被点击时的响应（函数）。

复制代码代码如下:

上面的代码使用ng-click指令为代表子菜单的按钮指定了响应鼠标点击的代码“setContent(subMenu.action)”。setContent是作用域内定义的方法，subMenu是ng-repeat指令内定义的变量。

有了这样的处理，当用户点击某个菜单时，就会调用到admin.js里的setContent方法来改变content的值。而这种改变，会反过来影响HTML的效果，改变管理页面左下区域内显示的内容。示例里当你点击用户管理时会显示一个登陆页面。

促成这种效果的代码如下：

<p ng-include="content"></p>

ログイン後にコピー

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7323

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

Ubuntu 24.04 に Angular をインストールする方法 Mar 23, 2024 pm 12:20 PM

Angular.js は、動的アプリケーションを作成するための無料でアクセスできる JavaScript プラットフォームです。 HTML の構文をテンプレート言語として拡張することで、アプリケーションのさまざまな側面を迅速かつ明確に表現できます。 Angular.js は、コードの作成、更新、テストに役立つさまざまなツールを提供します。さらに、ルーティングやフォーム管理などの多くの機能も提供します。このガイドでは、Ubuntu24 に Angular をインストールする方法について説明します。まず、Node.js をインストールする必要があります。 Node.js は、ChromeV8 エンジンに基づく JavaScript 実行環境で、サーバー側で JavaScript コードを実行できます。ウブにいるために

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について Mar 15, 2024 pm 04:51 PM

Angular フレームワークのコンポーネントのデフォルトの表示動作は、ブロックレベルの要素ではありません。この設計の選択により、コンポーネントスタイルのカプセル化が促進され、開発者が各コンポーネントの表示方法を意識的に定義することが促進されます。 CSS プロパティの表示を明示的に設定することで、Angular コンポーネントの表示を完全に制御して、目的のレイアウトと応答性を実現できます。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

See all articles

Node.js は実際の分析に Angular を使用します

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック