AngularJS-1

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>