Node.js使用Angular简单示例


Posted in Javascript onMay 11, 2018

在“使用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!

login.html内容如下(注意,UTF8编码):

<!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”。应该会看到下面的效果哦:

Node.js使用Angular简单示例

创建基本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指令可以指定某个元素被点击时的响应(函数)。

<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的效果,改变管理页面左下区域内显示的内容。示例里当你点击用户管理时会显示一个登陆页面。

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
Node.js 使用AngularJS的方法示例
May 11 #Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 #Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 #Javascript
Node.js使用cookie保持登录的方法
May 11 #Javascript
实例解析Vue.js下载方式及基本概念
May 11 #Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 #Javascript
基于ionic实现下拉刷新功能
May 10 #Javascript
You might like
PHP 透明水印生成代码
2012/08/27 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php图片添加水印例子
2016/07/20 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
用一段js程序来实现动画功能
2007/03/06 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
express 项目分层实践详解
2018/12/10 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python正则表达式使用经典实例
2016/06/21 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Python3实现定时任务的四种方式
2019/06/03 Python
python next()和iter()函数原理解析
2020/02/07 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
python爬取代理ip的示例
2020/12/18 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
金融专业个人求职信
2013/09/22 职场文书
公司年会策划方案
2014/05/17 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
党员反邪教心得体会
2016/01/15 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server