Node.js使用Angular简单示例

2024-10-06 07:03:58

在“使用AngularJS”中，我们提到了如何在Node.js项目中引入AngularJS，这次提供一个非常简单的示例，演示AngularJS里的指令、数据绑定、服务等内容。

我准备做Web后台管理系统，不同的管理员会有不同的权限，管理员登录后看到的菜单和他的权限有关，能看到什么，是动态生成的（类似RBAC）。本文的示例从这个项目而来，当然，现在还是最简单的。

如果没有特别说明，后面我们用到的示例都使用express generator生成。

Angular小demo

先搞起来吧。

第一步，进入myprojects目录，执行“express AngularDemo”。

第二步，导航到AngularDemo目录，执行“npm install”

第三步，到AngularJS下载最新的AngularJS库文件，我下载的是1.4.3 min版本，重命名为“angular-1.4.3.min.js”，放在AngularDemo/public/javascripts下面。对于我们这个简单的Demo，只要这一个文件就可以了。

第四步，准备我们要用的文件。

首先是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>
  <div class="x-view-full" ng-controller="x-controller">
    <div class="x-project-header">
     <div id="x-project-title">X管理后台</div>
     <div 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></div>
    </div>
    <div class="x-sidemenu">
     <div class="x-sidemenu-one" ng-repeat="menu in menus" ng-show="menu.enabled">
      <p class="sidemenu-one">{{menu.text}}</p>
      <div 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>
      </div>
     </div>
    </div>
    <div class="x-contents">
     <div ng-include="content"></div>
    </div>
  </div>
  <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;
}

div.x-view-full {
 width: 100%;
 height: 100%;
}

div.x-project-header {
 display: inline-block;
 position: absolute;
 border: 1px solid #E4E4E4;
 background: #F2F2F2;
 width: 100%;
 height: 60px;
 left: 0px;
 top: 0px;
}

div.x-sidemenu {
 display: inline-block;
 position: absolute;
 border: 1px solid #E4E4E4;
 background: #F2F2F2;
 left: 0px;
 top: 66px;
 width: 160px;
 height: 600px;
}

div.x-contents {
 display: inline-block;
 position: absolute;
 left: 170px;
 top: 66px;
 min-width: 200px;
 min-height: 200px;
}

div.x-sidemenu-one{
 margin-left: 8px;
}

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

div.admin-addUser{
 position: relative;
 top: 4px;
 left: 10px;
 width: auto;
 height: auto;
}

最后，为演示菜单功能，我们还需要welcome.html和login.html这两个静态的html文件，都放在public下面即可。

welcome.html内容如下：

Welcome to X-Manager!

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>登录</title>
 </head>
 <body>
  <div 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>
  </div>
 </body>
</html>

第五步，在AngularDemo目录里，执行“npm start”命令，启动网站。

第六步，在浏览器里访问“http://localhost:3000/admin.html”。应该会看到下面的效果哦：

创建基本AngularJS应用的步骤

前面我们不管三七二十一先把AngularDemo跑起来了。现在我们看下创建一个基本的AngularJS应用的步骤。

第一步是实现一个Node.js Web服务器。这个express为我们代劳了，我们就用默认的应用模板，你去看app.js的话，应该发现它把public目录使用app.static中间件处理了一下，我们可以直接在浏览器里访问public目录下的文件，比如http://localhost:3000/admin.html。

第二步就是实现一个AngularJS HTML模板，比如我们的admin.html。这是最重要的，我们展开来看看。

1. 加载AngularJS库

嗯，script元素，放在HTML文档body元素的最后，如admin.html那样。浏览器会帮你下载并执行angular-1.4.3.min.js文件。HTML代码如下：

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

2. 实现你的Angular模块

比如我们示例中的admin.js，它实现了一个控制器来支持HTML模板。

3. 加载你的主模块

script元素，就放在angular库的后面，放后面，这是必须的。HTML代码如下：

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

4. 定义根元素

admin.html有这么一行代码：

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

admin.js的第1行代码

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

这两行代码是对应的，HTML里使用ng-app指令指定了Angular模块名字。而这个模块名字，就是你的js代码里使用angular.module定义模块时提供的第一个参数。对于我们的示例，模块名字叫“x-admin”。

在HTML中关联了ng-app后，就可以添加控制器了。

关于ng-app指令和angular.module方法，参考这里吧：http://docs.angularjs.cn/api。国内的，无需翻qiang。

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

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

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

5. 添加控制器

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

<div 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上。在作用域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已经说过了。咱说没提过的。

代码如下:

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

这行代码里用到了{{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元素。

<div 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定义的模板元素内部使用。比如上面定义的div模板，使用ng-show指令时就使用了“menu in menus”中定义的menu变量。同时这个div模板内部代码也引用了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的效果，改变管理页面左下区域内显示的内容。示例里当你点击用户管理时会显示一个登陆页面。

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

Node.js 使用AngularJS的方法示例
angular2+node.js express打包部署的实战
angular.js+node.js实现下载图片处理详解
Angular.js与node.js项目里用cookie校验账户登录详解
AngularJS+Node.js实现在线聊天室
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录

AngularJS+Node.js实现在线聊天室

不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍,对于基本的使用依然有很多说不清道不明的疑惑,于是决定通过做一个在线聊天室帮助理解.DEMO可以戳→chat room,代码可以戳→ChatRoom-AngularJS. 清晰图可以戳 http://files.jb51.net/file_images/article/201508/201508281040051.gif 功能着手开发之前,首先明确一
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录

一.闲扯有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包括用户角色.发表微博.共享位置等等.这次也是有点私心的,为了锻炼最近看的angularjs,于是果断选择Node.js + MongoDB + angular.js的方案.当然,开发Node.js的体会越来越深刻.记得,去年leader告诉我说尽量让node的每一个服务只支撑一个业务功能,这样才能更方便的维护.当时特别想把一个Node服务做的特别强大.现在看来leader的做法是对的,我更加倾向于把n
angular2+node.js express打包部署的实战

Angular2我自己还在摸索学习中,本文介绍了angular2+node.js express打包部署的实战,分享给大家,也给自己留个笔记 angular是客户端js,Node.js 是服务端JS,建立SPA 网站需要把这两者统一到一起. 1.angular2项目创建,使用angular-cli ng new mypos 2.使用express命令行工具创建express项目. express --view=hbs 3.angular2 中需要引用到第三方库例如 jQuery,bootst
Node.js 使用AngularJS的方法示例

做一个Web应用,一般都有前台和后台,Node.js可以实现后台,利用jade模板引擎也可以生成一些简单的前台页面,但要想开发出具有实际意义的现代Web应用,还得搭配一个Web前端框架. AngularJS是一个JavaScript前端框架,对于Node.js来说是一个完美的客户端库.AngularJS强制使用MVC(模型-视图-控制器,Model-View-Controller)框架,而它又使用JavaScript对象作为它的模型,和Node.js特别般配,用AngularJS的某些服务(比如
Angular.js与node.js项目里用cookie校验账户登录详解

前言最近的新项目中,用户登录需要采用cookie来记住用户,校验身份.所以本文就把实现的过程总结出来分享给大家,需要的朋友们可以参考学习. 在header中携带authId登录在之前老的项目里,没有采用cookie来记录用户登录状态,而是在请求的header中携带一个身份标识来校验,大致方案如下: 客户端使用post请求提交user.password给服务端进行登录操作: 服务端校验用户是否合法,如果合法将产生一个唯一的身份标识authId,返回给客户端,客户端将此authId存放本地(如l
angular.js+node.js实现下载图片处理详解

前言本文主要介绍的是angular.js+node.js实现下载图片处理,下载有两种方式,下面话不多说,来看看详细的介绍吧. 第一种: 不指定完整路径,然后发送get给server让server自己去拼接路径,然后用express的res.download来做下载: Express: var filePath = path.join(savePath, file[0].name); console.log('Download file: ' + filePath); res.download(
Node.js使用Angular简单示例

在"使用AngularJS"中,我们提到了如何在Node.js项目中引入AngularJS,这次提供一个非常简单的示例,演示AngularJS里的指令.数据绑定.服务等内容. 我准备做Web后台管理系统,不同的管理员会有不同的权限,管理员登录后看到的菜单和他的权限有关,能看到什么,是动态生成的(类似RBAC).本文的示例从这个项目而来,当然,现在还是最简单的. 如果没有特别说明,后面我们用到的示例都使用express generator生成. Angular小demo 先搞起来吧. 第
node.js操作mongodb简单示例分享

前两篇文章我们介绍了nodejs操作redis和MySQL,下面简要测试一下nodejs操作mongodb: 首先安装nodejs mongodb npm install mongodb 代码 var mongodb = require('mongodb'); var server = new mongodb.Server('localhost', 27017, {auto_reconnect:true}); var db = new mongodb.Db('mydb', server, {sa
node.js express安装及示例网站搭建方法(分享)

1.首先肯定是要安装Node.JS windows cmd依次输入如下命令: cd C:\Program Files\nodejs\ npm install -g express npm install -g express-generator 2.创建一个示例工程 windows cmd依次输入如下命令: cd C:\Program Files\nodejs\node_global express -e microblog //即ejs,-j(即jade) cd microblog npm i
Node.js实战建立简单的Web服务器

前面一章,我们介绍了Node.js这个面向互联网服务的JavaScript服务器平台,同时Node.js的运行环境已经搭建起来,并通过两段HelloWorld程序验证了Node.js的基本功能.本章我们同样通过实战的演练,利用Node.js建立一个简单的Web服务器. 如果你熟悉.NET或其他类似平台的Web开发,你可能会像,建立一个Web服务器有什么,在Visual Studio中建立一个Web工程,点击运行即可.事实的确是这样,但请不要忘记,这样的代价是,比如果说,你是用.NET开发Web应
详解用Node.js写一个简单的命令行工具

本文介绍了用Node.js写一个简单的命令行工具,分享给大家,具体如下: 操作系统需要为Linux 1. 目标在命令行输入自己写的命令,完成目标任务命令行要求全局有效命令行要求可以删除命令行作用,生成一个文件,显示当前的日期 2. 代码部分新建一个文件,命名为sherryFile 文件sherryFile的内容介绍: 生成一个文件,文件内容为当前日期和创建者 #! /usr/bin/env node console.log('command start'); const fs = r
Node.js console控制台简单用法分析

本文实例讲述了Node.js console控制台简单用法.分享给大家供大家参考,具体如下: 在Node.js官方文档 https://nodejs.org/api/console.html 中描述了控制台的所有API方法. Class: Console - new Console(stdout[, stderr]) - console.assert(value[, message][, ...]) - console.dir(obj[, options]) - console.erro
搞懂什么是Node.js原来这么简单

Node.js 的官方介绍在 Node.js 的官方网站的首页中,有这样一句话来描述 Node.js: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. 翻译过来的意思就是: Node.js 是基于 Chrome
node.js做一个简单的爬虫案例教程

准备工作首先,你需要下载 nodejs,这个应该没啥问题吧原文要求下载 webstrom,我电脑上本来就有,但其实不用下载,完全在命令行里面操作就行创建工程准备工作做完了,下面就开始创建工程了首先,在你想要放资源的地方创建文件夹,比如我在 E 盘里面创建了一个 myStudyNodejs 的文件夹在命令行里面进入你创建的文件夹如图进入 e 盘:E: 进入文件夹:cd myStudyNodejs(你创建的文件夹的名字) 注意全是英文符号初始化项目,在你创建的文件夹下面运行 npm
autojs的Node.js正确退出脚本示例

目录正文写界面的格式脚本退出但是可能会发生异常报错正文写界面的格式 class MainActivity extends ui.Activity { ... } 比如我们在界面里面加了个按钮, 点击按钮之后就退出脚本 btn.setOnClickListener(function () { process.exit(0) }); 脚本退出但是可能会发生异常报错那么正确的姿势是什么呢? 沿用安卓额方法, 要退出脚本的时候, 这样写 // this指向的是org.autojs.autoj
使用Node.js实现一个简单的FastCGI服务器实例

本文是我最近对Node.js学习过程中产生的一个想法,提出来和大家一起探讨. Node.js的HTTP服务器使用Node.js可以非常容易的实现一个http服务,最简的例子如官方网站的示例: 复制代码代码如下: var http = require('http');http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Wo

Node.js使用Angular简单示例

您可能感兴趣的文章:

相关推荐

随机推荐