知识点总结
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>
<!--
入门程序第一弹:
|-- ng-app="myApp" 程序运行入口,加载myApp模块
|-- angular.module("myApp", []);
|-- angular.controller("myCtrl", function(){});
|-- function($scope) {}
|-- $scope.hello = "值";
<html ng-app="myApp">
....
<div ng-controller="myCtrl">
....
{{hello}}
-->
<!--
ng-app是AngularJS应用程序运行的入口
当AngularJS程序要运行时,找到了ng-app开始运行
运行开始,加载主要模块:myApp模块
-->
<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">
<!-- ng-model用来将表单元素的数据和变量双向绑定 -->
<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>