引言

AngularJS是一个由Google维护的开源JavaScript框架，用于构建单页应用程序（SPA）。它通过双向数据绑定、依赖注入和模块化等特点，简化了前端开发的复杂性。本文将带你通过一系列实战案例，从入门到精通AngularJS。

一、AngularJS基础入门

1. 安装与配置

首先，你需要安装Node.js和npm（Node.js包管理器）。然后，使用以下命令安装AngularJS：

npm install angular@1.8.2

2. 创建项目

使用Angular CLI创建一个新项目：

ng new my-app cd my-app

3. 模块与控制器

AngularJS通过模块（Module）来组织代码，控制器（Controller）则用于处理数据逻辑。

// app.module.js const app = angular.module('myApp', []); // app.controller.js app.controller('myController', function($scope) { $scope.message = 'Hello, AngularJS!'; });

4. 模板与双向数据绑定

在HTML模板中，使用ng-model实现双向数据绑定。

<!DOCTYPE html> <html> <head> <script src="node_modules/angular/angular.min.js"></script> </head> <body ng-app="myApp"> <input type="text" ng-model="message"> <p>{{ message }}</p> </body> </html>

二、AngularJS实战案例

1. 登录验证

使用AngularJS实现用户登录验证，包括表单验证和HTTP请求。

// app.controller.js app.controller('loginController', function($scope, $http) { $scope.user = { username: '', password: '' }; $scope.login = function() { $http.post('/api/login', $scope.user) .then(function(response) { // 登录成功 }, function(error) { // 登录失败 }); }; });

2. 表单校验

使用AngularJS内置的表单校验功能，实现用户输入的实时校验。

<form name="loginForm" ng-submit="login()"> <input type="text" ng-model="user.username" required> <input type="password" ng-model="user.password" required> <button type="submit" ng-disabled="loginForm.$invalid">登录</button> </form>

3. 自定义指令

使用自定义指令实现页面特效，如轮播图、弹窗等。

// app.directive.js app.directive('myDirective', function() { return { restrict: 'E', template: '<div>自定义指令内容</div>' }; }); 
<my-directive></my-directive>

4. 过滤器

使用过滤器实现数据的格式化，如日期格式、货币格式等。

// app.filter.js app.filter('myFilter', function() { return function(input) { return input.toUpperCase(); }; }); 
<p>{{ 'hello' | myFilter }}</p>

三、总结

通过以上实战案例，你已掌握了AngularJS的基本用法和常用功能。在实际开发中，你可以根据需求选择合适的组件和功能，提高开发效率。祝你学习顺利！