집 > 기사 > 웹 프론트엔드 > Node.js와 함께 Angular 사용 소개

Node.js와 함께 Angular 사용 소개

不言원래의: 2018-06-30 14:28:081343검색

이 글에서는 Node.js에서 Angular를 사용하는 간단한 예와 Node.js 프로젝트에 AngularJS를 도입하는 방법을 주로 소개합니다. 이번에는 매우 간단한 예를 제공하여 Node.js의 지침, 데이터 바인딩, 서비스 등을 보여줍니다. AngularJS. 관심 있는 친구들은 참고하세요

"AngularJS 사용하기"에서 Node.js 프로젝트에 AngularJS를 도입하는 방법을 언급했습니다. 이번에는 지침, 데이터 바인딩, 서비스 등을 보여주는 아주 간단한 예를 제공합니다.

웹 백엔드 관리 시스템을 구축할 계획입니다. 관리자가 로그인한 후 표시되는 메뉴는 해당 권한에 따라 동적으로 생성됩니다(RBAC와 유사). 이 기사의 예제는 이 프로젝트에서 나온 것이며 물론 여전히 가장 간단합니다.

특별한 지침이 없으면 나중에 사용하는 예제는 Express Generator를 사용하여 생성됩니다.

Angular 작은 데모

먼저 시작하겠습니다.

첫 번째 단계는 myprojects 디렉토리에 들어가서 "express AngularDemo"를 실행하는 것입니다.

두 번째 단계에서는 AngularDemo 디렉터리로 이동하여 "npm install"을 실행합니다.

세 번째 단계에서는 AngularJS로 이동하여 최신 AngularJS 라이브러리 파일을 다운로드하고 1.4.3분 버전을 다운로드하고 이름을 "angular-1.4"로 변경했습니다. .3 .min.js", AngularDemo/public/javascripts 아래에 위치합니다. 간단한 데모의 경우 이 파일 하나만 있으면 충분합니다.

네 번째 단계는 사용하려는 파일을 준비하는 것입니다.

첫 번째는 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>
  <p class="x-view-full" ng-controller="x-controller">
    <p class="x-project-header">
     <p id="x-project-title">X管理后台</p>
     <p 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></p>
    </p>
    <p class="x-sidemenu">
     <p class="x-sidemenu-one" ng-repeat="menu in menus" ng-show="menu.enabled">
      <p class="sidemenu-one">{{menu.text}}</p>
      <p 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>
      </p>
     </p>
    </p>
    <p class="x-contents">
     <p ng-include="content"></p>
    </p>
  </p>
  <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(&#39;x-admin&#39;, []).
controller(&#39;x-controller&#39;, function ($scope, $http) {
 $scope.currentUser="ZhangSan";
 $scope.content = &#39;/welcome.html&#39;;

 $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;
}

p.x-view-full {
 width: 100%;
 height: 100%;
}

p.x-project-header {
 display: inline-block;
 position: absolute;
 border: 1px solid #E4E4E4;
 background: #F2F2F2;
 width: 100%;
 height: 60px;
 left: 0px;
 top: 0px;
}

p.x-sidemenu {
 display: inline-block;
 position: absolute;
 border: 1px solid #E4E4E4;
 background: #F2F2F2;
 left: 0px;
 top: 66px;
 width: 160px;
 height: 600px; 
}

p.x-contents {
 display: inline-block;
 position: absolute;
 left: 170px;
 top: 66px;
 min-width: 200px;
 min-height: 200px;
}

p.x-sidemenu-one{
 margin-left: 8px;
}

p.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;
}

p.admin-addUser{
 position: relative;
 top: 4px;
 left: 10px;
 width: auto;
 height: auto;
}

마지막으로 메뉴 기능을 보여주기 위해 두 개의 정적 HTML 파일인welcome.html과 login.html도 필요합니다. 두 파일 모두 공개 상태로 둘 수 있습니다.

welcome.html의 내용은 다음과 같습니다.

Welcome to X-Manager!

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>登录</title>
 </head>
 <body>
  <p class="form-container">
    <p class="form-header">登录</p>
    <form action=&#39;login&#39; method=&#39;POST&#39; 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=&#39;2&#39; align="right">
        <a href="/signup" rel="external nofollow" >注册</a>
        <input type="submit" value=&#39;登录&#39;/>
       </td>
      </tr>
     </table>
    </form>
  </p>
 </body>
</html>

다섯 번째 단계는 AngularDemo 디렉터리에서 "npm start" 명령을 실행하여 시작합니다. 웹사이트.

6단계, 브라우저에서 "http://localhost:3000/admin.html"을 방문하세요. 다음과 같은 효과가 표시되어야 합니다.

기본 AngularJS 애플리케이션을 만드는 단계

먼저 AngularDemo를 실행해 보겠습니다. 이제 기본 AngularJS 애플리케이션을 만드는 단계를 살펴보겠습니다.

첫 번째 단계는 Node.js 웹 서버를 구현하는 것입니다. 우리는 기본 애플리케이션 템플릿을 사용합니다. app.js를 보면 app.static 미들웨어를 사용하여 브라우저에서 public 디렉터리에 직접 액세스할 수 있습니다. 파일(예: http://localhost:3000/admin.html)

두 번째 단계는 admin.html과 같은 AngularJS HTML 템플릿을 구현하는 것입니다. 이것이 가장 중요합니다. 살펴보겠습니다.

1. AngularJS 라이브러리 로드

스크립트 요소는 admin.html과 같이 HTML 문서의 body 요소 끝에 배치됩니다. 브라우저가 angle-1.4.3.min.js 파일을 다운로드하여 실행합니다. HTML 코드는 다음과 같습니다.

<script src="/javascripts/angular-1.4.3.min.js"></script>

2. Angular 모듈을 구현합니다.

예를 들어, 이 예에서는 HTML 템플릿을 지원하는 컨트롤러를 구현하는 admin.js가 있습니다.

3. 메인 모듈

스크립트 요소를 로드하고 각도 라이브러리 뒤에 배치합니다. HTML 코드는 다음과 같습니다.

<script src="/javascripts/admin.js"></script>

4. 루트 요소 정의

admin.html에는 다음 코드 줄이 있습니다.

<html ng-app="x-admin">

admin.js

angular.module(&#39;x-admin&#39;, [])

의 첫 번째 코드 줄은 해당됩니다. ng-app은 HTML에서 사용됩니다. 지시문은 Angular 모듈 이름을 지정합니다. 이 모듈 이름은 js 코드에서 모듈을 정의하기 위해angular.module을 사용할 때 제공되는 첫 번째 매개변수입니다. 이 예에서 모듈 이름은 "x-admin"입니다.

ng-app을 HTML로 연결한 후 컨트롤러를 추가할 수 있습니다.

ng-app 지시어와 angle.module 메소드에 대해서는 여기(http://docs.angularjs.cn/api)를 참조하세요. 국내산, 총을 뒤집을 필요가 없습니다.

angular.module을 사용하여 모듈을 정의할 때 두 번째 매개변수는 종속 모듈 목록이며 Angular는 종속성 주입 문제를 자동으로 해결합니다. 예를 들어 ui 부트스트랩에 의존한다면 다음과 같이 작성할 수 있습니다:

angular.module(&#39;x-admin&#39;, [&#39;ui.bootstrap&#39;])

문서에서 지침을 설명할 때는 모두 ngApp 형식이고, 코드를 작성할 때는 ng-app 형식이라는 점에 유의해야 합니다. . Angular의 문서는 꽤 훌륭하고 마음에 듭니다.

5. 컨트롤러 추가

admin.html 문서에 다음 코드 줄이 있습니다.

<p class="x-view-full" ng-controller="x-controller">

위 코드는 "x-controller"라는 컨트롤러를

요소에 할당합니다. js에 정의된 동일한 이름을 가진 컨트롤러 범위의 데이터(모델)를 사용합니다.

admin.js의 2번째 줄:

controller(&#39;x-controller&#39;, function ($scope, $http) {

은 컨트롤러를 정의합니다. 구체적인 구문은 여기(http://docs.angularjs.cn/api)를 참조하세요. 국내산, 총을 뒤집을 필요가 없습니다.

controller是angular.Module的一个方法，用来定义控制器，原型是： controller(name, constructor);

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

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

controller(&#39;x-controller&#39;,[&#39;$scope&#39;, &#39;$http&#39;, function($scope, $http){}]);

我看1.3.x，1.4.x的文档里controller方法的原型都是第一种，第二种是我在《Node.js+MongoDB+AngularJS Web开发》里看到。两种我都测试了，都可以用。但跟什么版本什么关系，存疑了。

6. 实现作用域模型

使用Module的controller方法定义控制器时，会让开发者提供控制器的构造函数。当Angular编译HTML时，会使用开发者提供的控制器构造函数创建控制器的实例。构造函数内，会初始化一些数据，关联到作用域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已经说过了。咱说没提过的。

<p 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></p>

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

我们可以修改一下admin.js，使用$interval服务来启动一个定时器，修改currentUser的值。新的admin.js是这样的：

angular.module(&#39;x-admin&#39;, []).
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元素。

<p 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定义的模板元素内部使用。比如上面定义的p模板，使用ng-show指令时就使用了“menu in menus”中定义的menu变量。同时这个p模板内部代码也引用了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的效果，改变管理页面左下区域内显示的内容。示例里当你点击用户管理时会显示一个登陆页面。

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

Node.js와 함께 Angular 사용 소개

관련 기사