Angular JS + Express JS入门搭建网站

时间  2019-11-12
标签 angular express 入门 搭建 网站 栏目 AngularJS 繁體版
原文   原文链接

　　3月份开始，接到了新的任务，跟UI开发有关，用的是Angular JS，Express JS等技术。因而周末顺便学习下新技术。html

　　组里产品UI架构以下：前端

 

　　其中前端，主要使用Angular JS框架，另外配合Bootstrap提供的不少控件以及JQuery，后台主要是Express JS搭建的Web Server，Express JS配合Nginx使用很是方便。node

　　由此在项目不忙的时候，本身因而有时间和兴趣学习一下Angular JS与Express JS。angularjs

　　同时本身实现了一个最简单的Angular JS + Express JS的网站示例。express

 

一. Angular JSnpm

　　Angular JS是由谷歌员工开发，后由谷歌维护的一个项目，官网为：https://angularjs.org/。上面有详细的文档，能够下载最新的版本1.4和稳定版1.3.15。缓存

　　简单来说，Angular JS是一个做用在前端的Javascript框架。它的两大特色是经过指令扩展了Html，而且经过表达式绑定数据到Html。同时提供了控制器，Filter过滤器，Factory等服务。服务器

　　Angular JS由于做用在前端，因此能够和任何服务器技术相结合，与Express JS就是很好的结合。cookie

　　Angular JS的产生为了解决静态网页操做DOM的弊端，适用于开发动态Web应用。session

　　Angular JS的原理可经过下图了解：

　　

　　网上入门学习的资料也不少，这里不予赘述。但介绍一下Angular JS的几个重要概念：

　　1. 控制器Controller

　　　　要动态操做网页中的数据，咱们能够针对Html页面编写控制器，控制器本质是一个Javascript方法，例如咱们能够针对每个HTML页面，写一个对应的Javascript方法作控制器，来控制页面中的数据。以下：

　　　　index.html

 1 <!doctype html>
 2 <html ng-app="myApp">
 3     <head>
 4         <script src="lib/angular-1.3.15/angular.js"></script>
 5         <script src="lib/angular-1.3.15/angular-route.js"></script>
 6         <script src="js/controller.js"></script>
 7         <script src="js/angularMainApp.js"></script>
 8     </head>
 9     <body ng-view>
10         <div>
11             <p>Hello {{name}}</p>
12         </div>
13     </body>
14 </html>

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

　　　　controller.js

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

　　　　在controller.js中，咱们定义了一个indexContrl的控制器，这个控制器来给index.html中的name赋值。固然我以为真实开发中，控制器的代码确定会不少，建议每个像indexContrl的控制器单独放在一个JS文件中，这样规范，好维护。

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

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

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

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

　　　　myAngularApp.js

 1 // Declare angular JS level module wich depends on filters, and services
 2 var myApp = angular.module('myApp', [ 'ngRoute', 'myControllers']);
 3 
 4 // route
 5 myApp.config(['$routeProvider',
 6     function($routeProvider) {
 7         $routeProvider.
 8         when(
 9                 '/',
10                 {
11                     templateUrl: 'index.html',
12                     controller: 'indexContrl'
13                 }
14         ).
15         otherwise( {
16             redirectTo: '/404'
17         });
18     }
19 ]);

　　　　值得注意的是，必定要在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。

1 npm install express

　　若是要快速使用Express JS来搭建网站后台，推荐一个工具，叫express-generator，它能够帮你快速建一个Express JS项目，生成必要的文件。

1 npm install -g express-generator

　　

　　但这里，我发现express generator中使用的其余模块较多，如jade作视图渲染等，稍显复杂。我仍是参照，本身创建一个最简单的Express JS项目。

　　路径以下：

　　

　　其中public文件夹中放置的是UI相关文件，以下：

　　

　　其中app.js是Express JS的起始文件，至关于main函数。

　　app.js

 1 var express = require('express');
 2 var http    = require('http');
 3 var path    = require('path');
 4 var routes  = require('./routes/index');
 5 
 6 var app = express();
 7 
 8 app.use(express.static(path.join(__dirname, 'public')));
 9 
10 app.use('/', routes);
11 
12 http.createServer(app).listen(3000);

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

　　routes/index

1 var express = require('express');
2 var router = express.Router();
3 
4 /* GET home page. */
5 router.get('/', function(req, res, next) {
6   res.render('index', { title: 'Express' });
7 });
8 
9 module.exports = router;

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

　　这样经过一条命令，

1 node app.js

　　就能够把网站挂起来。

 

三. 示例结果及小结

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

　　

　　

　　这里讲一个小地方，最初试验时页面的变量怎么也不替换，花了不少个小时，换了Angular JS库，改变了控制器等写法，都没用。最后查资料和文档，才发现只有页面中有ng-view，才会起做用。原来是这样。。。坑爹啊。。。

　　

　　本文只介绍一个很简单的Angular JS + Express JS网站搭建示例。但愿对你有用:-)

 

　　Kevin Song

　　2015-5-11

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程