建站技术

近来，接到了新的使命，跟UI开发有关，用的是Angular JS，Express JS等技能。所以周末趁便学习下新技能。

组里产品UI架构如下：

其间前端，首要运用Angular JS结构，别的合作Bootstrap供给的很多控件以及JQuery，后台首要是Express JS建立的Web Server，Express JS合作Nginx运用十分便利。

由此在项目不忙的时分，自个所以有时刻和兴趣学习一下Angular JS与Express JS。

一起自个完结了一个最简略的Angular JS + Express JS的网站示例。

一. Angular JS

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

简略来讲，Angular JS是一个作用在前端的Javascript结构。它的两大特点是通过指令拓展了Html，而且通过表达式绑定数据到Html。一起供给了操控器，Filter过滤器，Factory等效劳。

Angular JS由于作用在前端，所以能够和任何效劳器技能相结合，与Express JS即是极好的结合。

Angular JS的发生为了处理静态页面操作DOM的坏处，适用于开发动态Web应用。

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

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

1. 操控器Controller

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

index.html

Hello {{name}}

这是一个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中直接指定，

• Hello {{name}}

但这种办法，对于大型网站来说，太费事。主张运用别的一种办法，即是用Angular JS的另一个Module ng-route，做路由操控，对于不相同的途径，在同一个文件中界说好各自的操控器。