首页 > 策划 > 关键词 > AngularJS框架最新资讯 > 正文

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

2015-05-12 16:13 · 稿源:博客园

最近,接到了新的任务,跟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,做路由控制,针对不同的路径,在同一个文件中定义好各自的控制器。如下:

  • 相关推荐
  • 大家在看
  • 金溢科技与百度签署Apollo智能交通生态合作框架协议

    9月23日消息,金溢科技发布公告,公司与百度于2020年9月22日在双方各自公司所在地,以云签约的方式签署了《百度Apollo智能交通生态合作框架协议》,协议有效期一年。根据协议,双方以“通过资源互补、技术互补等有效合作方式,充分发挥高科技互联网企业与交通行业资深企业各自的优势,结合形成有效地技术联盟。在智能交通、 自动驾驶、智能网联的大背景下,共同探讨和实践对应的商业模式,加速技术向 产品的有效过渡,

  • 搜狗开源srpc:自研高性能通用RPC框架

    今年 7 月底,搜狗公司开源了内部的工业级C++服务器引擎Workflow,一路收获业内许多认可和关注。 9 月 15 日,作为Workflow最重要的生态项目——srpc,一个基于其打造的轻量级RPC框架,也在GitHub上开源了。 GitHub搜索“sogou srpc”即可找到该项目。 一个性能更好的thrift/brpc srpc与thrift/brpc是协议与IDL均互通的。srpc除了自带的sogou-std协议以外,还实现了baidu-std协议和thrift framed协议,因此srpc可以与thrift或brpc

  • 搜狗发布组件化代码解耦框架 极大降低组件化重构成本

    9 月 28 日,搜狗正式发布SogouModuleBus组件化解耦框架,为业界贡献新的组件化解决方案。同时,这款基于搜狗立体化架构思维诞生的组件化框架,将会进一步降低开发者的组件化重构成本。代码耦合,是指软件工程中不同模块和类之间的依赖关系。耦合度高,则代码之间的依赖度高,往往容易出现牵一发而动全身的被动局面。因此开发者们需要对高耦合度代码进行解耦,让业务模块之间的关联依赖降到最低。此次搜狗SogouModuleBus组件化框架

  • 梦网集团:梦网科技与中兴通讯签署战略合作框架协议

    10月16日消息,梦网荣信科技集团股份有限公司(以下简称“公司”或“梦网集团”)对外发布公告称,下属子公司深圳市梦网科技发展有限公司(以下简称“梦网科技”)近日与中兴通讯股份有限公司(以下简称“中兴通讯”)签署了《战略合作框架协议》(以下简 称“合作协议”),双方本着“共同发展,合作共赢”的原则,同意充分发挥各自领域的人才、技术及市场等资源优势,进行广泛战略合作,建立战略合作伙伴 关系。双方

  • 神州租车:全资附属公司与宝沃中国及宝沃厦门订立采购框架协议

    9月25日消息,神州租车发布公告称,于2020年9月24日,公司的间接全资附属公司神州租车北京与宝沃中国及宝沃厦门订立采购框架协议,内容有关其向宝沃中国及宝沃厦门采购汽车零件。公告显示,宝沃中国及宝沃厦门均为北京宝沃的全资附属公司,而北京宝沃则为本公司主要股东神州优车的非全资附属公司。于本公告日期,神州优车通过其附属公司于442,656,855股本公司股份中拥有权益,占本公司已发行股份总数约20.86%。因此,?

  • 众信旅游:阿里网络受让公司总股本5% 与阿里旅行签署战略合作框架协议

    9月30日消息,众信旅游日前对外发布公告称,公司控股股东、实际控制人冯滨向阿里网络转让其持有的众信旅游4547万股无限售条件流通股,约占股份转让协议签署日众信旅游总股本的5%。本次权益变动后,阿里网络将持有上市公司45,470,295股股份,占上市公司股份总数的5%,成为公司关联方。同时,公告称,公司拟与阿里旅行共同出资设立有限责任公司(以下简称“合资公司”),该合资公司注册资本人民币1.5亿元,公司与阿里旅

  • Soul app :灵魂难求,“暗战”不休

    不久前Soul的崩溃事件登上了微博热搜,但围绕这一事件的讨论很快就不再局限于崩溃事件本身,闻声赶来的新老用户纷纷在微博上分享自己的使用体验,其中不少人表示“Soul变了”。虽然在国内陌生人社交APP中独树一帜,但Soul与其他家别无二致的是,从投身这条赛道起,“灵魂”与“荷尔蒙”的较量便不曾停止,甚至愈演愈烈。 在“荷尔蒙”的怂恿、刺激下,陌生人社交领域“牌桌之下的较量”也逐渐公开在大众视野中。 2019 年,Soul当?

  • 三星GalaxyS21系列首次配备S Pen:但仅限Ultra版本

    随着下半年Note系列旗舰的发布,三星手机部门的主要精力也就将放在明年初即将推出的全新的Galaxy S21系列上,虽然距离该机的发布还有大半年的时间,但目前已有不少爆料传出。现在有最新消息,近日就有外媒透露称全新的Galaxy S21Ultra将首次配备S Pen手写笔。根据外媒最新透露的消息,全新的三星Galaxy S21系列将拥有S21、S21+和S21 Ultra三款机型,其中定位最高的S21 Ultra还将引入Note系列的标志性配件——S Pen手写?

  • 企业级图数据库 Nebula Graph 推出云上服务——Nebula Graph Cloud Service

    近日,图数据库研发商杭州欧若数网科技有限公司(下文简称:欧若数网)在发布图数据库 Nebula Graph V1.0 之后,又推出了旗下重量级的产品——Nebula Graph Cloud Service。作为一款 DBaaS(DataBase as s Service)的产品,Nebula Graph Cloud Service 极大地降低了研发人员使用 Nebula Graph 的成本,更专注于使用 Nebula Graph 挖掘、分析数据背后的关联价值。Nebula Graph Cloud Service 支持国内各大云服务厂商,除了具备开箱

  • Soul App与你同行,寻找属于自己的快乐源泉

    作为一个属于年轻人的社交软件,soul正在敏锐地捕捉 95 后的心理需求——需要被认同,又渴望保持特立独行。既想沉醉于自我的精神世界,又渴望与外部世界产生联结。根据这些年轻人的特性,SoulApp一直不断地进行产品完善与改进,一直到现在,已成为年轻人首选的社交平台。在社区运营上,在Soul的广场,每天都有无数的souler在分享谈论着自己的生活,寻找着有趣的灵魂;官方每天都会置顶一些好玩的话题,让大家展示着自己的幽默风趣;?

  • 不止骁龙875 三星Galaxy S21 Ultra还搭载一亿五摄

    三星预计会在2021年Q1发布年度旗舰Galaxy S21系列,该系列包含Galaxy S21、Galaxy S21+和Galaxy S21 Ultra,其中Galaxy S21 Ultra为最强版本。今天爆料人@Anthony透露,三星Galaxy S21 Ultra搭

  • 孔子学院网课搭建中文学习新平台 让“中文热”不降温

    受新冠肺炎疫情影响,土耳其所有学校相继停课。为确保学生们停课不停学,土耳其高等教育委员会近日宣布,具备条件的大学可以开始进行网络远程授课。于是,土耳其中东技术大学孔子学院通过网课搭建起学习中文的新平台,让中文热在疫情之下不降温。土耳其中东技术大学孔子学院网络远程教学在土耳其高等教育委员会宣布可以开始进行远程教育的当天,中东技术大学孔子学院的中外方院长和全体中文教师召开线上会议,讨论如何开展网络中文

  • 三星GalaxyS21 Ultra将采用1亿像素镜头:终于上了65W快充

    随着下半年Note20系列旗舰的发布,三星手机部门的主要精力已经放在了明年初即将推出的全新Galaxy S21系列上,虽然距离该机的亮相还有近半年的时间,但目前关于该机外观和配置的爆料已十分密集。现在有最新消息,近日有国外知名爆料人表示,明年初发布的三星Galaxy S21 Ultra将采用1亿像素的五摄组合。据国外知名爆料达人@Anthony 最新发布的消息显示,全新的Galaxy S21 Ultra将采用一块2K+ OLED显示屏,支持120Hz/144Hz

  • 三星Galaxy Note 20 Ultra DxOMark成绩公布:121分屈居第十名

    三星Galaxy旗舰一直都是安卓手机拍照的标杆之一,不过这几年国内手机进步太大,三星在DXOMark评分上已经渐渐无法跟上华为、小米等国产品牌的位次。

  • Napattiga娜帕蒂卡高端乳胶品牌在曼谷central world big c开幕

    10 月 10 日,泰国曼谷的Napattiga(娜帕蒂卡)又有一家旗舰店正式开业。与以往不同的是,这次Napattiga(娜帕蒂卡)对新店进行了改良和升级,除了产品展示基础上,还增加了产品体验区,娱乐区和休息区,乳胶产品普及区,为用户提供多元化了解真正泰国乳胶魅力的机会,给消费者带去高质量的体验赋予消费者更多的归属感。一、Napattiga(娜帕蒂卡)泰国曼谷central world big c旗舰店开幕2020 年在整体经济市场遭受重创,乳胶行业整体增速

  • 首款骁龙875超大杯!三星Galaxy S21 Ultra曝光:无缘屏下摄像头

    三星即将推出2021年度旗舰Galaxy S21系列,包括中杯Galaxy S21、大杯Galaxy S21+和超大杯Galaxy S21 Ultra等。今天,知名爆料人士Onleaks曝光了三星Galaxy S21 Ultra渲染图。和Galaxy S20 U

  • 荷小鱼APP测评中心上线,帮助家长进一步掌握孩子的学习效果

    国庆期间,荷小鱼AI互动课 APP再次重磅升级啦,1.2. 7 版本已正式上线,各大新功能也正式上线了。一、荷小鱼APP测评中心上线大语文、数学思维两大学科测评同步上线,荷小鱼的每一位学员小朋友都可以在APP中体验。每次测评完成后APP会自动生成测评报告,记录每一个荷小鱼学员的每一步成长,同时帮助家长进一步掌握孩子的学习效果。01 登录荷小鱼APP,在“我的”页面中可以选择“测评中心”模块02 进入”测评中心”界面,可以查看各?

  • Graphcore宣布其IPU支持阿里云深度学习开放接口标准ODLA

    9月25日消息, 2020云栖大会上,阿里云宣布对行业开源业界首个深度学习开放接口标准ODLA(Open Deep Learning API)。阿里云在今年5月份的OCP全球峰会上首次对外公布ODLA接口标准,并宣布已率先在Graphcore等生态伙伴上获得支持。IPU是Graphcore为机器智能从零设计的AI处理器,通过ODLA接口,开发者可以在IPU上快速跑通AI Matrix的各类模型。ODLA是一个为加速深度学习的统一异构硬件编程接口。ODLA规范了深度学习计算?

  • Soul——让每个有趣的灵魂不再孤独

    不管是在现实中还是在电影中,每个人都对大海怀有着敬畏,正是因为船员所处的工作环境是很多人都无法承受的。首先,船上资源有限,并且经常会发生一些紧急情况,这可能会导致大家工作超过预定工作时间;然后,船上的欢喜会断断续续的,并且有时会没有任何信号源,没有最新的电视剧和综艺,也没有人能够面对面的聊天,谈心等等。这些原因也让远航在大洋彼岸的船员们承受着平常人难以想象的孤独。然而,Soul的出现成为很多人用来分享?

  • 语数英学习有苦难?读书郎网校帮助孩子破解学习困局

    国庆小长假后,十月伴随着飒爽的秋风已悄然过半。新学期开学一月有余,孩子的语数英学习一直是家长最为关注的“心腹大科”。三科不仅仅是小学、初中、高考的主要科目,更是其他学科学习的基础。但是经过这段时间的磨合,有多少孩子始终未能适应新的学习内容,跟不上老师的上课进度?不少家长将目光投向辅导班,希望通过专业的辅导老师帮助孩子高效学习。然而现在市场上的在线辅导班鱼龙混杂,到底什么样的在线辅导班适合孩子,家长?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签