当前位置：首页 > news >正文

初试AngularJS前端框架

news 2025/6/29 13:48:51

文章目录

一、框架概述
二、实例演示
- （一）创建网页
- （二）编写代码
- （三）浏览网页
- （四）运行结果
三、实战小结

一、框架概述

AngularJS 是一个由 Google 维护的开源前端 JavaScript 框架，用于构建单页应用（SPA）。它采用双向数据绑定和依赖注入，简化了 DOM 操作和前端逻辑。AngularJS 支持模块化开发，易于测试和维护。它提供了丰富的指令和过滤器，使得开发动态交互式网页变得简单。此外，AngularJS 还拥有一个庞大的社区和生态系统，为用户提供了丰富的资源和工具。

二、实例演示

（一）创建网页

创建文件：创建一个名为 angularjs_demo.html 的文件。

（二）编写代码

导入AngularJS脚本：在HTML文件的 <head> 部分导入AngularJS框架。
编写页面代码：

<!DOCTYPE html>
<html ng-app="loginApp">
<head><meta charset="utf-8"><title>演示AngularJS</title><!-- 导入AngularJS框架 --><script src="https://cdn.bootcss.com/angular.js/1.8.2/angular.min.js"></script>  <style>body {text-align: center;padding: 20px;font-family: Arial, sans-serif;}.login-container {display: flex;flex-direction: column;align-items: center;margin: auto;width: 300px;padding: 20px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}h3 {color: #333;margin-bottom: 20px;}.form-group {display: flex;align-items: center;margin-bottom: 20px;}label {margin-right: 10px;}input[type="text"],input[type="password"] {padding: 8px;border: 1px solid #ddd;border-radius: 4px;flex-grow: 1;}button {padding: 10px 20px;background-color: #5cb85c;border: none;border-radius: 4px;color: white;cursor: pointer;}button:hover {background-color: #4cae4c;}p {color: red;margin-top: 10px;}</style>
</head>
<body><div class="login-container" ng-controller="LoginController"><h3>用户登录</h3><form ng-submit="login()"><div class="form-group"><label>账号：</label><input type="text" ng-model="username"></div><div class="form-group"><label>密码：</label><input type="password" ng-model="password"></div>				<button type="submit">登录</button></form><p ng-if="errorMessage">{{errorMessage}}</p></div><script>// 创建AngularJS应用var app = angular.module('loginApp', []);// 创建AngularJS控制器app.controller('LoginController', function($scope) {$scope.login = function(event) {				event.preventDefault(); // 阻止表单的默认提交行为// 判断是否登录成功if ($scope.username == 'admin' && $scope.password == '123456') {alert('恭喜，用户登录成功~');} else {$scope.errorMessage = "用户名或密码错误，登录失败~";}};});</script>
</body>
</html>