angularjs学习第一天笔记

2018-08-21 05:30:13来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点评与赐教。谢谢!

  第一天,简单了解了其中中一些基本概念

  1、angularjs的解释

    angularjs是Google旗下的一个前端js框架,其与html、css、js配合使用,从而使得web开发更加的简单快捷。

    angularjs有4大特性:MVC、模块化、指令系统、双向数据绑定。在学习过程中也是围绕这几点进行系统的学习。

  2、angularjs创建一个页面的简单特性

    a.首先要引用angularjs类库

    b.在html页面要标注ng-app属性,该标注表示所在范围内的DOM结构才收angularjs所控制

    c.数据绑定模块的默认格式为{{参数名称}},当然这个格式是可以自定义设置的

    d.第DOM标签添加angular属性时,都是以ng-开始

    e.angular框架中数据模型数据的变更会动态的绑定显示到view中

    f.angular框架外的js修改数据模型的变化不会动态的绑定显示到view中,需要借助$apply手动更新

    f.Scope提供$watch方法监视Model的变化

    g.Scope提供$apply方法传播Model的变化

  3、创建一个简单angularjs页面实现数据绑定

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp">
    <div ng-controller="myContro">
        <div>名字:<input type="text" ng-model="name" placeholder="请输入姓名" /></div>
        <div>你输入的姓名为:【{{name}}】请核对</div>
        <div ng-click="clear()">清空输入</div>
    </div>
</body>
</html>
<script src="../Scripts/angular.js"></script>
<script type="text/javascript">
    var myApp = angular.module("myApp", []);
    myApp.controller("myContro", function ($scope) {

        //// 清空输入函数
        $scope.clear = function () {
            $scope.name = "";
        }

        //// 2s后直接给name赋值,但是试图不会实时更新
        setTimeout(function () {
                $scope.name = "开始输入";
        }, 2000);

        //// 10s后给name赋值,并手动
        setTimeout(function () {
            $scope.$apply(function () {
                $scope.name = "输入结束";
            });
        }, 10000);

        //// $watch监控模型name中字的改变
        $scope.$watch("name", function (newValue, oldValue) {
            if (newValue != oldValue) {
                console.log("name值又发生了改变:改变前的值:【" + oldValue + "】、改变后的值【" + newValue + "");
            }
        });
    });
</script>

  4、模块

    为了代码的高效,整洁,提高代码的可重用性、可读性,angular引入了模块的概念module,简单的里面,模块就是讲页面代码分割成不同的独立模块。

    一个应用可以包含多个模块,各个模块包含其核心的逻辑代码,不同模块间相互独立。一个ng-app代表一个模块。

    AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数, 第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。 angular.module('myApp', []);

  5、作用域

    angular作用域是其最主要核心特征之一,通过$scope来表示。作用如下:

      a.应用的作用域是和应用的数据模型相关联的

      b.同时作用域也是表达式执行的上下文。

      c.$scope 对象是定义应用业务逻辑、控制器方法和视图属性的地方。

      d.作用域是视图和控制器之间的胶水

      e.$scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性。 

      g.$scope也有父子级之分,和面向对象的类的继承一样,子级的$scope继承父级的$scope,其中跟$scope表示为:$rootScope

      h.提供观察者以监视数据模型的变化

      i.可以将数据模型的变化通知给整个应用,甚至是系统外的组件

      j.可以进行嵌套,隔离业务功能和数据

      k.给表达式提供运算时所需的执行环境

  6、控制器

    控制器的关键词为ng-controller,其作用还是讲页面逻辑根据功能模块分割中更小模块。

    控制器是可以嵌套的,作用域也是嵌套的

    定义使用方式如下:

    var app = angular.module('模块名称', []);

    app.controller('控制器名称', function($scope) {  

      控制器内的业务逻辑代码...

     });

   7、表达式

    angular的表达式主要学习两个表达式:解析达式,关键词( $parse)、插值字符串表达式,关键词( $interpolate)

 

    a.解析达式,关键词( $parse),其结果是一个函数,也就是执行一个逻辑运算表达式

    特征:解析异常不会抛出异常

    代码实例:

      

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
    <div>
        表达式:<input type="text" ng-model="expression" placeholder="请输入表达式"/>
    </div>
    <div>
        <input type="button" value="开始运算" ng-click="calculat()"/>
    </div>
    <div>表达式运算结果:{{reult}}</div>
</body>
</html>
<script src="../Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myContro", function ($scope, $parse) {
        $scope.expression = "";
        $scope.reult = "";
        $scope.calculat = function () {
            $scope.reult = $parse($scope.expression)($scope); 
        }
    });
</script>

 

    b.插值字符串表达式,关键词( $interpolate)

       简单理解就是格式化字符串,通过{{站位字符串名称}}对字符串解析站位,然后通过关键词$interpolate返回的函数对站位字符串名称赋值,得到最终的字符串。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
    <div>
        表达式:<input type="text" ng-model="name" placeholder="请输入名称" />
    </div>
    <div>
        <input type="text"  multiple="" ng-model="textValue"/>
    </div>
    <div>预览:{{reviewReult}}</div>
</body>
</html>
<script src="../Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myContro", function ($scope, $interpolate) {
        $scope.name = "";
        $scope.textValue = "";
        $scope.reviewReult = "";

        $scope.reviewReultTemp = "{{name}},您好,{{textValue}}";
        var template = $interpolate($scope.reviewReultTemp); 
        $scope.$watch("name", function (newValue, oldValue, ) {
            if (newValue != oldValue) {
                $scope.reviewReult = template({ name: $scope.name, textValue: $scope.textValue});
            }
        });
    });
</script>

 

今天就到此为止,明天我们继续,加油!

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue.js之组件篇

下一篇:动态加载JS函数