加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS轻松起飞20步其一

发布时间:2020-12-17 10:10:07 所属栏目:安全 来源:网络整理
导读:简单介绍:AngularJS参考后端MVC模式,对HTML元素进行增强,使前端更容易构建富应用。 开发环境 选择浏览器:chrome及插件市场上Batarang AngularJS 编辑工具:WebStorm以及sublime 安装Node.js 安转测试系统:Karma 和 Jasmine npm install -g karma 获取An

简单介绍:AngularJS参考后端MVC模式,对HTML元素进行增强,使前端更容易构建富应用。

  • 开发环境
    • 选择浏览器:chrome及插件市场上Batarang AngularJS
    • 编辑工具:WebStorm以及sublime
    • 安装Node.js
    • 安转测试系统:Karma 和 Jasmine
      • npm install -g karma
    • 获取AngularJS库
      • 我选择从github上clone,地址:https://github.com/angular/angular.js
      • 也可以从https://code.angularjs.org/上选择合适版本获取
    • 获取Bootstrap
      • Bootstrap并非angularjs必须,只为清晰的内容布局进行渲染。
      • 我依然选择从github上clone,地址:https://github.com/twbs/bootstrap
  • 验证开发环境是否搭建成功
  1. 创建angularjs工程的文件夹,在其中创建index.html,内容如下:
  2. <!DOCTYPE html>
    <html ng-app>
    <head>
    	<title>First Test</title>
    	<script src="angular.js"></script>
    	<link rel="stylesheet" type="text/css" href="bootstrap.css" />
    	<link rel="stylesheet" type="text/css" href="bootstrap-theme.css" />
    </head>
    <body>
    	<div class="btn btn-default">{{"AngularJS"}}</div>
    	<div class="btn btn-success">Bootstrap</div>
    </body>
    </html>
  3. 将所需的angular.js,bootstrap.css,bootstrap-theme.css文件添加到本文件下。
  4. 在node.js根目录下创建模拟web服务器server.js,代码如下:
  5. var connect = require('connect');
    var serveStatic = require('serve-static')
    connect().use(serveStatic("../../Projects/test/angularjs")).listen(5000);
  6. 于nodejs根目录下运行 node server.js
  7. 打开浏览器http://localhost:5000/test.html 查看运行结果,如下。


简单自我介绍,一只有目标有理想不断爬行的软件设计师,
有个自己的小公众号,里面周更一些自己的小想法小demo,
有兴趣的朋友感谢关注下捧捧场。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读