Angularjs三大模块分别是什么？如何快速掌握核心用法？

AngularJS作为一款经典的前端框架,其核心理念围绕模块化展开，通过三大核心模块（ng、ngRoute、ngResource）构建了完整的应用开发体系，掌握这三大模块的功能与用法，是深入学习AngularJS的关键所在。

ng模块：框架的核心基石

ng模块是AngularJS的内置核心模块,无需额外安装即可直接使用，它提供了框架最基础的功能支持，作为应用的入口模块，ng模块定义了数据绑定、依赖注入、指令系统等核心特性，是所有AngularJS应用不可或缺的组成部分。

在模块定义阶段,通过angular.module('app', [])声明的模块，若未引入其他依赖，默认已包含ng模块的核心功能，ng模块最核心的价值在于提供了双向数据绑定机制，通过表达式实现视图与模型的双向同步，开发者无需手动操作DOM即可完成数据更新，ng模块还包含了常用指令如ng-app（初始化应用）、ng-model（数据绑定）、ng-repeat（循环渲染）等，这些指令构成了AngularJS声明式UI开发的基础。

ngRoute模块：实现单页应用路由

ngRoute模块是AngularJS官方提供的路由解决方案,用于实现单页应用（SPA）的页面切换功能，通过配置路由规则，开发者可以将URL与视图模板动态关联，实现无刷新的页面跳转体验。

使用ngRoute模块需先引入angular-route.js脚本文件，并在应用模块中依赖ngRoute，核心配置方法为$routeProvider，通过when(path, routeConfig)定义路由映射，其中template或templateUrl指定视图模板，controller关联控制器。

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'views/home.html',
            controller: 'HomeController'
        })
        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutController'
        })
        .otherwise({redirectTo: '/home'});
}]);

在HTML中,使用<ng-view>或<div ng-view></div>作为视图容器，路由匹配时对应的模板将自动插入该位置，ngRoute模块还支持路由参数传递（如/user/:id）和路由守卫（通过resolve属性预加载数据），为复杂应用提供了灵活的路由控制能力。

ngResource模块：简化RESTful API交互

ngResource模块是基于AngularJS服务$http的封装，专门用于与RESTful后端API进行数据交互，它提供了$resource服务，将复杂的HTTP请求操作抽象为简洁的CRUD（创建、读取、更新、删除）方法，极大简化了前端数据层的开发流程。

使用ngResource模块需引入angular-resource.js并在模块中依赖ngResource，通过$resource(url, paramDefaults, actions)可自定义资源对象，例如定义用户服务：

app.factory('User', ['$resource', function($resource) {
    return $resource('/api/users/:id', {id: '@id'}, {
        update: {method: 'PUT'}
    });
}]);

生成的资源对象可直接调用方法：

• User.get({id: 1})：发送GET请求获取单个用户
• User.save({}, {name: '张三'})：发送POST请求创建用户
• User.update({id: 1}, {name: '李四'})：发送PUT请求更新用户
• User.delete({id: 1})：发送DELETE请求删除用户

ngResource模块支持请求与响应的拦截、默认参数设置及自定义扩展方法，使前端数据操作更加符合RESTful规范，同时保持代码的简洁性与可维护性。

三大模块协同工作流程

在实际开发中,三大模块通常协同工作：ng模块提供基础框架，ngRoute模块负责视图路由管理，ngResource模块处理数据交互，典型的工作流程为：用户通过路由切换视图（ngRoute），视图控制器请求数据（ngResource），数据通过双向绑定更新视图（ng模块），最终形成完整的响应式单页应用。

通过系统学习这三大模块,开发者能够构建结构清晰、可维护性强的AngularJS应用，为后续深入框架高级特性奠定坚实基础。