AngularJS快速入门

作者：不正经 | 2024-06-10 00:04:11

踩

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 演示效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/696327