AngularJS知识快速入门（上）
本文通过一些具体的例子介绍了关于AngularJS的基本使用，包括指令、表达式、过滤器、模块化、MVC以及内置服务模块等等。
本文目录
-
-
- AngularJS 简介
- 一、表达式
- 二、MVC
- 三、$scope 作用域
- 四、模块化
- 五、过滤器
- 六、服务
- 七、指令
-
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: '' +
'{{ product.name }}
' +
'{{ product.price | currency }}
' +
''
};
});
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>
| ← 上一篇 Ajax——在OA系统提升性能的局部刷新 |
记得点赞、关注、收藏哦！
|
下一篇 JUC小册——公平锁和非公平锁 → |