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用法

<div ng-app="myApp" ng-controller="ListController">  
    <ul>  
        <li ng-repeat="fruit in fruits">{{ fruit }}</li>  
    </ul>  
</div>  

myApp.controller('ListController', function($scope) {  
    $scope.fruits = ['苹果', '香蕉', '橙子'];  
});  

作用域（$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的更多高级特性。