Heim >Web-Frontend >js-Tutorial >Detaillierte Schritte zur Verwendung von Angular mit Node.js

Detaillierte Schritte zur Verwendung von Angular mit Node.js

php中世界最好的语言Original: 2018-05-22 10:41:071509Durchsuche

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von Angular mit Node.js ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von Angular mit Node.js? Hier sind praktische Fälle.

In „Verwenden von AngularJS“ haben wir erwähnt, wie man AngularJS in ein Node.js-Projekt einführt. Dieses Mal stellen wir ein sehr einfaches Beispiel zur Verfügung, um die Anweisungen und Datenbindung in AngularJS, Diensten und anderen Inhalten zu demonstrieren .

Ich habe vor, ein Web-Backend-Managementsystem aufzubauen. Das Menü, das der Administrator nach der Anmeldung sieht, hängt von seinen Berechtigungen ab (ähnlich wie bei RBAC). Die Beispiele in diesem Artikel stammen aus diesem Projekt und sind natürlich immer noch die einfachsten.

Sofern nicht anders angegeben, werden die Beispiele, die wir später verwenden, alle mit dem Express-Generator generiert.

Angular kleine Demo

Lass uns zuerst damit beginnen.

Der erste Schritt besteht darin, das Verzeichnis myprojects aufzurufen und „express AngularDemo“ auszuführen.

Im zweiten Schritt navigieren Sie zum AngularDemo-Verzeichnis und führen „npm install“ aus.

Im dritten Schritt gehen Sie zu AngularJS, um die neueste AngularJS-Bibliotheksdatei herunterzuladen. Ich habe die Version 1.4.3 heruntergeladen , benennen Sie es um in „angular-1.4.3.min.js“ und platzieren Sie es unter AngularDemo/public/javascripts. Für unsere einfache Demo reicht nur diese eine Datei.

Der vierte Schritt besteht darin, die Dateien vorzubereiten, die wir verwenden möchten.

Die erste ist admin.html, die unter AngularDemo/public platziert werden kann. Das Codierungsformat von admin.html sollte UTF8 verwenden. Der Inhalt ist wie folgt:

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

Dann wird die Datei admin.js unter AngularDemo/public/javascripts abgelegt. UTF8-Kodierung, der Inhalt lautet wie folgt:

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;
 };
});

Als nächstes habe ich eine einfache CSS-Datei geschrieben – admin.css – und sie unter AngularDemo/public/stylesheets abgelegt. Der Inhalt lautet wie folgt:

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

Um die Menüfunktion zu demonstrieren, benötigen wir schließlich noch zwei statische HTML-Dateien, willkommen.html und login.html, die beide unter öffentlich abgelegt werden können. Der Inhalt von

welcome.html lautet wie folgt:

Welcome to X-Manager!

der Inhalt von login.html lautet wie folgt (Hinweis: UTF8-Kodierung):

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

Der fünfte Schritt im AngularDemo-Verzeichnis Führen Sie den Befehl „npm start“ aus, um die Website zu starten.

Der sechste Schritt besteht darin, „http://localhost:3000/admin.html“ im Browser aufzurufen. Sie sollten den folgenden Effekt sehen:

Schritte zum Erstellen einer einfachen AngularJS-Anwendung

Was wir getan haben früher Egal was passiert, lassen Sie uns zuerst AngularDemo ausführen. Schauen wir uns nun die Schritte zum Erstellen einer grundlegenden AngularJS-Anwendung an.

Der erste Schritt besteht darin, einen Node.js-Webserver zu implementieren. Dieser Express erledigt dies für uns. Wenn Sie sich app.js ansehen, sollten Sie feststellen, dass es die Middleware app.static verwendet, um das öffentliche Verzeichnis im Browser zu verarbeiten. Datei wie http://localhost:3000/admin.html.

Der zweite Schritt besteht darin, eine AngularJS-HTML-Vorlage zu implementieren, wie zum Beispiel unsere admin.html. Das ist das Wichtigste, werfen wir einen Blick darauf.

1. Laden Sie die AngularJS-Bibliothek

Nun, das Skriptelement wird am Ende des Body-Elements des HTML-Dokuments platziert, wie admin.html. Der Browser lädt die Datei „angular-1.4.3.min.js“ herunter und führt sie für Sie aus. Der HTML-Code lautet wie folgt:

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

2. Implementieren Sie Ihr Angular-Modul

Zum Beispiel admin.js in unserem Beispiel, das einen Controller zur Unterstützung von HTML-Vorlagen implementiert .

3. Laden Sie Ihr Hauptmodul

Skriptelement und platzieren Sie es hinter der Winkelbibliothek. Der HTML-Code lautet wie folgt:

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

4. Definieren Sie das Stammelement

admin.html enthält diese Codezeile:

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

Die erste Codezeile in admin. js

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

Diese beiden Codezeilen entsprechen sich. Der Name des Angular-Moduls wird mithilfe der ng-app-Direktive in HTML angegeben. Dieser Modulname ist der erste Parameter, der bereitgestellt wird, wenn Sie angle.module verwenden, um das Modul in Ihrem JS-Code zu definieren. In unserem Beispiel lautet der Modulname „x-admin“.

Nachdem die ng-app in HTML verknüpft ist, können Sie den Controller hinzufügen.

Informationen zur ng-app-Direktive und der angle.module-Methode finden Sie hier: http://docs.angularjs.cn/api. Im Inland muss die Waffe nicht abgegeben werden.

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

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

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

In Verbindung stehende Artikel

Mehr sehen