Angularjs_学习笔记

最新推荐文章于 2022-12-09 16:14:24 发布

名字好长12

最新推荐文章于 2022-12-09 16:14:24 发布

阅读量231

点赞数 1

本文链接：https://blog.csdn.net/JAY_WONG_/article/details/78962182

版权

是javascript编写的库，并且以javascript文件的形式发布，

通过script便签添加到网页中去，<scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

建议是将脚本放在body标签的底部，会提高网页的加载速度（html的加载不受脚本文件的限制）

各个版本的AnjularJS的下载 https://github.com/angular/angular.js/releases

通过ng-directives扩展了HTML.

ng-app 指令定义一个ng-directives应用程序，<div ng-app=""></div>//告诉<div>是AngularJS应用程序的“所有者”
注意一个文件默认的是加载一个ng-app但是可以加载多个，必须手动加载。
ng-model 指令把元素值（输入域的值）绑定到应用程序。<input type="text" ng-model="name">//将输入域的值绑定到应用程序变量name。
ng-bind 指令将应用程序的数据绑定到html视图。//将应用程序变量绑定到某个段落的innerHTML.
ng-init 指令初始化AngularJs应用程序变量.

angularJS使得单一页面程序变得简单，

将应用程序的数据绑定到html元素。
克隆和重复html元素。
隐藏和显示html元素。
在html元素背后添加代码
支持输入验证。

AngualrJS应用：

AngularJS模块（Module）定义了AngularJS应用。

AngularJS控制器（Controller）用于控制AngularJS应用。

ng-app指令定义了应用，ng-Controller定义了控制器。

scope 和$scope之间的区别：

·····Scope是视图(HTML)和控制器（javascript）之间的纽带。用scope进行两者之间的数据的交换。

···$scope是angular内部提供的变量。

· 但是上面的scope或者$scope对象是angular内部提供的对象，我们一般通过依赖注入的方式获取这个对象，如果你通过显示依赖的方式：

	app.controller("MainCtrl",["$scope",function(scopeObject){

}]);

注入的变量名必须是$scope，函数里面的形参就无所谓了。如果是隐式注入，

app.controller("MainCtrl",function($scope){

});

函数形参必须是$scope

附加文件

手动加载多个ng-app：

<div id="A1" ng-app="app1">
	名字：<input type="text" ng-model="name">
	<h1>名字{{name}}</h1>
</div>

<div id="A2" ng-app="app2">
	年龄<input type="number" ng-model="age">
	<h1>年龄{{age}}</h1>
</div>
<script type="text/javascript">
	var app1=angular.module("app1",[]);
	var app2 = angular.module("app2",[]);
	angular.bootstrap(document.getElementById("A2"),['app2']);
</script>

<!--也可以如下写成这样-->

<div id="A13" ng-app="app1">
	名字：<input type="text" ng-model="name">
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	
	<span>名字{{name}}</span>
</div>


<div id="A1" ng-app="app2">
	年龄：<input type="number" ng-model="age">
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	
	<span>年龄{{age}}</span>
</div>
<script type="text/javascript">
	angular.bootstrap(document.getElementById("A13"));
	angular.bootstrap(document.getElementById("A1"));
</script>