AngularJS快速入门

最新推荐文章于 2025-07-01 13:25:01 发布

原创最新推荐文章于 2025-07-01 13:25:01 发布 · 1.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

AngularJS

本文介绍了AngularJS的基本概念，展示了如何下载和引入AngularJS，并通过示例代码详细讲解了AngularJS的核心特性MVC，帮助读者快速掌握AngularJS的前端开发技巧。

一什么是AngularJS

官方定义：AngularJS是HTML开发本应该的样子，它是用来开发Web应用的。

HTML一般是用来声明静态页面的，而AngularJS可以只通过前端技术就实现动态的页面。

二下载并引用AngularJS

AngularJS的中文官方：http://www.angularjs.net.cn/

AngularJS的中文下载地址：http://www.angularjs.net.cn/download/

最简单的https://angularjs.org/页面

<!doctype html>
<html ng-app><!-- ng-app所作用的范围是AngularJS起效的范围，本例是整个页面有效 -->
  <head>
      <meta charset="utf-8">
    <script src="js/angular.min.js"></script><!-- 载入AngularJS的脚本 -->
  </head>
  <body>
    <div>
      <label>名字:</label>
       <!--ng-model定义整个AngularJS的前端数据类型，模型的名称是yourname，模型的值来自输入的值，若输入值改变，则数据模型的值也会改变  -->
      <input type="text" ng-model="yourName" placeholder="输入你的名字">
      <hr>
      <h1>你好 {{yourName}}!</h1><!-- 使用{{模型名}}来读取模型中的值 -->
    </div>
  </body>
</html>

效果图如下：

三 AngularJS核心特性——MVC

Model：数据模型层

View：视图层，负责展示

Controller：业务逻辑和控制逻辑

好处：职责清晰，代码模块化。

平时的MVC都是服务端的MVC，这里用AngularJS实现了纯页面端的MVC，即实现了视图、数据，控制代码的分离。

四实战

1 展示页面

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="HelloAngular">  <!-- 控制器是HelloAngular -->
            <p>{{greeting.text}},Angular</p>  <!-- P标签内是视图，{{greeting.text}}是模型 -->
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_MVC.js"></script>
</html>

2 控制器的定义HelloAngular

function HelloAngular($scope) {
    $scope.greeting = {
        text: 'Hello'
    };
}

3 演示效果

标签

#AngularJS