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 相关文章推荐
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
常规表格多表头查询示例
Feb 21 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
Fetch超时设置与终止请求详解
May 18 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 Stream_*系列函数
2010/08/01 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
Python矩阵常见运算操作实例总结
2017/09/29 Python
Django中url的反向查询的方法
2018/03/14 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
抽象类和接口的区别
2012/09/19 面试题
经理管理专业毕业自荐书范文
2014/02/12 职场文书
体育教师自我鉴定
2014/02/12 职场文书
项目施工员岗位职责
2014/03/09 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
2014年库房工作总结
2014/11/26 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
父亲节活动总结
2015/02/12 职场文书
公务员个人年终总结
2015/02/12 职场文书
护理培训心得体会
2016/01/22 职场文书
辞职申请书范本
2019/05/20 职场文书