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

AngularJS学习（一）——基本的入门程序（配置环境）

2016-03-15 23:30 681 查看

AngularJS学习（一）——基本的入门程序（配置环境）

AngularJS强化的JavaScript的功能，主要用在手机或者移动端开发的一套框架，需要注意的是AngularJS是一个框架。说到这里就要说一下，JQuery是一个库。下面介绍一个简单的例子程序。

1、下载AngularJS最新版的文件。http://docs.angularjs.cn/api。下载方法：

下载完成后，会有个压缩包，在压缩包中找到angular.min.js文件。
2、新建一个eclilpse的web project。按照截图进行建立目录和文件。
其中的angular.min.js是下载之后的文件，test.js是新建的js文件。
。

3、下面是index.jsp中的内容

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=basePath%>js/angular.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/test.js"></script>
</head>

<body>
<center>
<div ng-app="myApp" ng-controller="myController">
<h1>{{name}}</h1>
</div>
</center>
<script type="text/javascript">
testAngular();
</script>
</body>
</html>

4、test.js中的内容

function testAngular(){
var app = angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.name="this is a test";
});
}

5、运行结果

6、这样就能够使用AngularJS了。这个框架有一个非常好的学习地址，我学习的时候也是参考的这个网站，网站的地址是：http://www.runoob.com/angularjs/angularjs-tutorial.html。有空的时候能够在这里学习到很多有用的知识，非常推荐大家去看看！！！

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

标签：

相关文章推荐

新的分享

章节导航