设为首页  |  收藏本站
  • 电  话:18970730900(潘先生)
  • Email:81654350@qq.com
  • Q Q:点击这里给我发消息
您从哪里了解到我们的网站?
搜索引擎(百度等)
本中心客户的网站
朋友介绍
论坛贴子
其它途径
    
使用AngularJS+ExpressJS入门搭建网站
更新时间:2015-5-12   浏览次数:

最近,接到了新的任务,跟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是由谷歌员工开发,后由谷歌维护的一个项目,官网为: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

<!doctype html> 
<html ng-app="myApp"> 
    <head> 
        <script src="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 src="js/angularMainApp.js"></script> 
    </head> 
    <body ng-view> 
        <div> 
            <p>Hello {{name}}</p> 
        </div> 
    </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,做路由控制,针对不同的路径,在同一个文件中定义好各自的控制器。如下:

注:相关网站建设技巧阅读请移步到建站教程频道。

12 下一页 查看全文
赣州美和文化传媒有限公司网络部(赣州追逐网络工作室)版权所有 地址:赣州市章贡区红旗大道94号国际时代广场5栋1002室  电话:18970730900 QQ:81654350
本站关键字:赣州网站制作、赣州网页制作、赣州做网站、赣州网络公司、赣州网站建设、赣州网页设计、赣州网站设计
RSS/XML  流量统计: