Angularjs基础知识及示例汇总，新手如何快速入门？

Angularjs基础知识及示例汇总

AngularJS是由Google开发的一款前端JavaScript框架,用于构建单页面应用（SPA），它通过数据绑定、依赖载入、指令等特性，简化了动态Web应用的开发过程，本文将系统介绍AngularJS的核心基础知识，并结合示例代码帮助读者快速上手。

AngularJS核心概念

模块（Module）

模块是AngularJS应用的基本构建块,用于组织代码、管理依赖关系，通过angular.module()方法可以创建或获取模块。

示例：

var myApp = angular.module('myApp', []); // 创建名为myApp的模块

控制器（Controller）

控制器用于处理业务逻辑,通过$scope对象与视图进行数据交互。

示例：

myApp.controller('MainController', function($scope) { $scope.message = 'Hello, AngularJS!'; });

数据绑定（Data Binding）

AngularJS支持双向数据绑定,即模型（Model）与视图（View）的自动同步。

示例：

<div ng-app="myApp" ng-controller="MainController"> <p>{{ message }}</p> </div>

指令（Directives）

指令是AngularJS的标记,用于扩展HTML功能，如ng-model、ng-repeat等。

示例：

<input type="text" ng-model="name"> <p>你好，{{ name }}！</p>

常用指令详解

示例：ng-repeat用法

作用域（$scope）与数据流

作用域是连接控制器和视图的桥梁,它是一个包含模型数据的对象，AngularJS通过$digest循环检测数据变化并更新视图。

示例：作用域继承

myApp.controller('ParentController', function($scope) { $scope.parentMsg = '父级作用域'; }); myApp.controller('ChildController', function($scope) { $scope.childMsg = '子级作用域'; }); <div ng-controller="ParentController"> <p>{{ parentMsg }}</p> <div ng-controller="ChildController"> <p>{{ parentMsg }}</p> <!-- 可继承父级作用域 --> <p>{{ childMsg }}</p> </div> </div>

服务（Services）与依赖载入

服务是单例对象,用于封装可复用的功能（如HTTP请求、日志记录等），通过依赖载入（DI），服务可以轻松载入到控制器、指令等组件中。

常用服务：

• $http：发送HTTP请求
• $log：日志记录
• $filter：数据格式化

示例：使用$http服务

myApp.controller('DataController', function($scope, $http) { $http.get('api/data').then(function(response) { $scope.users = response.data; }); });

过滤器（Filters）

过滤器用于格式化数据,可应用于表达式或指令中。

示例：内置过滤器

<!-- 日期格式化 --> <p>{{ date | date:'yyyy-MM-dd' }}</p> <!-- 数字格式化 --> <p>{{ price | currency:'¥' }}</p> <!-- 大小写转换 --> <p>{{ name | uppercase }}</p>

自定义过滤器：

myApp.filter('reverse', function() { return function(input) { return input.split('').reverse().join(''); }; }); <p>{{ hello | reverse }}</p> <!-- 输出: olleh -->

路由（ngRoute）

AngularJS通过ngRoute模块实现单页面应用的路由功能，支持视图切换与参数传递。

配置路由：

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

示例：路由链接

<a href="#/home">首页</a> <a href="#/about">lt;/a> <div ng-view></div> <!-- 动态加载视图 -->

AngularJS通过模块化、数据绑定、依赖载入等特性，显著提升了前端开发效率，掌握其核心概念（如模块、控制器、指令、服务）是构建复杂应用的基础，本文通过基础示例和表格对比，帮助读者快速理解AngularJS的工作原理，并提供了路由、过滤器等进阶功能的实践指导，建议读者结合实际项目逐步深入，探索AngularJS的更多高级特性。