展开

关键词

NodeJS前端开发日记(1)搭建NodeJS+ExpressJS+AngularJS+Jade+LESS+Yeoman环境

经过这些考虑,我决定采用NodeJS+ExpressJS+AngularJS(扩展HTML标签,动态HTML)+Jade(前端模板引擎,2016年4月已改名为PUG,但是改名后的版本还有问题,所以我们还是用 我们前端的容器还是tomcat,但是html相关的管理改到了NodeJS中,我们没有用任何NodeJS服务器内容,ExpressJS只是用来测试。真正的后端接口还有web层容器还是Java。 搭建NodeJS环境 本文使用Webstorm作为基本IDE。 首先下载好NodeJS 4.4.4,(这个是长期稳定版)并安装,配置好环境变量(就是在terminal下能使用node命令还有npm),在WebStorm中新建NodeJS express项目: 我们的项目管理依赖于Bower,因为这里NodeJS主要完成前端工作,对于前端的依赖管理,bower的目录结构更好一些。 所以,我们使用WebStorm自带的命令行,快捷键alt+F12.

16210

AngularJS server 通信

一、搭建AngularJS 框架 详细过程请参考官网教程:https://angular.io/guide/quickstart image.png 在上面的截图中出现了两个错误提示: 1. ng 第二个错误是因为我启动了其他angular项目,导致端口被占用,关掉其他项目就释放了4200端口,当然也可以在程序中修改端口号 image.png 启动成功以后,浏览器会弹出相应的欢迎页面 image.png 二、server

27620
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    NodeJS前端开发日记(2)AngularJS+Jade入门实战

    AngularJS+Jade入门 2016.9AngularJS2出了,但是关于Javascript的教程还没有补全,鉴于组内的人基本对于typescript没有经验,所以继续采用AngulaJS1. 这样做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部文档编码一致(一般采用 UTF-8 编码)。 AngularJS 指令 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 Dick'") p 姓名: input(type='text',ng-model='firstName') p 你输入的为:{{firstName}} AngularJS 这里放上AngularJS1的教程

    20910

    AngularJS】 # AngularJS入门

    AngularJS 扩展了 HTML AngularJS 通过 ng-directives扩展了HTML ng-app 指令定义一个 AngularJS 应用程序。 若不声明,将直接显示表达式。 required) 为应用程序数据提供状态(invalid、dirty、touched、error) 为 HTML 元素提供 CSS 类 绑定 HTML 元素到 HTML 表单 将输入域的值($scope) AngularJS 服务(service) 在 AngularJS 中,服务是一个函数或对象,可在 AngularJS 应用中使用。 7.1. AngularJS 选择框(select) AngularJS 可以使用数组或对象创建一个下拉列表选项。 8.1. AngularJS HTML DOM AngularJS 为 HTML DOM 元素的 属性 提供了绑定应用数据的指令。

    6960

    cordovanodejs

    安装nodejs建议使用nvm来进行安装 因为nvm来切换nodejs的版本是一个非常方便有效的功能 也可以通过npm来进行安装 先简单分析一下三者之间的关联 nvm:nodeJs版本管理工具,管理 nodejs版本和npm版本 nvm管理构建nodejs和对应的npm, npm管理对应nodejs的第三方插件 nvm一般常用的命令 nvm v 查看nvm版本 nvm current 9.7.1 切换node版本至9.7.1 nvm list 查看本地已安装的node版本,同时也会显示当前使用的node版本 cordova的安装和使用命令 注意cordova的版本不能像nodejs

    18840

    前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    技术:NodeJS、Express、Monk、MongoDB、AngularJS、BootStrap、跨域 效果: ? 一、Bootstrap Bootstrap是一个UI框架,它支持响应式布局,在PC端移动端都表现不错。 Bootstrap是Twitter推出的一款简洁、直观、强悍的前端开发框架。 四、Monk访问MongoDB数据库 monk是NodeJS平台下访问MongoDB数据库的一个模块。monk访问MongoDB更加方便比NodeJS直接访问。 六、使用AngularJS调用后台服务 这里的UI使用BootStrap完成,前端使用AngularJS调用NodeJS发布的服务,将数据存放在MongoDB中。 index.js页面如下: <! 七、示例下载 前端:https://github.com/zhangguo5/AngularJS04.git 后台:https://github.com/zhangguo5/AngularJS04_BookStore.git

    49560

    基于AngularJS的过滤排序

    前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能。 本程序中可以了解到:   1 angularjs的过滤器   2 ng-repeat的使用方法   3 控制器的使用   4 数据的绑定   程序设计分析   首先,如果要是先查询过滤,就要使用到 AngularJS中的 过滤器filter 了。    是一门基于DOM的框架语言,因此不需要实现任何的监听器以及事件触发器,当query所在的输入框发生任何改变时,就会触发输入框下面的表达式展现的双向刷新!    相比于其他的一些框架,是基于字符串通过DOM节点innerHTML添加到DOM中,AngularJS的实现方式加快了模型视图的展现。

    39360

    前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    技术:NodeJS、Express、Monk、MongoDB、AngularJS、BootStrap、跨域 效果: [图片] 一、Bootstrap Bootstrap是一个UI框架,它支持响应式布局, 在PC端移动端都表现不错。 四、Monk访问MongoDB数据库 monk是NodeJS平台下访问MongoDB数据库的一个模块。monk访问MongoDB更加方便比NodeJS直接访问。 六、使用AngularJS调用后台服务 这里的UI使用BootStrap完成,前端使用AngularJS调用NodeJS发布的服务,将数据存放在MongoDB中。 index.js页面如下: <! 七、示例下载 前端:https://github.com/zhangguo5/AngularJS04.git 后台:https://github.com/zhangguo5/AngularJS04_BookStore.git

    62670

    AngularJS】—— 1 初识AngularJs

    怀着激动忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习。 这次正好学习AngularJS,直接复习一下前端的知识。目前这里还是弱点,慢慢深入的学习。   AngularJS是Google的优秀的前端框架,目前已经应用于多个产品。    AngularJs相对于其他的框架来说,有一下的特性:   1 MVVM   2 模块化   3 自动化双向数据绑定   4 语义化标签   5 依赖注入   由于很多概念都不了解,这些特性也无法理解。 通过简单的学习,大致了解了AngularJS的语法以及使用,包括如下的内容: 1 表达式   支持普通的JS表达式,表达式通过{{}}使用。 p>姓名:<input type="text" ng-model="firstName">

    你输入的为: {{ firstName }}

      ng-app 定义AngularJS

    27090

    nodejs npm 配置

    21830

    SWIGnodejs入门

    Javascript已经超越了基于浏览器的脚本语言,并且node.js一起,它也被用作后端开发语言。 由于v8是用C ++编写的,并且作为C ++库,因此使用构建v8相同的编译器标志来编译模块至关重要。为了简化操作,node.js提供了一个名为node-gyp的构建工具。 你必须使用npm安装它: sudo npm install -g node-gyp node-gyp需要一个名为binding.gyp的配置文件,该文件基本上是JSON格式,并且符合Google的构建工具 ": [ "example.cxx", "example_wrap.cxx" ] } ] } 然后node-gyp用于构建扩展: $ node-gyp configure build 从'nodejs nodejs扩展的build方式simple示例相同。 在Javascript中,它可以使用如下: var example = require(".

    78820

    基于AngularJS的过滤排序【转载】

    程序设计分析   首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了。    value="name">name</option> <option value="age">age</option> </select>   AngularJS 是一门基于DOM的框架语言,因此不需要实现任何的监听器以及事件触发器,当query所在的输入框发生任何改变时,就会触发输入框下面的表达式展现的双向刷新!    相比于其他的一些框架,是基于字符串通过DOM节点innerHTML添加到DOM中,AngularJS的实现方式加快了模型视图的展现。

    25210

    AngularJS】—— 2 初识AngularJs(续)

    前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容。    本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括:   1 事件   2 模块   3 表单   4 数据验证   5 bootstrap CSS风格   6 include包含其他页面 $scope.myVar; }; } </script>   关于AngularJS的模块   模块定义了用户的应用,所有的控制器属于一个模块。之前使用的ng-app就是模块的定义。    src="myCtrl.js"></script> </body>   对于控制器,也可以通过模块来定义声明: <head> <script src="//www.w3cschool.cc/try/<em>angularjs</em> 关于<em>AngularJS</em>表单   表单是web中重要的组成部分,如下面样例所示,可以很方便的获取到form中的数据 <div ng-app="" ng-controller="formController

    34180

    AngularJS

    1.scope rootScope scope:单个controller的作用域。 rootScope同名可以使用$root

    {{name}}
    2.sessionStorage

    28130

    nodejs的__dirname__filename

    __filename变量获取当前模块文件的带有完整绝对路径的文件名;【包含文件名本身的绝对路径】 __dirname变量获得当前文件所在目录的完整目录名。【不包...

    40570

    AngularJS XMLHttpRequest

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。 ) {         // 请求成功执行代码     }, function errorCallback(response) {         // 请求失败执行代码 }); 简写方法 POST $http AngularJS $http 是一个用于读取web服务器上数据的服务。 通用方法实例 AngularJS1.5 以上版本 - 实例 var app = angular.module('myApp', []); app.controller('siteCtrl', AngularJS 应用通过 ng-app 定义。应用在

    AngularJs(3)

    <script type="text/javascript" src="angular.min.js"></script>

    20820

    AngularJS 模块

    现在你可以在 AngularJS 应用中添加控制器,指令,过滤器等。 完整的指令内容可以参阅 AngularJS 参考手册。 AngularJS 模块让所有函数的作用域在该模块下,避免了该问题。 ---- 什么时候载入库? 在我们的实例中,所有 AngularJS 库都在 HTML 文档的头部载入。 在我们的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的 <head> 区域被加载。 另一个解决方案是在 <body> 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面: AngularJS 实例 <!

    9520

    相关产品

    • 新能源监控与转发平台

      新能源监控与转发平台

      新能源监控与转发平台(EVMP)为您提供稳定、安全的新能源车辆实时监控系统,帮助您满足车企监控及国家监管法规要求。产品可用于新能源整车厂搭建自有车辆监控平台,并与新能源国标/地标平台对接场景中。也可用于为车企提供车辆数据统计、故障监控及解析、电池健康状态评估、车辆预测性维护等场景

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券