首页 > Javascript > AngularJS学习笔记(一)

AngularJS学习笔记(一)

一、Angularjs简介:

是一个javascript框架,是一个MVC框架,核心特性:mvc模块化,数据的绑定,语义化标签 ,依赖注入等

m:模型定义的一些变量方法

v:视图 页面上的输出内容

c:控制  js函数

常用的标签:

1.ng-app:表示一个Angularjs的一个模块,一下代码都在这模块的管理之下。可以自定义

2.ng-model:用于定义页面的属性。

3.ng-controller:用于绑定js的方法。

Hello World!

开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”:

  1. 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html。

  2. 将下面的源代码复制到您的HTML文件。

  3. 在web浏览器中打开这个HTML文件。

demo1.html源代码

<!doctype html>
<html ng-app>
    <head>
        <script src="http://s1.phprm.com/min/f=angularjs/angular.js"></script>
    </head>
    <body>
        Hello {{'World'}}!
    </body>
</html>

请在您的浏览器中运行以上代码查看效果。

现在让我们仔细看看代码,看看到底怎么回事。 当加载该页时,标记ng-app告诉AngularJS处理整个HTML页并引导应用:

<html ng-app>

这行载入AngularJS脚本:

<script src="http://s1.phprm.com/min/f=angularjs/angular.js"></script>

注意:html标签上的ng-app属性不能省略,否则angularjs不会去解析页面。

最后,标签中的正文是应用的模板,在UI中显示我们的问候语:

Hello {{'World'}}!

注意,使用双大括号标记{{}}的内容是问候语中绑定的表达式,这个表达式是一个简单的字符串‘World’。

二、双向数据绑定:

 将ui中的某个部分映射到Javascript属性上,让他们自己去同步,这就叫双向绑定。

下面,让我们看一个更有趣的例子:使用AngularJS对我们的问候语文本绑定一个动态表达式。

Hello AngularJS World!

本示例演示AngularJS的双向数据绑定(bi-directional data binding):

  1. 编辑前面创建的helloworld.html文档。

  2. 将下面的源代码复制到您的HTML文件。

  3. 刷新浏览器窗口。

demo2.html源代码

<!doctype html>
<html ng-app>
    <head>
        <script src="http://s1.phprm.com/min/f=angularjs/angular.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
		<!-- 如果不存在yourname这个变量,则显示World -->
        Hello {{yourname || 'World'}}!
    </body>
</html>

请在您的浏览器中运行以上代码查看效果。

该示例有一下几点重要的注意事项:

  • 文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。

  • 双大括号标记将yourname模型变量添加到问候语文本。

  • 你不需要为该应用另外注册一个事件侦听器或添加事件处理程序!

现在试着在输入框中键入您的名称,您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量(一个方向),模型变量的任何更改都会立即反映到问候语文本中(另一方向)。

三、模块化:

本示例演示AngularJS的模块化(module)开发:

自定义模块

demo3.html源代码

<!DOCTYPE html>
<html ng-app="my">
	<head>
		<meta charset="utf-8" />
		<title>模块化</title>
		<script src="http://s1.phprm.com/min/f=angularjs/angular.js"></script>
		
		<script type="text/javascript">
			var my = angular.module("my", []); // 创建一个自定义模块 
			my.controller("demo3Ctrl", ["$scope", function(a) {
				a.msg = "hello";
			}])
		</script>
	</head>

	<body>
		<div ng-controller="demo3Ctrl">			
			{{msg}},angularjS
		</div>
	</body>

</html>

请在您的浏览器中运行以上代码查看效果。

Angular.module(“myapp”,[ ]),后面的“[ ]“代表的是当前的myapp模块是否与其它的模块有关联,如果无关联,在[ ]内可以不写任何代码,但是[ ]一定要存在,如果不存在,它的意义是不一样的。

注意:在angularjs中所有的一切都是从模块开始的。

四、依赖注入:

本示例演示AngularJS的三种注入方式:

在上述代码中,大家一定有一个疑问,就是我们在js代码中使用的$scope它是由谁创建的,为什么我们可以使用它?其实就全是依靠angular提供的依赖注入来完成的,依赖注入的概念我们在学习spring中已经接触过,不过在前端开发中,这是我们第一次使用依赖注入。

AngularJS使用$injetor(注入器服务)来管理依赖关系的查询和实例化。

事实上,$injetor负责实例化AngularJS中所有的组件,包括应用的模块、指令和控制器等。在运行时,任何模块启动时$injetor都会负责实例化,并将其需要的所有依赖传递进去.我们在开发中,最学用的就是在需要的地方通过参数来传递。

Angularjs中的注入一般分为三种:

  • 推断式注入

  • 显示注入(标注式注入)

  • 行内注入(内联注入)

推断式注入

如果没有明确的声明,AngularJS会假定参数名称就是依赖的名称。因此,它会在内部调用函数对象的toString()方法,分析并提取出函数参数列表,然后通过$injector将这些参数注入进对象实例。

demo4.html源代码

<!DOCTYPE html>
<html ng-app>
	<head>
		<meta charset="utf-8" />
		<title>推断式注入</title>
		<script src="http://s1.phprm.com/min/f=angularjs/angular.js"></script>
		
		<script type="text/javascript">
			function demo4Ctrl($scope) { // 推断式注入
				$scope.msg = "hello";
			}
		</script>
	</head>

	<body>
		<div ng-controller="demo4Ctrl">
			<input type="text" ng-model="msg">
			<br>
			{{msg}},angularjS
		</div>
	</body>

</html>

注意: 这个过程只适用于未经过压缩和混淆的代码,因为AngularJS需要原始未经压缩的参数列表来进行解析。有了这个根据参数名称进行推断的过程,参数顺序就没有什么重要的意义了,因为AngularJS会帮助我们把属性以正确的顺序注入进去。

显示注入(标注式注入)

demo5.html源代码

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>声明式注入</title>
<script src="http://s1.phprm.com/min/f=angularjs/angular.js"></script>

<script type="text/javascript">
var myapp = angular.module("myapp", []);
var demo5Controller = function(a) {
a.msg = "hello";
}
// 声明式注入
demo5Controller.$inject = ["$scope"];
myapp.controller("demo5Controller", demo5Controller);
</script>
</head>
<body>
<div ng-controller="demo5Controller">
{{msg}},angularjS
</div>
</body>
</html>

注意: 这个过程只适用于未经过压缩和混淆的代码,因为AngularJS需要原始未经压缩的参数列表来进行解析。有了这个根据参数名称进行推断的过程,参数顺序就没有什么重要的意义了,因为AngularJS会帮助我们把属性以正确的顺序注入进去。

行内注入(内联注入)

如果没有明确的声明,AngularJS会假定参数名称就是依赖的名称。因此,它会在内部调用函数对象的toString()方法,分析并提取出函数参数列表,然后通过$injector将这些参数注入进对象实例。

参见demo3.html源代码

注意: 这个过程只适用于未经过压缩和混淆的代码,因为AngularJS需要原始未经压缩的参数列表来进行解析。有了这个根据参数名称进行推断的过程,参数顺序就没有什么重要的意义了,因为AngularJS会帮助我们把属性以正确的顺序注入进去。




文章链接:http://blog.zhengshuiguang.com/js/angularjs-1.html

随便收藏,请保留本文地址!

标签:angularjs

相关文章

评论已关闭