Node.js使用Angular简单示例资源-CSDN文库

119 浏览量 2021-01-21 19:02:13 上传评论收藏 109KB PDF 举报

资源推荐

资源详情

资源评论

Node.js使用使用Angular简单示例简单示例

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

},

剩余6页未读，继续阅读

内容反馈

weixin_38725015

粉丝: 8
资源: 926

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip