ホームページ > 記事 > ウェブフロントエンド > Node.js での Angular の使用の概要

Node.js での Angular の使用の概要

不言オリジナル: 2018-06-30 14:28:081393ブラウズ

この記事では主に、Node.js で Angular を使用する簡単な例と、Node.js プロジェクトに AngularJS を導入する方法を紹介します。 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(&#39;x-admin&#39;, []).
controller(&#39;x-controller&#39;, function ($scope, $http) {
 $scope.currentUser="ZhangSan";
 $scope.content = &#39;/welcome.html&#39;;

 $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(&#39;x-admin&#39;, [])

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

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

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

angular.module を使用してモジュールを定義する場合、2 番目のパラメーターは依存モジュールのリストであり、Angular は依存関係注入の問題を自動的に解決します。たとえば、UI ブートストラップに依存する場合は、次のように書くことができます:

angular.module(&#39;x-admin&#39;, [&#39;ui.bootstrap&#39;])

ドキュメント内で命令を記述するときはすべて ngApp の形式であり、コードを記述するときは ng-app であることに注意してください。。 Angular のドキュメントは非常に優れており、気に入っています。

5. コントローラーを追加します

admin.html ドキュメントには次のコード行があります:

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

上記のコードは、「x-controller」という名前のコントローラーを

要素に割り当てます。 jsで定義した同名のコントローラーのスコープ内のデータ(Model)を使用します。

admin.js の 2 行目:

controller(&#39;x-controller&#39;, function ($scope, $http) {

はコントローラーを定義します。特定の構文については、http://docs.angularjs.cn/api を参照してください。国内では銃をひっくり返す必要はありません。

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

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

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

controller(&#39;x-controller&#39;,[&#39;$scope&#39;, &#39;$http&#39;, 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已经说过了。咱说没提过的。

<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>

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

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

angular.module(&#39;x-admin&#39;, []).
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指令可以指定某个元素被点击时的响应（函数）。

<input type="button" class="sidemenu-button" value="{{subMenu.text}}" ng-click="setContent(subMenu.action)">

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

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

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

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

上面的代码使用ng-include指令来包含一个HTML片段。当你使用ng-include指定了一个html片段后，Angular会解析这个指令，获取对应的html文档，编译，并且将其内容整合进原始html文档内。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

Node.js での Angular の使用の概要

関連記事