이번에는 Node.js와 함께 Angular를 사용하는 단계에 대해 자세히 설명하겠습니다. Node.js와 함께 Angular를 사용할 때 주의사항은 무엇인가요?
"AngularJS 사용"에서는 Node.js 프로젝트에 AngularJS를 도입하는 방법을 언급했습니다. 이번에는 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('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; } 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!
login.html은 다음과 같습니다(참고, UTF8 인코딩).
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> </head> <body> <p 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> </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('x-admin', [])
의 첫 번째 코드 줄은 해당됩니다. 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 bootstrap,可以这么写:
angular.module('x-admin', ['ui.bootstrap'])
需要注意的是:文档里描述指令时,都是ngApp这种形式,而写代码时,是ng-app。angular的文档还是不错的,赞一个。
5. 添加控制器
admin.html文档中有这行代码:
<p 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里的数据和方法,都可以直接被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已经说过了。咱说没提过的。
复制代码 代码如下:
这行代码里用到了{{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元素。
<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指令可以指定某个元素被点击时的响应(函数)。
复制代码 代码如下:
上面的代码使用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를 사용하는 자세한 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!