AngularJS 学习笔记
1. 什么是AngularJS?
AngularJS 是由 Google 主导开发的一款 JavaScript 框架，用于前端开发。它采用了 MVVM（Model-View-ViewModel）架构，可以帮助开发者更好地管理和组织前端代码。
2. 常用指令
2.1 ng-app
ng-app 指令定义了 AngularJS 应用程序的根元素。它告诉 AngularJS 在哪里启动应用程序，并在其内部寻找相关的指令和控制器。
htmlCopy Code<div ng-app="myApp">
<!--应用程序区域-->
</div>
2.2 ng-controller
ng-controller 指令定义了一个控制器，用于管理 HTML 元素。控制器负责与视图交互，处理用户输入等操作。
htmlCopy Code<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ firstName + " " + lastName }}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
2.3 ng-model
ng-model 指令用于将输入域的值与数据模型绑定起来，实现双向数据绑定。
htmlCopy Code<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<p>Hello, {{ name }}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "John";
});
</script>
2.4 ng-repeat
ng-repeat 指令用于循环输出数组或对象的数据。
htmlCopy Code<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{ x }}</li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.names = ["John", "Jane", "Jim"];
});
</script>
3. 实例
下面是一个简单的 AngularJS 实例，展示了如何使用上述指令：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>AngularJS Demo</title>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{ siteTitle }}</h1>
<form>
<input type="text" ng-model="name">
<button ng-click="addName()">Add Name</button>
</form>
<hr>
<h2>Names:</h2>
<ul>
<li ng-repeat="x in names">{{ x }}</li>
</ul>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.siteTitle = "AngularJS Demo";
$scope.names = ["John", "Jane", "Jim"];
$scope.addName = function() {
if ($scope.name !== undefined && $scope.name !== "") {
$scope.names.push($scope.name);
$scope.name = "";
}
};
});
</script>
</body>
</html>
以上是一个简单的学习笔记例子，希望能对你有所帮助。