Heim > Artikel > Web-Frontend > Einführung in die Verwendung von Angular mit Node.js
Einführung in die Verwendung von Angular mit Node.js
- 不言Original
- 2018-06-30 14:28:081393Durchsuche
In diesem Artikel wird hauptsächlich ein einfaches Beispiel für die Verwendung von Angular in Node.js und die Einführung von AngularJS in ein Node.js-Projekt vorgestellt. Dieses Mal wird ein sehr einfaches Beispiel bereitgestellt, um die Anweisungen, Datenbindung, Dienste usw. zu demonstrieren . in AngularJS. Interessierte Freunde können sich auf
In „Verwenden von AngularJS“ beziehen, wie wir AngularJS in das Node.js-Projekt einführen. Dieses Mal stellen wir ein sehr einfaches Beispiel zur Verfügung, um die Anweisungen in AngularJS zu demonstrieren. usw.
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='login' method='POST' 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='2' align="right">
<a href="/signup" rel="external nofollow" >注册</a>
<input type="submit" value='登录'/>
</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 einfachen 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.
Wenn Sie angle.module zum Definieren eines Moduls verwenden, ist der zweite Parameter eine Liste abhängiger Module, und Angular löst das Abhängigkeitsinjektionsproblem automatisch für Sie. Wenn Sie sich beispielsweise auf UI-Bootstrap verlassen, können Sie Folgendes schreiben:
angular.module('x-admin', ['ui.bootstrap'])
Es ist zu beachten, dass bei der Beschreibung von Anweisungen im Dokument diese immer in der Form von ngApp vorliegen und beim Schreiben von Code die Form von ng vorliegt -App. Die Dokumentation von Angular ist ziemlich gut, sie gefällt mir.
5. Einen Controller hinzufügen
Es gibt diese Codezeile im admin.html-Dokument:
<p class="x-view-full" ng-controller="x-controller">
Der obige Code ändert den Namen in Der Controller „x-controller“ wird dem Element
zugewiesen, sodass wir die Daten (Modell) im Geltungsbereich des in js definierten Controllers mit demselben Namen in diesem Element verwenden können.
Zeile 2 von admin.js:
controller('x-controller', function ($scope, $http) {definiert einen Controller. Informationen zur spezifischen Syntax finden Sie hier: http://docs.angularjs.cn/api. Im Inland muss die Waffe nicht abgegeben werden.
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已经说过了。咱说没提过的。
<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('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指令可以指定某个元素被点击时的响应（函数）。
<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中文网！
相关推荐：
Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Angular mit Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse