Node.js使用有角的简单示例

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

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

如果没有特别说明，后面我们用到的示例都使用快速发电机生成。

有角的小演示

先搞起来吧。

第一步，进入我的项目目录，执行表达观点。

第二步，导航到AngularDemo目录，执行“国家预防机制安装"

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

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

首先是admin.html，放在AngularDemo/public下面即可。admin.html的编码格式要用UTF8。内容如下：

！DOCTYPE html html ng-app=' x-admin ' head meta charset=' UTF-8 ' TItlex管理系统/title link rel='样式表href='/样式表/admin . CSS“rel=”外部no follow/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-log in-user ' a href='/user/tttt ' rel=' external no follow ' rel=' external no follow ' { currentUser } }/aa href='/logout ' rel=' external nofollow ' rel=' external nofollow '退出/a/div/div class=' x-side menu ' div class=' x-side menu-one ' ng-repeat=' menu ' ng-show=' menu '中的菜单。 已启用“p class=”侧面菜单-一个“{ menu。text } }/p div class=' x边菜单-two ' ng-repeat='菜单。订阅子菜单ng-show=' subscribe。“已启用”输入类型=' button ' class='侧面菜单-button '值=' { { subscribe。文本} } ' ng-click='设置内容(子菜单接着是admin.js文件，放在AngularDemo/public/JavaScript下面UTF8。编码哦，内容如下：

angular.module('x-admin '，[]).控制器(“x-控制器”，函数($scope，$ http){ $ scope。当前用户='占三'；$ scope。content='/欢迎。html '；$scope.menus=[ { text: '系统管理，enabled: true，子菜单3360[{ text : }用户管理，enabled: true，action:'/login.html' }，{ text: '角色管理，enabled: true，action:'/role' }，{ text: '权限管理，enabled: true，action:'/access' } ] }，{ text: '内容管理，enabled: true，子菜单3360[{ text : }直播监控，enabled: true，action:'/stream-monitor' }，{ text: '预约管理，enabled: true，action:'/book-mgr' } ] }，text: '推送管理，enabled: true，子菜单3360[{ text : }推送列表，enabled: true，action:'/push-list' }，{ text: '新增推送，enabled: true，action : '/add-push ' }]}]；$ scope。set content=function(action){ console。日志(操作)；$ scope . content=action }；});接下来我写了一个简单的半铸钢钢性铸铁(铸造半钢)文件——admin.css，放在AngularDemo/public/样式表下面。内容如下：

a { color: # 00B7FF} div。x-view-full { width : 100%；高度： 100%;} div。x-project-header { display : inline-block；绝对位置：border: 1px实心# E4E4E4background: # F2F2F2宽度： 100%;高度： 60pxleft: 0pxtop: 0px} div。x端菜单{ display : inline-block；绝对位置：border: 1px实心# e4e4 background : # f2f2f2left : 0pxtop : 66px宽度： 160像素；高度： 600像素；} div。x-contents { display : inline-block；绝对位置：左侧： 170pxtop: 66px最小宽度： 200像素；最小高度： 200像素；} div。x侧菜单-一{边距-左侧： 8px} div。x侧菜单-两个{边距-左侧： 14pxfont-size : 14px} p . side menu-one { font-size : 18px；字体粗细：粗体；颜色：黑色；}.侧面菜单-按钮{ font-size : 14pxborder: 0px边距-底部： 6pxbackground: # F2F2F2}。侧面菜单-按钮：悬停{背景色： # 218 FD 5；} # x-project-title { position : absolute；显示器：内联块；top : 20pxleft : 20pxfont-size : 28px；字体粗细：粗体；宽度： 200像素；} # x-登录用户{绝对位置：显示器：内联块；top: 30pxright: 10px宽度： 200像素；文本对齐：右侧；} div。admin-addUser {职位：相对；top: 4pxleft: 10px宽度：自动；height: auto}最后，为演示菜单功能，我们还需要welcome.html和login.html这两个静态的超文本标记语言文件，都放在公众的下面即可。

welcome.html内容如下：

欢迎来到X经理！login.html内容如下（注意，UTF8编码):

！DOCTYPE html html head meta charset=' UTF-8 '标题登录/title/head body div class=' form-container ' p class=' form-header '登录/p表单操作=“登录”方法=' POST ' align=' center '表tr TD标签为=' user '账号：/label/TD TD输入类型=' text ' id=' user ' name=' log in _ username '/TD/tr TD标签为=' pwd '密码：/label/TD TD输入类型=' password ' id=' pwd name=' log in _ password '/TD/tr TD col span=' 2 ' align=' right ' a href='/signing ' rel=' external no follow '注册/a输入类型='提交'值='登录//TD/tr/table/form/div/body/html第五步，在AngularDemo目录里，执行“国家预防机制启动"命令，启动网站。

第六步，在浏览器里访问http://本地主机：3000/管理员。html。应该会看到下面的效果哦：

创建基本AngularJS应用的步骤

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

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

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

1.加载AngularJS库

嗯，脚本元素，放在超文本标记语言文档身体元素的最后，如admin.html那样。浏览器会帮你下载并执行angular-1.4.3.min.js文件HTML。代码如下：

脚本src=' http :/JavaScript/angular-1。4 .3 .量滴js '/脚本2 .实现你的有角的模块

比如我们示例中的admin.js，它实现了一个控制器来支持超文本标记语言模板。

3.加载你的主模块

脚本元素，就放在有角的库的后面，放后面，这是必须的HTML。代码如下：

脚本src=' http :/JAVAScript/admin。js '/脚本4 .定义根元素

admin.html有这么一行代码：

html ng-app='x-admin'admin.js的第一行代码

angular.module('x-admin '，[])这两行代码是对应的，HTML里使用再渲染到指令指定了有角的模块名字。而这个模块名字，就是你的射流研究…代码里使用角度模块定义模块时提供的第一个参数。对于我们的示例，模块名字叫x-管理员。

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

ng-app指令和angular.module方法参考这里：http://docs.angularjs.cn/api.国内，不需要转qiang。

使用angular.module定义模块时，第二个参数是依赖模块列表，angular会自动为您解决依赖注入问题。例如，如果您依赖ui引导，您可以这样写：

棱角分明。模块(' x-admin '，['ui。bootstrap'])需要注意的是，文档中的指令是以ngApp的形式描述的，但在编写代码时是ng-app。Angular的文档还是不错的，像一个。

5.添加控制器

admin.html文件中有这样一行代码：

上面的代码将名为“x控制器”的控制器分配给

元素，这样我们就可以在这个元素中使用js中定义的同名控制器范围内的数据。

Admin.js第2行代码：

控制器(' x-controller '，函数($ scope，$ http){定义了一个控制器。具体语法请参考http://docs.angularjs.cn/api。国内，不需要转到羌族。

控制器是一种角度控制的方法。模块，用于定义控制器。原型是：控制器(名称、构造函数)；

第一个参数是控制器的名称，第二个参数是控制器的构造函数。构造函数的参数是控制器所依赖的服务。

还有另一种语法：controller(name，[])，第二个参数是控制器的依赖数组。例如：

复制代码如下：Controller ('x-controller '，['$ scope '，' $ http '，function ($ scope，$ http){ }])；

我看到1.3.x和1.4.x的文档中控制器方法的原型是第一个，第二个是我在《Node.js+MongoDB+AngularJS Web开发》中看到的。这两个我都测试过了，可以用。但跟什么版本有什么关系，还有疑问。

6.实现范围模型

当使用模块的控制器方法定义控制器时，要求开发人员提供控制器的构造函数。当Angular编译HTML时，它使用开发人员提供的控制器构造函数创建控制器的实例。在构造函数中，一些数据将被初始化并与作用域相关联。范围内的数据和方法可以直接被HTML引用。

在admin.js中x-controller的构造函数中，我提供了一个menu数组来构造管理界面的左侧菜单。管理界面右上角提供并显示CurrentUser内容用于保存管理界面左下角使用的本地html模板；最后提供了一个setContent方法，让用户可以通过管理界面的菜单改变内容，进而改变功能区的内容。

7.在HTML模板中使用说明和绑定数据

事实上，当您实现范围模型时，您确切地知道什么数据对应于哪个HTML元素。也不清楚你能不能实现。

一旦实现了范围模型，就可以使用ng指令来关联HTML模板中的数据。事实上，有时不清楚应该先编写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-log in-user ' a href='/user/tttt ' rel=' external nofollow ' rel=' external nofollow ' { currentuser } }/aa href='/logout ' rel=' external nofollow ' rel=' external nofollow '

这一行代码中使用了语法{{expression}}。花括号之间是由作用域中的变量组成的JS表达式。在示例中，直接引用了currentUser变量。在实际操作中，HTML文档中的这部分代码会被admin.js中的currentUser值替换，如果currentUser变量的值在运行过程中发生变化，HTML也会随之变化。这就是数据绑定。

我们可以修改admin.js，使用$interval服务启动一个计时器，并修改currentUser的值。新的admin.js如下所示：

angular.module('x-admin '，[])。controller('x-controller '，function ($scope，$http，$ interval){ $ scope . currentuser=' Zhansan '；$ scope . content='/welcome . html '；$ scope . menu=[.];$ scope . setcontent=function(action){ console . log(action)；$ scope.content=action};//更改currentuser $ interval(function(){ $ scope。2秒后currentuser=' lisi}, 2000, 1);});ng-repeat指令可以使用一个模板化的项目根据一个集合创建多个相似的HTML元素。

div class=' x-side menu-one ' ng-repeat=' menu中的菜单' ng-show=' menu。上面的代码使用ng-repeat指令根据x-controller中定义的菜单数组创建多个菜单

元素，每个元素都具有相同的结构。在ng-repeat指令中，“集合中的x”的语法通常用于遍历作用域中的某个集合，x可以在ng-repeat定义的模板元素内部使用。例如，上面定义的div模板在使用ng-show指令时使用了“菜单中的菜单”中定义的菜单变量。同时，这个div模板的内部代码也是指菜单，参见下面的代码：

p class=' side menu-one ' { { menu . text } }/png-show指令放置在HTML元素中，以指示是否显示该元素。

ng-click指令可以指定单击元素时的响应(函数)。

复制的代码如下：输入类型='按钮'类='侧菜单-按钮'值=' { {子菜单。text}}' ng-click=' setContent(子菜单。动作)

上面的代码使用ng-click指令来指定代码“set content(Subscription . action)”，以响应鼠标单击代表子菜单的按钮。SetContent是一个在作用域中定义的方法，subscribe是一个在ng-repeat指令中定义的变量。

通过这种处理，当用户单击菜单时，将调用admin.js中的setContent方法来更改内容的值。这种变化将反过来影响HTML的效果，并改变管理页面左下角显示的内容。在该示例中，当您单击用户管理时，将显示登录页面。

产生这种效果的代码如下：

Div ng-include='content'/div上面的代码使用ng-include指令来包含一个HTML片段。当您使用ng-include指定一个html片段时，Angular会解析该指令，获取相应的html文档，对其进行编译，并将其内容集成到原始html文档中。

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