[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便。我已经写了一篇随笔,介绍如何使用。这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html

代码编辑器,在Mac下用了一下WebStorm,太恶心了。另外发现书的作者使用的开发环境是Windows + VS Express
2013,为了方便学习,我也使用VS Express 2013
Update2。VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样。也许是因为我没用习惯吧。

1、安装Node.js,没啥说的,去官网下载,安装。

2、然后安装Web
Server。作者使用Node.js的Connect自己写了个网页服务器。下面是安装Connect模块。以管理员运行CMD,进入刚刚Node.js的安装路径,也就是Node的可执行文件所在路径,运行:

npm install connect

这个npm是node的包安装器,它也在Node的可执行文件所在路径下,用来下载模块必须的文件。

安装好connect模块后,在Node的可执行文件所在路径下,新建一个Server.js文件,这个就是咱们的Web Server了,代码如下:

var connect = require(‘connect‘);
connect.createServer(
connect.static("../angularjs")
).listen(5000);

该文件,创建了一个基本的web
server,他在5000端口号上相应请求,为angularjs这个文件夹里的文件服务。这个文件夹和Node.js的安装文件夹一个级别。

3、安装测试系统

AngularJS最重要的一个方面,就是提供单元测试。书中作者使用Karma test runner和Jasmine test
framework,他们两个都被广泛地使用,并易于使用。安装命令:

npm install -g karma

在25章会用到该测试系统。

4、创建项目路径

我的Node.JS安装路径为C:\angularjs\nodejs
。我的项目路径为C:\angularjs\angularjs 。如果你使用其他路径,请调整上面Server.js中的服务路径。

4.1、下载AngularJS库

没啥说的,选择没有压缩的稳定版,我将它放在项目的根目录下。C:\angularjs\angularjs\angular.js。

4.2下载AngularJS扩展

在以后的章节会用到,这里一并下载了吧。包括touch,animate,mocks,route,sanitize,locale,同样放在项目根目录下。

4.3下载Bootstrap

没啥说的,这里将bootstrap.css和bootstrap-theme.css拷贝到项目跟目录。本书不使用bootstrap的JavaScript特性。

4.4可选地,可以安装LiveReload

在Yeoman.IO中自带的有,用了下,很好用。简单来讲,就是这边代码编辑器里修改完,那边浏览器里不用刷新,就能看到更新后的效果。

4.5下载Deployd

这个在第六章才用到,现在先不装了。

5、执行一个简单的测试

在项目文件夹下新建test.html,代码如下:


<!DOCTYPE html>
<html ng-app>
<head>
<title>First Test</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
<div class="btn btn-default">{{"AngularJS"}}</div>
<div class="btn btn-success">Bootstrap</div>
</body>
</html>

6、开始Web Server

在Node.js安装路径下,执行下面的命令:

node server.js

他会创建一个HTTP请求的监听,在5000端口号上。在浏览器里输入http://localhost:5000/test.html,即可查看test页。它具有bootstrap的效果。

[Pro Angular.JS]学习笔记1.1:设置开发环境,布布扣,bubuko.com

时间: 2024-10-11 20:52:13

[Pro Angular.JS]学习笔记1.1:设置开发环境的相关文章

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

Angular JS学习笔记

之前的学习方法有点盲目,建议以后只看与工作有关的内容,并且多问那些是只和工作有关联的. 遇到问题的时候,项目不急的话,自己研究,项目急的话,马上问. 方法不对,再努力也没有用. Angular JS学习网站:http://www.zouyesheng.com/angular.html#toc7 [  项目有关的内容 ] ng-model ng-click ng-options ng-repeat ng-if ng-show ng-hide ng-controller ng-href(有印象) {

[Cousera Angular JS学习笔记]第一周

最近在给搜索引擎做前台,开始学习Angular JS,直接上coursera上的课程:https://www.coursera.org/learn/angular-js/home/week/1(没有JS基础的同学可以和我一样先过下cousera的JS课程 Interacticity with JavaScript) 要先安装bower(方便获取JS),安装bower之前要先安装node JS (1) 安装nodejs过程直接参考http://czpae86.iteye.com/blog/1636

Angular.js学习笔记 (二)

用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.createElement('a'); aLink.href = url; console.log(aLink);//<a href="https://www.baidu.com:8080/aaa/1.html?id=10#name"></a> console.log(

Angular.js学习笔记(三)

一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING{{ "TANK is GOOD" | lowercase }} // 结果:tank is good2.date 格式化{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:253.n

Angular JS 学习笔记(一)

1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net/

angularjs2 学习笔记(一) 开发环境搭建

开发环境,vs2013 update 5,win7 x64,目前最新angular2版本为beta 17 第一步:安装node.js 安装node.js(https://nodejs.org/en/),为的是能够使用npm获得angular2.0的开发包 验证是否安装成功 cmd下输入 node -v npm -v 第二步:在vs2013上安装typescript 安装完成后在项目中可以添加typescript项目了,并且在项目属性栏中会有typescript页 第三步:创建项目 可以将没用的都

angular.js学习笔记--概念总结

好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $rootScope 和 $scope: $rootScope是angular中最接近全局作用域的对象,是所有$scope对象的最上层! $scope对象就是一个普通的js对象,我们可以在其上随意修改和添加属性,并且其在angular中充当数据模型,它是所有属性都可以自动呗视图访问到,但是它并不负责数据的处理

[Cousera Angular JS学习笔记]第一周(2)

之前写了一个简单的angular的页面,这边主要要学习几个用法:controller,filter (1)第一个练习主要是把原来的ng-init的内容移到controller 首先定义module名称 <html lang="en" ng-app="confusionApp"> 然后初始化module和controller,是在script标签下面 <script> var app = angular.module('confusionApp