Node.js开发入门—Angular简单示例

最新推荐文章于 2024-07-06 13:52:56 发布

原创

最新推荐文章于 2024-07-06 13:52:56 发布 · 1.7w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#node-js #express #AngularJS #MongoDB

本文通过一个简单的示例介绍如何在Node.js项目中使用AngularJS，涵盖指令、数据绑定和服务等内容。首先通过express generator创建项目，然后加载AngularJS库，定义Angular模块，创建控制器，实现作用域模型，并在HTML模板中使用ng指令进行数据绑定和交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在“使用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">
  </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">{
  
  {currentUser}}</a>&nbsp;<a href="/logout">退出</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"        
        }
      ]    
    },
    {