前端框架AngularJS基础入门

最新推荐文章于 2024-06-23 17:16:57 发布

唯代码动人心

最新推荐文章于 2024-06-23 17:16:57 发布

阅读量664

点赞数 1

分类专栏： java进阶文章标签： angularjs

本文链接：https://blog.csdn.net/qq_44154912/article/details/117819228

版权

本文介绍了AngularJS的基础知识，包括AngularJS的特性如MVC、双向数据绑定和模块化设计。详细讲解了表达式与指令的使用，特别是ng-app和ng-model指令实现的数据绑定。此外，还涵盖了ng-init初始化变量、ng-controller定义控制器、ng-click事件处理以及ng-repeat用于循环遍历数组。最后，提到了如何使用内置服务$http获取后端数据。

摘要由CSDN通过智能技术生成

1. AngularJS简介:

AngularJS 诞生于2009年，后为Google所收购。被用于Google的多款产品当中。
AngularJS 特性: MVC、模块化、自动化双向数据绑定、依赖注入
双向绑定: 数据变量与视图同步更新 ,当修改数据变量视图显示的随着改变 , 当修改文本框中的值数据变量一起改变。JS与JQuery都是单项绑定。
模块化设计:官方提供了多种模块 , 用户可以自定义模块

2.基础使用

2.1 表达式与指令

AngularJS 使用{ { }}表达式
ng-app 指令：被ng-app 指令修饰的标签及其子标签会被AngularJS 所控制，能被AngularJS 识别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularjs的表达式</title>
    <!-- 导入angularjs的基础文件 -->
    <script src="angular.min.js"></script>
</head>
<body ng-app>
    <h1>angularjs的表达式</h1>
    <h2><span>{
  {
  </span>具体的表达式<span>}}</span></h2>
    <h2>算术表达式---{
  {100+200}}</h2>
    <h2>关系表达式---{
  {100 > 200}}</h2>
    <h2>逻辑表达式---{
  {(100>200) || (200>100)}}</h2>
    <h2>逻辑表达式---{
  {(100>200) && (200>100)}}</h2>
</body>
</html>

效果：
在这里插入图片描述

2.2 双向绑定

ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。

<!DOCTYPE html>
<html>
<head>
	<title>入门小Demo-1  双向绑定</title>
	<script src="angular.min.js"></script>
</head>
<body ng-app>
请输入你的姓名：<input ng-model="myname">
<br>
{
  {myname}},你好
</body>
</html>

效果
在这里插入图片描述

2.3 初始化指令

ng-init 指令: 如果希望有些变量具有初始值，可以使用ng-init指令来对变量初始化
ng-init 指令只能在标签中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularjs的初始化指令</title>
    <!-- 导入angularjs的基础文件 -->
    <script src="js/plugins/angularjs/angular.min.js"></script>
</head>
<body ng-app ng-init="myname='张三'">
请输入姓名:<input  type="text"<

最低0.47元/天解锁文章

唯代码动人心

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
前端框架AngularJS基础入门

1. AngularJS简介:AngularJS 诞生于2009年，后为Google所收购。被用于Google的多款产品当中。AngularJS 特性: MVC、模块化、自动化双向数据绑定、依赖注入双向绑定: 数据变量与视图同步更新 ,当修改数据变量视图显示的随着改变 , 当修改文本框中的值数据变量一起改变。JS与JQuery都是单项绑定。模块化设计:官方提供了多种模块 , 用户可以自定义模块2.基础使用2.1 表达式与指令AngularJS 使用{{ }}表达式ng-app 指
复制链接

扫一扫

专栏目录