1.1Pro. AngularJS 准备工作

最新推荐文章于 2025-05-19 19:47:34 发布

翻译最新推荐文章于 2025-05-19 19:47:34 发布 · 596 阅读

文章标签：

#web开发 #angularjs

AngularJS 专栏收录该内容

0 篇文章

订阅专栏

本书指导读者从基础知识开始，逐步掌握AngularJS的开发环境搭建、应用创建、功能实现等核心技能，涵盖模型-视图-控制设计模式、可扩展性、可维护性、可测试性以及规范化等方面。通过实例解析，读者能够深入了解AngularJS如何提升应用功能、简化开发流程，同时具备测试和维护应用的能力。

Pro. AngularJS 准备工作

AngularJS 借鉴和使用服务端开发的优秀的模式提供HTML在web浏览器的编程，创建了一个使构建富客户端应用程序更简单和容易的基础。AngularJS 应用围绕着一个设计模式被称为模型-视图-控制（MVC），这里有一些重点在创建应用时：

可扩展：容易解决理解复杂的AngularJS应用的工作原理和要素，意思是你可以很容易的创建一个新的对你的用户有价值的功能来提升你的应用；

可维护：AngularJS应用容易进行调试和修复，长期的维护是简单的；

可测试：AngularJS 对单元测试和端对端测试有很好的支持，你可以在你的用户使用之前发现并修复缺陷；

规范化：AngularJS 依据跨浏览器的能力，允许你创建一个标准的web应用，可以是最新的功能（例如：

HTML5APIS）和流行的工具和框架；

AngularJS 是一个由谷歌发起和维护的开源的JavaScript 库。被应用到一些规模大河比较复杂的web应用。这里将展示你所想知道的在你项目中使用AngularJS所得到的回报。

你需要知道的？

你应该熟悉web开发的基础，有对HTML和CSS如何工作和观念，有javascript的工作知识。

这本书的结构？

第一部分：准备工作

这部分提供准备工作的一些信息。展示如何构建你的第一个AngularJS 应用和带你经历构建一个真实的应用：体育商店。

第二部分：使用Angular工作

这部分带你了解AngularJS的功能点，从概述AngularJS不同类型的组件开始，然后到每个类型工作完成。AngularJS包括一些内置的功能，我们深入描述并提供不断定制选项并加以说明。

第三部分：AngularJS 模型和服务

这部分解释两个重要的组件角色：模型和服务。将展示创建这两个组件的不同方式和广泛的解释AngularJS内置的服务。这包含SPA开发的：Ajax and RESTful API,and unit testing。

如何建立你的开发环境

你可以使用一个浏览器，一个文本编辑器和web服务器开始AngularJS的开发。一个流行的客户端开发工具Yeoman(http://yeoman.io)，这个工具提供了一个集成开发流程。这里没有使用这个工具因为在Windows环境下有些需要解决的问题。

选择浏览器

AngularJS工作在一些现代web浏览器，你可以测试你的应用在你的用户喜欢的浏览器中。你需要定位一个开发环境的浏览器，建立你的开发环境来展示应用和演示基础的测试。推荐使用谷歌的chrome浏览器，支持w3c标准和具有F12-developer tools。

选择代码编辑器

你可以使用任意一种文本编辑器来开发AngularJS。两个流行的选项是WebStorm(www.jetbrains.com/webstorm)和Sublime Text(www.sublimetext.com)。这两个编辑器是收费的。

安装node.js

官方网站：http://nodejs.org。

安装一个web服务

1. 在node.js的安装目录创建一个文件夹，例如：public；

2. 然后在命令行进入public目录，执行命令：npm install express .安装express模块(https://github.com/strongloop/express)。

3.创建server.js文件，内容：

<span style="font-size:18px;">var express = require('express'),  
    app = express();  
   
app.use(express.static(__dirname));  
  
app.listen(8080);

console.log('static :'+__dirname+', server at : 8080');</span>

4.创建一个test.html，内容为：hell web server。

5.启动服务，使用命令：node server.js，在浏览器访问地址：http://localhost:8080/test.html。

获取AngularJS库

官方地址：http://angularjs.org，进行文件的下载。

展示一个简单的测试

将test.html内容更新为：

<span style="font-size:18px;"><!doctype html>
<html ng-app>

<head>
	<title>First Test</title>
	<script type="text/javascript" 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">Bottstrap</div>

</body>
</html></span>

启动web服务器：node server.js