AngularJs初学

于 2021-01-11 11:29:50 发布
阅读量137 收藏 1
点赞数
分类专栏： 框架 java 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lipeitao1994/article/details/112464230
版权

AngularJs初学

(本文主要介绍简单使用教程)
AngularJs是基于javascript开发出的一套新框架。
通过

1.AngularJs指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 
<div ng-app="myApp">
    <p>名字 : <input type="text" ng-model="para"></p>
    <h1>Hello {{para}}</h1>
    <p ng-bind="para"></p>
</div>
 
</body>
</html>

AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-app 指令定义一个 AngularJS 应用程序。(告诉 AngularJS，

元素是 AngularJS 应用程序 的"所有者"。)
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。(把输入域的值绑定到应用程序变量 para。)
ng-bind 指令把应用程序数据绑定到 HTML 视图。(把应用程序变量 para绑定到某个段落的 innerHTML。)

2.AngularJs表达式
AngularJs表达式写在{{expression }}中

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="">
	<input type="text" ng-model="aaa">
	<input type="text" ng-model="bbb">
  <p>我的第一个表达式： {{ aaa + " " + bbb }}</p>
</div>

</body>
</html>

上面表达式会输出aaa+bbb的入力值

3.AngularJs应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

通过ng-app指令指明应用, ng-controller 指明控制器。

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
 
 <input type="text" ng-model="aaa"><br>
 <input type="text" ng-model="bbb"><br>
<br>
aaa+bbb : {{aaa+ " " + bbb}}
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.aaa= "John";
    $scope.bbb= "Doe";
});
</script>

指定并输出aaa+bbb的值

lipeitao1994
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angularjs-beginner：angularjs初学者
02-22
**AngularJS初学者指南** AngularJS，作为一款由Google维护的JavaScript框架，是前端开发中的重要工具，尤其适合构建复杂的单页应用（SPA）。本指南将深入浅出地引导初学者掌握AngularJS的核心概念和实践技巧，从而...
Angular JS 学习记录一——安装angular
qq_41194153的博客
02-20 144
一、本地安装 1.先安装npm 包管理器 Angular、Angular CLI 以及 Angular 应用都要依赖 npm 包来实现很多特性和功能。要下载并安装 npm 包，你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面，该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端，请在终端窗口中运行 npm -v 。 2.再安装node 了解如何安装 Node.js，参阅 nodejs.org。 如果你不确定系统中正在运行的 Node.js 版本是什么，请在终端窗口中运行 n
angularJS学习创建angular项目
qq_39399252的博客
01-09 1048
1.angularJS的使用 angular在使用时一般有两种方法，一种是直接在html页面引用angular.min.js,如： &lt;script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt; 版本的话可以看angular官方文档，需要哪个引入那个，angular1和a...
全面掌握前端框架AngularJS
绝圣弃智-零的博客
11-27 2515
整理自菜鸟教程 AngularJS AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。 AngularJS 学习起来非常简单。 AngularJS 实例 <!DOCTYPE html> <html> <head> &l...
angular.js入门汇总（上）
kalinux的博客
10-20 287
                                                               总体把握 angular.js5大核心： 1，mvc模式   2，双向数据绑定 3，依赖注入 4，模块系统 5，指令系统   mvc模式： function  app($scope){ $scope.name="bob";   //这是mvc中的mode...
angularjs初学者速成笔记
01-31
本笔记旨在为初学者提供快速掌握AngularJS基础知识的路径，通过23课的内容，帮助你理解并运用这个框架。 1. **数据绑定**：AngularJS 的核心特性之一，实现了视图和模型之间的双向绑定。这意味着当你在视图中修改...
AngularJS初学者参考手册
03-22
这份“AngularJS初学者参考手册”是为那些刚刚接触或者想要深入理解AngularJS的开发者准备的宝贵资源。它包含了三个关键部分：AngularJS参考手册.docx、AngularJS开发指南.pdf以及AngularJS中文API参考手册.chm。 ...
angularjs资源
01-06
对于初学者，可以从1.4.x或1.5.x版本开始，因为它们包含了许多基础特性，而较新的版本则引入了更多优化和最佳实践。同时，这个资源也是对AngularJS历史演进的一次回顾，有助于理解前端框架的发展历程。
angularjs使用文档
技术圈
11-12 649
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> ng-directives ng-app 指令 定义一个 AngularJS 应用程序 ng-app="myModule" ng-model 指令 把元素值（比如输入域的值）绑定到应用程序 双向绑定 <input ng-model="name"> app.controller('myCtrl', fun
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp39-cp39-musllinux_1_2_x86_64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
1250KVA本体基础图11
07-27
1250KVA本体基础图11
毕业设计之网上订餐系统.zip
07-27
毕业设计之网上订餐系统.zip
pillow-10.4.0-cp39-cp39-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp39-cp39-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp311-cp311-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp311-cp311-musllinux_1_2_aarch64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
AngularJS初学者指南：中文翻译版
"AngularJS》中文版1 - 一本适合AngularJS初学者的翻译书籍，包含AngularJS的基本知识和核心概念，如MVC架构、数据绑定、依赖注入和指令等。作者懒虫一个在翻译过程中对原文错误进行了批注和改正，并提供了一些额外...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值