angularjs学习笔记二——代码结构简介

最新推荐文章于 2024-03-02 08:30:08 发布

FUNCO_小风

最新推荐文章于 2024-03-02 08:30:08 发布

阅读量661

点赞数 1

分类专栏： anjularjs 文章标签： angularjs 结构 web ng ng-app

本文链接：https://blog.csdn.net/qq_23937195/article/details/72742701

版权

这篇博客介绍了AngularJS的基本结构，重点讲解了ng-app用于声明应用，ng-model进行数据绑定，以及表达式{{}}的用途。文章强调了AngularJS与原生JS和jQuery的区别，特别是其数据绑定机制，指出AngularJS的高封装性和简洁性。

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

通过上一篇博文，为大家解答了几个初学常见的问题，并展示了第一个程序。这里我们就上一篇博文中的代码基础上，来了解一下ng(AngularJS简称)的基本结构

首先我们先从上一篇博文的代码开始，代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>程序1</title>
        <!-- 引入angularJS -->
        <script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="" ng-init="inputName='Funco_小风'"><!-- 定义变量inputName初始值为字符串'Funco_小风' -->
            name:<input type="text" placeholder="inputyourname" ng-model="inputName" /><!-- 通过ng-model将该input标签与变量inputName绑定 -->
            <br />
            你的名字是 -{
  {inputName}}<!-- 显示变量inputName -->
        </div>
    </bo