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 的设计思想仍对前端工程化产生深远影响，掌握其核心概念有助于理解前端框架的演进逻辑。