AngularJS-1

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34229789/article/details/79956335

1. 入门小程序

首先我们写一个简单的AngularJS入门小程序。
需求:当页面启动时,显示默认的字符串”s”;当我们在输入框中输入字符串时,下方会实时显示。如图:
这里写图片描述
我们需要用到的指令:
ng-app:定义一个AngularJS应用程序
ng-init:初始化AngularJS应用程序变量
ng-model:把元素值绑定到应用程序(ng-app)
ng-bind:把应用程序(ng-app)绑定到HTML视图
代码如下:

    <!-- ng-app指令:定义一个angularJS应用程序 -->
    <div ng-app="App1">
        <!-- ng-init:初始化AngularJS应用程序变量 -->
        <div ng-init="name='s'"></div>
        <!-- ng-model:把元素值绑定到应用程序 -->
        姓名:<input type="text" name="name" id="name" ng-model="name">
        <!-- ng-bind:把应用程序数据绑定到HTML视图 -->
        <p ng-bind="name"></p>
    </div>
    <script>
        angular.module("App1",[]);
    </script>

注:在这呢,存在一个小问题。
当我们在ng-app指令时,如果ng-app带参数,那么必须要加上script代码。

<div ng-app="App1">
<script>
    angular.module("App1",[]);
</script>

如果我们ng-app指令不加参数,则无需加上script代码。

    <!-- ng-app指令:定义一个angularJS应用程序 -->
    <div ng-app="">
        <!-- ng-init:初始化AngularJS应用程序变量 -->
        <div ng-init="name='s'"></div>
        <!-- ng-model:把元素值绑定到应用程序 -->
        姓名:<input type="text" name="name" id="name" ng-model="name">
        <!-- ng-bind:把应用程序数据绑定到HTML视图 -->
        <p ng-bind="name"></p>
    </div>

之所以会出现这样的原因是因为:
当我们不给ng-app输入参数时,浏览器默认加载这个应用程序。
当我们给ng-app赋值时,就需要我们手动加载应用程序,声明这个模块。

2. 表达式

这里我们讲一下AngularJS的表达式。
1. 在AngularJS中表达式声明在”{{}}”中
2. {{}},把数据绑定到HTML视图
3. 在{{}}书写位置显示数据

    <!-- ng-app指令:定义一个angularJS应用程序 -->
    <div ng-app="App1">
        <!-- ng-init:初始化AngularJS应用程序变量 -->
        <div ng-init="name='s'"></div>
        <!-- ng-model:把元素值绑定到应用程序 -->
        姓名:<input type="text" name="name" id="name" ng-model="name">
        <!-- ng-bind:把应用程序数据绑定到HTML视图 -->
        <!-- <p ng-bind="name"></p> -->
        <!-- {{}},把数据绑定到HTML。与ng-bind指令功能类似 -->
        <p>{{name}}</p>
    </div>
    <script>
        angular.module("App1",[]); 
    </script>

3. {{}}与ng-bind区别

{{}}:当未获取数据时,在页面中不会显示该元素
ng-bind:当未获取数据时,仍在页面显示该元素

    <!-- ng-app指令:定义一个angularJS应用程序 -->
    <div ng-app="App1">
        <!-- ng-model:把元素值绑定到应用程序 -->
        姓名:<input type="text" name="name" id="name" ng-model="name">
        <!-- ng-bind:把应用程序数据绑定到HTML视图 -->
        <p ng-bind="name"></p>
        <!-- {{}},把数据绑定到HTML。与ng-bind指令功能类似 -->
        {{name}}
    </div>
    <script>
        angular.module("App1",[]); 
    </script>

这里写图片描述
这里写图片描述

4. AngularJS应用

概念:

  1. ng-app:定义了一个AngularJS应用程序
  2. ng-controller:定义了一个AngularJS控制器
  3. AngularJS Module(模块)定义了应用
  4. AngularJS Controller(控制器)控制应用
    这里我们在用一个例子说明:
    需求:当页面加载时,显示初始化的姓名;当姓、名输入框内数据变化时,下方实时变动。
    这里写图片描述
    代码如下:
    <!-- ng-controller:定义了一个控制器,用于控制应用 -->
    <div ng-app="App2" ng-controller="Controller1">
        姓:<input type="text" name="f_name" id="f_name" ng-model="f_name">
        名:<input type="text" name="l_name" id="l_name" ng-model="l_name">
        <br>
        姓名:{{f_name + l_name}}
    </div>
    <script>
        // 声明了模块,AngularJS模块定义应用
        var app = angular.module("App2", []);
        // AngularJS控制器控制应用
        app.controller('Controller1', function($scope) {
            $scope.f_name = "吴";
            $scope.l_name = "惘";
        });
    </script>
阅读更多

没有更多推荐了,返回首页