您的位置：首页 > Web前端 > AngularJS

AngularJS轻松起飞20步其一

2016-05-13 01:44 585 查看

简单介绍：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

验证开发环境是否搭建成功

创建angularjs工程的文件夹，在其中创建index.html，内容如下：

<!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>

将所需的angular.js, bootstrap.css, bootstrap-theme.css文件添加到本文件下。
在node.js根目录下创建模拟web服务器server.js，代码如下：

var connect = require('connect');
var serveStatic = require('serve-static')
connect().use(serveStatic("../../Projects/test/angularjs")).listen(5000);

于nodejs根目录下运行 node server.js
打开浏览器 http://localhost:5000/test.html 查看运行结果，如下。

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript angularjs node.js chrome 前端

相关文章推荐

新的分享

章节导航