Angular入门知识点总结

最新推荐文章于 2022-10-25 17:43:09 发布

阿脆脆脆脆脆

最新推荐文章于 2022-10-25 17:43:09 发布

阅读量783

点赞数

本文链接：https://blog.csdn.net/CUILINA1994/article/details/70832305

版权

知识点总结

1.Angular入门

(1) ng-app是AngularJS应用程序运行的入口( ng-app="myApp")

(2)当AngularJS程序要运行时，找到了ng-app开始运行
(3)运行开始，加载主要模块：myApp模块(var app = angular.module("myApp", []);)

(4)将一个标签和控制器进行绑定，控制器中的数据，就可以使用在这个标签的内部了

标注：ng-model用来将表单元素的数据和变量双向绑定

双大括号中，可以直接写变量名称，和变量的数据绑定，变量的数据发生改变，页面的数据会同时改变

<!DOCTYPE html>


<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Hello World!</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>

<div ng-controller="myCtrl">

<input type="text" ng-model="hello"><br />
<input type="text" ng-model="hello"><br />
<input type="text" ng-model="hello"><br />
<input type="text" ng-model="hello"><br />
<input type="text" ng-model="greeting"><br />
<input type="text" ng-model="greeting"><br />
<input type="text" ng-model="greeting"><br />

{{hello}}<br />
{{greeting}}
</div>
<script>
/*定义一个Angular模块*/
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope){
$scope.hello = "hello angularjs！今天开始，要进行JS高级开发部分"
$scope.greeting = "hello angularjs！今天开始，要进行JS高级开发部分"
});
</script>
</body>
</html>