Angular.js学习之一下载和搭建hello world实例

发布时间：2020-12-17 10:03:28 所属栏目：安全来源：网络整理

导读：第一天学习angular框架，首先在下载angular.js脚本就遇到了困难，我在angular官网找到GitHub上的源码，下载下来后却发现找不到该脚本文件。又各种查找下载途径，最后在http://www.yiibai.com/angularjs/angularjs_environment.html这里找到下载方法。点击好

第一天学习angular框架，首先在下载angular.js脚本就遇到了困难，我在angular官网找到GitHub上的源码，下载下来后却发现找不到该脚本文件。又各种查找下载途径，最后在http://www.yiibai.com/angularjs/angularjs_environment.html这里找到下载方法。点击好多次都没反应，最后才发现要点击图标上面的那串文本~。囧

不过我测试直接使用官网的cdn地址：

<!DOCTYPE html>
<html ng-app="myapp">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/angular.min.js"></script>
		<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
	</head>
	<body>
		hello {{'world'}}
		<div class="" ng-controller="Testcontroller">
			<h2>Welcome to {{helloTo.title}} the world of Yiibai!</h2>
		</div>
		<script type="text/javascript">
			angular.module("myapp",[])
			.controller("Testcontroller",function($scope){
				$scope.helloTo={};
				$scope.helloTo.title="AngularJS";
			})
		</script>
	</body>
</html>

首先，通过html标签添加ng-app="name"[name是自定义的名称]，来告知浏览器我们创建了一个angular项目，需要使用angularJS来处理HTML文档。通过 ng-directives 扩展 HTML。

从HTML文档里面的语法在结合自己做后端开发的理解，都是差不多的。就像asp一样，通过遇到这个标记<%'asp代码%>浏览器解析过程自动分辨asp代码来执行。net mvc也是如此。通过@{}来分辨的。因此，我在学习angular就会把他想象成后端语言那样处理。在页面上定义变量，在controller控制器专门书写方法输出数据。

{{}}告诉浏览器该用angular的标准执行代码了，‘文本’使用单引号来输出文本。只要搭建好hello world，接下来在去学习语法就快多了。

通过测试发现，我吧Testcontroller写成testcontroller后，程序并不能正确输出值。angularJS严格区分大小写！

经过反复测试发现，如果给ng-app="name"就必须初始化模块【angular.module("myapp",[])】,否则无效

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!