脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → Node.js 使用AngularJS

Node.js 使用AngularJS的方法示例

 更新时间：2018年05月11日 09:59:23   作者：foruok  
这篇文章主要介绍了Node.js 使用AngularJS的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

做一个Web应用，一般都有前台和后台，Node.js可以实现后台，利用jade模板引擎也可以生成一些简单的前台页面，但要想开发出具有实际意义的现代Web应用，还得搭配一个Web前端框架。

AngularJS是一个JavaScript前端框架，对于Node.js来说是一个完美的客户端库。AngularJS强制使用MVC（模型-视图-控制器，Model-View-Controller）框架，而它又使用JavaScript对象作为它的模型，和Node.js特别般配，用AngularJS的某些服务（比如$http）和Node.js通信，交互的对象不需要被转换为其它结构就能同时在前端和后端使用，堪称完美。

还有一点，AngularJS背靠Google，值得信赖。不过，天朝网络也真特么绝了，难道仅仅因为这一点，https://angularjs.org/就不能访问了吗，就不能访问了吗，就不能访问了吗！重要的事情说三遍，说三遍，说三遍，你懂的。不过，你可以翻qiang或者买个VPN，访问就没问题了。另外，你也可以通过github访问AngularJS：https://github.com/angular/angular.js。github上还有一个好东东：https://github.com/jmcunningham/AngularJS-Learning，里面列出了各种AngularJS的学习链接。最后呢，还有http://www.angularjs.cn/这个中文站，以及很多点缀在互联网上的AngularJS资源，Google或百度都可以找到。

AngularJS是什么

AngularJS其实就是一个js库，一个js文件，帮助我们更好的开发Web前端。在github上，AngularJS这么介绍自己：

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, AngularJS teaches the browser how to do dependency injection and inversion of control.
Oh yeah and it helps with server-side communication, taming async callbacks with promises and deferreds. It also makes client-side navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake. Best of all?? It makes development fun!

都是英文的，Are u OK？

按我的理解，这几点是比较重要的：

  1. 扩展HTML语法，动态修改HTML
  2. 双向数据绑定
  3. 提供针对前端和后端的各种服务，比如http，http，cookie，window，window，timeout，$document等，方便开发者

还有很多基于AngularJS的UI库，帮助我们构建复杂的Web UI，比如https://github.com/angular-ui或https://github.com/angular-ui/bootstrap。

AngularJS的学习资源

很多，Google或百度吧。另外推荐：https://github.com/jmcunningham/AngularJS-Learning。

也有很多专门讲AngularJS开发的图书，不过我没看过。我看的是《Node.js+MongoDB+AngularJS Web开发》，我觉得蛮不错的，涵盖了MEAN（Node.js-Express-AngularJS-MongoDB）技术栈，是想用一种语言成就全栈工程师梦想的不错选择。

在Node.js中支持AngularJS

AngularJS是一个客户端的JavaScript库，要想在Node.js里支持它，只要在HTML模板中嵌入script标记，让客户端能获取到angular.js文件就成了。

比如这样：

[code]<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>[/code]

但这基本上是死路一条，因为国内Google不通啊。所以，最好是翻qiang或VPN下载下来，部署到你的网站上，然后这样：

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

在HTML文档中使用AngularJS

  1. 这基本上分为四个部分：
  2. 使用ng-app指令定义应用程序模块
  3. 加载在script标签中定义的angular.js库
  4. 在HTML文档里插入angular相关的指令（directive）
  5. 实现控制器（一般在一个js文件里）

下面是一个使用AngularJS的HTML文档：

<!doctype html>
<html ng-app="myApp">
<head>
 <title>Node.js + Express + AngularJS</title>
</head>
<body>
 <div ng-controller="myController">
 <h3>Favorite Frameworks:</h3>
 <li ng-repeat="framework in frameworks">{{framework}}</li>
 </div>
 <script src="/javascripts/angular-1.4.3.min.js"></script>
 <script src="/javascripts/frameworks.js"></script>
</body>
</html>

上面的文档内引用到的frameworks.js内容如下：

angular.module('myApp', []).
 controller('myController', ['$scope', function($scope){
 $scope.frameworks = ['Node.js', 'Express', 'AnjularJS'];
 }]);

把frameworks.html文件放在HelloExpress的public目录下面，把frameworks.js放在public/javascripts目录下，运行网站，在浏览器打开地址“http://localhost:3000/frameworks.html”，效果如下图所示：

在jade模板中使用AngularJS

其实jade模板文件里使用AngularJS，只需要将Angular指令嵌入即可，没什么特别的。如果你有现成的html文档，也可以使用html转jade的在线工具来转换为jade模板文件，在这里：http://html2jade.org。

前面使用了AnjularJS的HTML文档，对应的jade模板文件frameworks.jade内容如下：

doctype html
html(ng-app="myApp")
 head
 title Node.js + Express + AngularJS
 body
 div(ng-controller="myController")
  h3 Favorite Frameworks:
  li(ng-repeat="framework in frameworks")
  {{framework}}

 script(src="/javascripts/angular-1.4.3.min.js")
 script(src="/javascripts/frameworks.js")

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 基于Node.js的http模块搭建HTTP服务器

    基于Node.js的http模块搭建HTTP服务器

    这篇文章主要为大家介绍了基于Node.js的http模块来搭建HTTP服务器的示例过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
    2022-02-02
  • 利用node.js如何搭建一个简易的即时响应服务器

    利用node.js如何搭建一个简易的即时响应服务器

    这篇文章主要介绍了利用node.js如何搭建一个简易的即时响应服务器的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-05-05
  • nodejs结合socket.io实现websocket通信功能的方法

    nodejs结合socket.io实现websocket通信功能的方法

    这篇文章主要介绍了nodejs结合socket.io实现websocket通信功能的方法,结合实例形式分析了nodejs结合socket.io实现websocket通信的具体步骤与相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • NodeJS父进程与子进程资源共享原理与实现方法

    NodeJS父进程与子进程资源共享原理与实现方法

    这篇文章主要介绍了NodeJS父进程与子进程资源共享原理与实现方法,结合实例形式分析了nodejs基于cluster模块实现父进程与子进程资源共享的相关操作技巧,需要的朋友可以参考下
    2018-03-03
  • npm淘宝镜像过期解决办法

    npm淘宝镜像过期解决办法

    npm 官方镜像在国内访问很慢,很多同学都会选择切换到国内的一些 npm 镜像,本文主要介绍了npm淘宝镜像过期解决办法,感兴趣的可以了解一下
    2024-02-02
  • Node.js Continuation Passing Style( CPS与回调)

    Node.js Continuation Passing Style( CPS与

    这篇文章主要介绍了Node.js Continuation Passing Style,将回调函数作为参数传递，这种书写方式通常被称为Continuation Passing Style（CPS），它的本质仍然是一个高阶函数,CPS最初是各大语言中对排序算法的实现
    2022-06-06
  • Node.js中使用事件发射器模式实现事件绑定详解

    Node.js中使用事件发射器模式实现事件绑定详解

    这篇文章主要介绍了Node.js中使用事件发射器模式实现事件绑定详解,本文一并讲解了回调模式、发射器模式、事件类型等基础知识做了补充,需要的朋友可以参考下
    2014-08-08
  • node以及npm版本不对应出错的完美解决方法

    node以及npm版本不对应出错的完美解决方法

    最近项目用到了node和npm,查看一下当前版本,发现有报错,下面这篇文章主要给大家介绍了关于node以及npm版本不对应出错的完美解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Node.js web 应用如何封装到Docker容器中

    Node.js web 应用如何封装到Docker容器中

    这篇文章主要介绍了Node.js web 应用如何封装到Docker容器中，帮助大家更好的学习node.js和使用docker容器，感兴趣的朋友可以了解下
    2020-09-09
  • Express框架定制路由实例分析

    Express框架定制路由实例分析

    这篇文章主要介绍了Express定制路由,结合实例形式分析了express框架定制路由原理、用法及相关注意事项,需要的朋友可以参考下
    2023-05-05

最新评论