AngularJS知识快速入门（上）

1加1等于

已于 2025-07-01 13:50:27 修改

阅读量687

点赞数 26

CC 4.0 BY-SA版权

分类专栏： javascript实战文章标签： angular.js 前端 javascript

于 2025-07-01 13:25:01 首次发布

本文链接：https://blog.csdn.net/weixin_45075226/article/details/149039092

javascript实战专栏收录该内容

47 篇文章

订阅专栏

#JavaScript性能优化实战#

本文通过一些具体的例子介绍了关于AngularJS的基本使用，包括指令、表达式、过滤器、模块化、MVC以及内置服务模块等等。

本文目录

AngularJS 简介

AngularJS 是由 Google 开发的一个用于构建动态 Web 应用的前端 JavaScript 框架，它遵循 MVC（Model - View - Controller）或 MVVM（Model - View - ViewModel）架构模式，能帮助开发者更高效地组织和管理代码。具有双向数据绑定、模块化、指令系统、依赖注入等核心特性，可显著提高开发效率和代码可维护性。

一、表达式

定义：AngularJS 表达式是写在双大括号 {{ }} 中的 JavaScript 代码片段，用于在 HTML 模板中绑定数据和执行简单的运算。
作用：将模型绑定到视图上，当模型数据发生变化时，视图会自动更新，支持算术运算、字符串拼接、函数调用等。

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>表达式</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-init="productPrice = 99.99">
        售价: {{ productPrice }} 元
    </div>
</body>
</html>

二、MVC

MVC 架构
- Model（模型）：代表应用的数据和业务逻辑，通常是 JavaScript 对象或数组。
- View（视图）：用户界面，由 HTML 和 AngularJS 表达式组成，用于展示数据。
- Controller（控制器）：连接模型和视图的桥梁，处理用户输入和业务逻辑，更新模型和视图。

MVC基本原理：控制器更新模型，模型变化自动反映到视图；视图中的用户操作通过控制器更新模型。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>MVC示例</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('ProductController', function ($scope) {
            $scope.products = [
                { name: '手机', price: 2999 },
                { name: '电脑', price: 5999 },
                { name: '耳机', price: 299 }
            ];
        });
    </script>
</head>
<body>
    <div ng-controller="ProductController">
        <h2>商品列表</h2>
        <ul>
            <li ng-repeat="product in products">
                {{ product.name }} - {{ product.price }} 元
            </li>
        </ul>
    </div>
</body>
</html>

三、$scope 作用域

定义：$scope 是 AngularJS 中的一个对象，它充当控制器和视图之间的桥梁，用于在两者之间传递数据和方法。
作用域层次：AngularJS 应用有一个根作用域 $rootScope，每个控制器都有自己的子作用域，作用域可以嵌套，子作用域可以继承父作用域的属性和方法。

<!DOCTYPE html>
<html ng-app="cartApp">
<head>
    <meta charset="UTF-8">
    <title>$scope 示例</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  <script>
        var app = angular.module('cartApp', []);
        app.controller('CartController', function ($scope) {
            $scope.cartCount = 0;
            $scope.addToCart = function () {
                $scope.cartCount++;
            };
        });
    </script>
</head>
<body>
    <div ng-controller="CartController">
        <h2>购物车</h2>
        <p>购物车商品数量: {{ cartCount }}</p>
        <button ng-click="addToCart()">添加到购物车</button>
    </div>
</body>
</html>

四、模块化

定义：模块化是将应用拆分成多个独立的模块，每个模块负责特定的功能，提高代码的可维护性和可测试性。
模块创建：使用 angular.module() 方法创建模块，第一个参数是模块名称，第二个参数是依赖的模块数组。
模块使用：在 HTML 中通过 ng-app 指令指定应用的主模块。

<!DOCTYPE html>
<html ng-app="ecommerceApp">
<head>
    <meta charset="UTF-8">
    <title>模块化示例</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script>
        // 商品列表模块
        var productModule = angular.module('productModule', []);
        productModule.controller('ProductController', function ($scope) {
            $scope.products = [
                { name: '手机', price: 2999 },
                { name: '电脑', price: 5999 },
                { name: '耳机', price: 299 }
            ];
        });

        // 购物车模块
        var cartModule = angular.module('cartModule', []);
        cartModule.controller('CartController', function ($scope) {
            $scope.cartCount = 0;
            $scope.addToCart = function () {
                $scope.cartCount++;
            };
        });

        // 主模块，依赖商品列表和购物车模块
        var app = angular.module('ecommerceApp', ['productModule', 'cartModule']);
    </script>
</head>
<body>
    <div ng-controller="ProductController">
        <h2>商品列表</h2>
        <ul>
            <li ng-repeat="product in products">
                {{ product.name }} - {{ product.price }} 元
            </li>
        </ul>
    </div>
    <div ng-controller="CartController">
        <h2>购物车</h2>
        <p>购物车商品数量: {{ cartCount }}</p>
        <button ng - click="addToCart()">添加到购物车</button>
    </div>
</body>
</html>

五、过滤器

定义：过滤器用于格式化数据，在视图中对数据进行转换和显示，如格式化日期、货币、大小写等。
使用方式：在表达式中使用管道符号 | 来应用过滤器，如 {{ data | filterName: parameter }}。
内置过滤器：如 currency 用于格式化货币，date 用于格式化日期等。

<!DOCTYPE html>
<html ng-app="filterApp">
<head>
    <meta charset="UTF-8">
    <title>过滤器示例</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('filterApp', []);
        app.controller('ProductController', function ($scope) {
            $scope.productPrice = 99.99;
        });
    </script>
</head>
<body>
    <div ng- controller="ProductController">
        <h2>商品价格</h2>
        <p>格式化后的价格: {{ productPrice | currency }}</p>
    </div>
</body>
</html>

六、服务

定义：服务是 AngularJS 中用于封装和共享代码的单例对象，提供了一种在不同控制器之间共享数据和逻辑的方式。
内置服务：如 $http 用于发送 HTTP 请求，$timeout 用于延迟执行代码等。
- 自定义服务：使用 angular.module().service() 方法创建自定义服务。

<!DOCTYPE html>
<html ng-app="productApp">
<head>
    <meta charset="UTF-8">
    <title>$http 服务示例</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('productApp', []);
        app.controller('ProductController', function ($scope, $http) {
            $http.get('products.json')
              .then(function (response) {
                    $scope.products = response.data;
                })
              .catch(function (error) {
                    console.error('获取商品列表失败:', error);
                });
        });
    </script>
</head>
<body>
    <div ng-controller="ProductController">
        <h2>商品列表</h2>
        <ul>
            <li ng-repeat="product in products">
                {{ product.name }} - {{ product.price }} 元
            </li>
        </ul>
    </div>
</body>
</html>

七、指令

定义：指令是 AngularJS 中用于扩展 HTML 功能的标记，通过自定义属性或元素来实现特定的行为和功能。
内置指令：如 ng-repeat 用于循环渲染列表，ng-click 用于处理点击事件等。
- 自定义指令：使用 angular.module().directive() 方法创建自定义指令。

<!DOCTYPE html>
<html ng-app="directiveApp">
<head>
    <meta charset="UTF-8">
    <title>自定义商品卡片指令</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('directiveApp', []);
        app.directive('productCard', function () {
            return {
                restrict: 'E',
                scope: {
                    product: '='
                },
                template: '<div class="product-card">' +
                    '<h3>{{ product.name }}</h3>' +
                    '<p>{{ product.price | currency }}</p>' +
                    '</div>'
            };
        });
        app.controller('ProductController', function ($scope) {
            $scope.products = [
                { name: '手机', price: 2999 },
                { name: '电脑', price: 5999 },
                { name: '耳机', price: 299 }
            ];
        });
    </script>
</head>
<body>
    <div ng - controller="ProductController">
        <h2>商品列表</h2>
        <product-card ng-repeat="product in products" product="product"></product-card>
    </div>
</body>
</html>