如何使用Angular JS + Express JS入门搭建网站

技术如何使用Angular JS + Express JS入门搭建网站这期内容当中小编将会给大家带来有关如何使用Angular JS + Express JS入门搭建网站,文章内容丰富且以专业的角度为大家分析和叙述,阅读

本期,边肖将给大家带来如何使用Angular JS Express JS搭建网站的信息。文章内容丰富,从专业角度进行分析和叙述。看完这篇文章,希望你能有所收获。

1月份收到了UI开发相关的新任务,使用了Angular JS、Express JS等技术。所以我在周末学习了一些新技术。

组里产品UI架构如下:

如何使用Angular  JS  + Express  JS入门搭建网站

其中前端主要使用Angular JS框架,另外配合Bootstrap和JQuery提供的很多控件,后端主要使用Express JS搭建的Web Server,配合Nginx使用非常方便。

所以在项目不忙的时候,我有时间和兴趣去学习Angular JS和Express JS。

同时实现了Angular JS Express JS最简单的网站示例。

一. Angular JS

Angular JS是一个由谷歌员工开发,然后由谷歌维护的项目。官网是:https://angularjs.org/.上面有详细的文档,可以下载1.4版和稳定版的1 . 3 . 15 * * *。

简单来说,Angular JS是一个作用于前端的Javascript框架。它的两大特点是Html通过指令扩展,数据通过表达式绑定到Html。同时,它还提供控制器、过滤器和工厂等服务。

Angular JS可以和任何服务器技术结合,因为它作用于前端,和Express JS是很好的结合。

Angular JS适合开发动态Web应用,以解决静态网页操作DOM的缺点。

Angular JS的原理可通过下图了解:

如何使用Angular  JS  + Express  JS入门搭建网站

网上入门学习的资料也很多,这里不再赘述。但是介绍Angular JS的一些重要概念:

1. 控制器Controller

为了动态操作网页中的数据,我们可以为Html页面编写一个控制器,这本质上是一个Javascript方法。例如,我们可以为每个HTML页面编写一个对应的Javascript方法,作为控制页面中数据的控制器。如下所示:

index.html

!doctypehtmlhtmlng-app=' myApp ' head scriptrc=' lib/angular-1 . 3 . 15/angular . js '/script script src=' lib/angular-1 . 3 . 15/angular-route . js '/script script src=' js/controller . js '/script script script src=' js/angularmainapp . js '/script/head dyng-viewdivpHello { { name } }/p/div nbsp

;   </body> </html>

这是一个Angular JS控制编写的页面,指定Angular JS的app为myApp,注意看其中的表达式,{{name}},name就是一个动态变量。那name的值从何而来?就是要在对应的控制器中给name赋值,从来用户访问index.html页面时可看到name真实的值。

controller.js

// Declare angular JS level module wich depends on filters, and services var myControllers = angular.module('myControllers', []);  // controller myControllers.controller('indexContrl', ['$scope', function ($scope) {     $scope.name = "Kevin"; }]);

在controller.js中,我们定义了一个indexContrl的控制器,这个控制器来给index.html中的name赋值。当然我觉得真实开发中,控制器的代码肯定会很多,建议每一个像indexContrl的控制器单独放在一个JS文件中,这样规范,好维护。

那有一个问题,indexContrl如何与index.html关联起来?Angular JS怎么知道我们要用indexContrl来控制index.html?

这里有两种方式,一是在index.html中直接指定,

<div ng-controller="indexContrl">
<p>Hello {{name}}</p>
</div>

但这种方式,对于大型网站来说,太麻烦。建议使用另外一种方式,就是用Angular JS的另一个Module ng-route,做路由控制,针对不同的路径,在同一个文件中定义好各自的控制器。如下:

myAngularApp.js

// Declare angular JS level module wich depends on filters, and services var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers']);  // route myApp.config(['$routeProvider',     function($routeProvider) {         $routeProvider.         when(                 '/',                 {                     templateUrl: 'index.html',                     controller: 'indexContrl'                 }         ).         otherwise( {             redirectTo: '/404'         });     } ]);

值得注意的是,一定要在myApp的moudle中引用ng-route,同时要在文件中引用angular-route.js文件,否则不起作用。

这样index.html页面中的数据,会被indexContrl函数控制。这里只是一个简单的Demo,更多的功能要去看文档。

2. Filter过滤器

Angular JS提供过滤器功能,本质是我们定义一些通用的方法,来格式化页面上输出的数据。非常方便。

建议开发时放在单独的Filter.js文件中。

3. Factory服务

也是让我们定义一些通用的方法,作为服务。但所有的服务都是延迟实例化,只要用到时或被依赖时才会实例化,都是单例。

建议开发时放在单独的Factory.js文件中。

二. Express JS

在示例的前端中,我们使用Angular JS框架开发了Html页面以及对应的JS文件。但网站的后台就要用其他技术了。如果我们要用Node.js做后台,那很简单,http.createServer就可以了。但在真实的网站开发中,用Express JS会更适合。

Express JS是目前***的基于Node.js的Web开发框架,提供各种模块,如session,cookie等,可快速搭建一个具有完整功能的网站。

本质来讲,Express JS是基于Node.js内置的http模块开发而成。

Express JS和Nginx反向代理服务器搭配非常方便。

这里Express JS有一个重要概念是中间件middleware,可以加载使用很多Express JS或其他模块提供的模块作为中间件,它的作用是处理http请求,一个中间件处理完,可以传递给下一个中间件。

可使用NPM来下载Express JS。

npm install express

如果要快速使用Express JS来搭建网站后台,推荐一个工具,叫express-generator,它可以帮你快速建一个Express JS项目,生成必要的文件。

npm install -g express-generator

但这里,我发现express generator中使用的其他模块较多,如jade做视图渲染等,稍显复杂。我还是参照,自己建立一个最简单的Express JS项目。

路径如下:

如何使用Angular JS + Express JS入门搭建网站

其中public文件夹中放置的是UI相关文件,如下:

如何使用Angular JS + Express JS入门搭建网站

其中app.js是Express JS的起始文件,相当于main函数。

app.js

var express = require('express'); var http    = require('http'); var path    = require('path'); var routes  = require('./routes/index');  var app = express();  app.use(express.static(path.join(__dirname, 'public')));  app.use('/', routes);  http.createServer(app).listen(3000);

这里,就是使用Express JS建立一个server,注意第8行代码的作用是指定页面的文件夹,第10句的作用是关于路径/的路由信息在routes文件夹里的index文件中定义,这两句顺序不能错。

routes/index

var express = require('express'); var router = express.Router();  /* GET home page. */ router.get('/', function(req, res, next) {   res.render('index', { title: 'Express' }); });  module.exports = router;

意为对于路径/的访问,去public文件夹下找index.html文件。

这样通过一条命令,

node app.js

就可以把网站挂起来。

三. 示例结果及小结

***访问网站,可看到正确的结果,网站已被挂起,同时页面中的变量已被Angular JS控制器替换为正确数据。

如何使用Angular JS + Express JS入门搭建网站

这里讲一个小地方,最初试验时页面的变量怎么也不替换,花了很多个小时,换了Angular JS库,改变了控制器等写法,都没用。***查资料和文档,才发现只有页面中有ng-view,才会起作用。

上述就是小编为大家分享的如何使用Angular JS + Express JS入门搭建网站了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/56687.html

(0)

相关推荐

  • 一寸照片尺寸多少厘米,一寸照片到底是多少厘米

    技术一寸照片尺寸多少厘米,一寸照片到底是多少厘米一寸照片对应的尺寸是2.5厘米*3.5厘米,其中宽度为2.5厘米,长度为3.5厘米一寸照片尺寸多少厘米。身份证和体检表等多采用小一寸的尺寸22×32mm,第二代身份证采用的

    生活 2021年10月20日
  • 北京名胜古迹介绍,北京十大旅游区你知道有哪些

    技术北京名胜古迹介绍,北京十大旅游区你知道有哪些北京历史悠久,是世界著名的历史文化名城,又是举世瞩目的现代化都市,北京的旅游资源极为丰富,到北京旅游令人向往北京名胜古迹介绍。北京旅游,首推故宫博物院,这是北京旅游的首选目

    生活 2021年10月28日
  • 解除流量封顶,40G流量用完啦,怎么办

    技术解除流量封顶,40G流量用完啦,怎么办联通腾讯王卡解除流量封顶,根据网络使用公平原则,在当月总流量达到40G后将会关闭上网功能,次月自动恢复。如当月要继续使用,可通过电子渠道开通“解除流量封顶服务”,开通后超出40G

    生活 2021年10月23日
  • 怎么以软件开发人员的身份更新技能

    技术怎么以软件开发人员的身份更新技能这篇文章主要介绍“怎么以软件开发人员的身份更新技能”,在日常操作中,相信很多人在怎么以软件开发人员的身份更新技能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家

    攻略 2021年10月21日
  • 古代著名书法家有哪些,历史上有哪些书法小故事

    技术古代著名书法家有哪些,历史上有哪些书法小故事好的,我乐意回答这个问题古代著名书法家有哪些!相传,东晋年间,有位修化于山阴的道士,特别喜欢王羲之的字,可惜无缘获得。后来,他从别人的口中了解到,王经常观察白鹅游戏,并从双

    生活 2021年10月28日
  • 连接到LilyPad的Windows平台的驱动程序是什么?

    技术连接LilyPad之Windows平台的驱动是什么这篇文章主要介绍了连接LilyPad之Windows平台的驱动是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家

    2021年12月21日