AngularJS示例有哪些？新手如何快速上手学习？

AngularJS 作为一款经典的前端框架，以其数据绑定、依赖载入和模块化特性为开发者提供了高效的开发方式，以下通过具体示例展示其核心功能与应用场景。

数据绑定与双向交互

AngularJS 的核心优势在于双向数据绑定，通过 ng-model 指令实现视图与模型的双向同步，以下示例展示一个简单的用户信息表单：

<div ng-app="myApp" ng-controller="userController"> <h3>用户信息</h3> <p>姓名：<input type="text" ng-model="user.name"></p> <p>年龄：<input type="number" ng-model="user.age"></p> <p>自我介绍：<textarea ng-model="user.bio"></textarea></p> <button ng-click="saveUser()">保存信息</button> <div ng-show="message">{{ message }}</div> </div>

对应的 JavaScript 控制器逻辑：

var app = angular.module('myApp', []); app.controller('userController', function($scope) { $scope.user = { name: '', age: '', bio: '' }; $scope.message = ''; $scope.saveUser = function() { $scope.message = '信息已保存：' + JSON.stringify($scope.user); }; });

说明：

• ng-model 将输入框的值与 $scope.user 对象绑定，修改输入框内容时模型数据实时更新。
• ng-show 根据条件控制消息显示，ng-click 绑定按钮点击事件。

列表渲染与循环操作

ng-repeat 指令可高效渲染动态列表，支持过滤和排序，以下示例展示商品列表管理：

<div ng-app="productApp" ng-controller="productController"> <input type="text" ng-model="searchText" placeholder="搜索商品"> <table border="1" style="width:100%; margin-top:10px;"> <thead> <tr> <th ng-click="sort('id')">ID</th> <th ng-click="sort('name')">名称</th> <th ng-click="sort('price')">价格</th> </tr> </thead> <tbody> <tr ng-repeat="product in filteredProducts = (products | filter:searchText | orderBy:sortKey:reverse)"> <td>{{ product.id }}</td> <td>{{ product.name }}</td> <td>{{ product.price | currency }}</td> </tr> </tbody> </table> </div>

控制器代码：

var app = angular.module('productApp', []); app.controller('productController', function($scope) { $scope.products = [ { id: 1, name: '笔记本', price: 4500 }, { id: 2, name: '手机', price: 3200 }, { id: 3, name: '平板', price: 2800 } ]; $scope.sortKey = 'name'; $scope.reverse = false; $scope.sort = function(key) { $scope.sortKey = key; $scope.reverse = !$scope.reverse; }; });

功能解析：

• filter:searchText 实现基于输入框的实时搜索。
• orderBy:sortKey:reverse 支持点击表头排序，reverse 控制升序/降序。
• currency 过滤器将价格格式化为货币形式。

模块化与依赖载入

AngularJS 通过模块化实现功能解耦，依赖载入（DI）简化组件间协作，以下示例展示服务模块的使用：

// 定义商品服务模块 var app = angular.module('productService', []); app.service('ProductService', function() { this.getProducts = function() { return [ { id: 1, name: '键盘', price: 199 }, { id: 2, name: '鼠标', price: 129 } ]; }; }); // 主模块依赖服务模块 var mainApp = angular.module('mainApp', ['productService']); mainApp.controller('productCtrl', function($scope, ProductService) { $scope.products = ProductService.getProducts(); });

优势：

• 服务模块 ProductService 封装数据逻辑，可复用且易于测试。
• 控制器通过依赖载入获取服务,避免硬编码依赖。

路由与多视图管理

结合 ngRoute 模块可实现单页应用（SPA）的路由功能：

<div ng-app="myApp" ng-controller="mainController"> <ul> <li><a href="#/home">首页</a></li> <li><a href="#/about">lt;/a></li> </ul> <div ng-view></div> </div>

路由配置：

var app = angular.module('myApp', ['ngRoute']); app.config(function($routeProvider) { $routeProvider .when('/home', { template: '<h1>首页内容</h1>' }) .when('/about', { template: '<h1>关于我们</h1>' }) .otherwise({ redirectTo: '/home' }); });

说明：

• ng-view 作为视图容器，根据路由加载对应模板。
• $routeProvider 定义路由规则，支持默认重定向。

AngularJS 通过数据绑定、模块化、路由等特性，为前端开发提供了结构化的解决方案，尽管现代框架如 Angular、React 已成为主流，但 AngularJS 的设计思想仍对前端工程化产生深远影响，掌握其核心概念有助于理解前端框架的演进逻辑。