JavaScript框架之AngularJS学习——准备

最新推荐文章于 2024-05-23 23:33:04 发布

陈小名

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量380

点赞数

分类专栏： AngularJS学习笔记文章标签：前端 angularjs 框架开发工具 javascript

本文链接：https://blog.csdn.net/chen_XiaoMing123/article/details/78059936

版权

AngularJS学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

AngularJS——准备

AngularJS

AngularJS是Google工程师开发的一款开源JavaScript框架

官网：https://angularjs.org/

学习时候常用查阅文档：https://docs.angularjs.org/api

AngularJS以HTML作为模板语言并扩展HTML元素及属性，使得应用组件开发保持高度清晰、一致。

学习准备

1.选择开发工具

编译工具：我使用的是Sublime Text，当然你可以选你习惯或喜欢的。

代码调试工具：在Chrome浏览器中安装了Batarang

下载安装AngualarJS:在官网直接下载就行了，然后可以通过以下方式引入：

eg: 下载到项目文件之后自己引用

<script src="../lib/angular-1.6.5/angular.min.js"></script>

eg: 通过CDN

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js.map"></script>         //百度CDN

尝试做一个AngularJS应用

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>test angularjs</title>
	<script src="../lib/angular-1.6.5/angular.min.js"></script>
</head>
<body>
	<div ng-controller="myCtrl">
		<input type="text" ng-model="message">
		<p ng-bind="message"></p>
	</div>
	<script>
		angular.module("myApp",[])
			.controller("myCtrl",["$scope",function($scope){
				$scope.message = "chenxiaoming"
			}])
	</script>
</body>
</html>

页面效果：

输入框中的内容改变，下面的p标签中的内容也会跟着改变。

注意：

1.<html ng-app="myApp">

2.{{ message }}

3.ng-app、ng-controller、ng-model、ng-bind

4.angular.module()

5..controller()

6.$scope

AngularJS应用构成元素

Model(模型)
View(视图)
Controller()
Scope(作用域)
Directives(指令)
Expression(表达式)
Template(模板)

以上笔记整理自个人学习，用做个人学习分享

陈小名

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript框架之AngularJS学习——准备

AngularJS——准备AngularJSAngularJS是Google工程师开发的一款开源JavaScript框架官网：https://angularjs.org/学习时候常用查阅文档：https://docs.angularjs.org/apiAngularJS以HTML作为模板语言并扩展HTML元素及属性，使得应用组件开发保持高度清晰、一致。学习准
复制链接

扫一扫