AngularJS高级程序设计学习笔记（一）

最新推荐文章于 2024-09-20 11:38:47 发布

weixin_30900589

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangyunzhe/p/6207184.html

版权

第一章：搭建开发环境

1：选择Chrome浏览器，给Chrome装调试angular的插件Batarang，

　　安装步骤：

　　（1）.从http://pan.baidu.com/s/1jGILtzg下载插件，如果连接失效了，百度Batarang下载即可，网上提供很多下载的地方；

（2）下载后是一个后缀名为“.crx”的chorme拓展文件。建议复制到你的chrome浏览器安装目录下，位置随意放，确保文件不会被删除就好了；

（3）接下来是安装这个Batarang插件了，打开chrome后，在地址栏输入chrome://extensions/，回车即可进入google chrome扩展程序管理页面（进入扩展程序的另一个方法是控制——设置——扩展程序）；

（4）在扩展程序界面下，将刚才下载的Batarang的.crx文件拖放进来；

（5）接下来浏览器会提示是否确定添加或安装AngularJS Batarang应用，点击添加即可，最后确保启用被勾选，现在Batarang就安装完成了。chrome 就可以调式angularJS应用了；

（6）检测是否安装成功：打开chrome开发者工具，你可以看到后边多了一个AngularJS的面板了。

2：安装Node.js

　　（1）访问http://node.js.org下载和安装适合你的平台的Node.js安装包。确保已经安装了包管理器(npm),并且安装目录已经添加到了你的路径中；

（2）测试Node.js是否安装成功:打开命令行工具并输入node。等待提示信息变化后，然后输入以下信息(在同一行中):

　　　　　function testNode(){return "Node is working"};testNode();

　　　　如果安装成功你将看到如下输出：'Node is working'

3:安装Web服务器

（1）在Node.js安装目录下安装Connect

　　　　　npm install connect

（2）在Node.js安装目录下创建一个名为server.js的新文件

　　　　　server.js文件内容

　 var connect = require('connect');

connect.createServer(connect.static("../angularjs")).listen(5000);

4.获取AngularJS库

（1）从官网(httop://angularjs.org)下载AngularJS的最新稳定版，根据你在server.js写的路径，建立一个angularjs文件夹，并把angular.js放到此文件夹下

（2）获取Bootstrap文件，不要重组文件结构，把文件直接拷贝到angularjs文件夹下

5：执行一个简单的测试

（1）<!DOCTYPE html>
　　　　　<html ng-app>
　　　　　　<head>
　　　　　　　　<title>First Test</title>
　　　　　　　　<script type="text/javascript" src="framework/angular-1.3.0.14/angular.js"></script>
　　　　　　　　<link rel="stylesheet" type="text/css" href="framework/bootstrap-3.3.0/dist/css/bootstrap.min.css">
　　　　　　　　<link rel="stylesheet" type="text/css" href="framework/bootstrap-3.3.0/dist/css/bootstrap-theme.min.css">
　　　　　　</head>
　　　　　　<body>
　　　　　　　　<div class="btn btn-default">{{"AngularJS"}}</div>
　　　　　　　　<div class="btn btn-success">Bootstrap</div>
　　　　　　</body>
　　　　</html>