• Angularjs学习——(一)


    去年就接触过AngularJS吧,只可惜那时候仅仅是跟着“老大”机械的完成了“饿了么”——一个单页面的手机App,而其中的什么原理,怎样来实现,自己也是似懂非懂,直至今天自己再次拿起来它,并一个人来研究它,原来是原理是酱紫滴~~

    1.AngularJS 是一个 JavaScript 框架,它可通过 <script> 标签添加到 HTML 页面——>只是需要在官网上下载最新的版本,并将其引入到自己的项目当中即可。官网地址:

    https://angularjs.org/

    选择好版本,将js文件引入便可,如:

    <script src="js/angular.js"></script>

    酱紫,就可以使用它了~~

    2.开始Hello 执行吧~(从简单的例子开始)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="js/angular.js"></script>
    </head>
    <body>
    
    <div ng-app="">
      <p>名字 : <input type="text" ng-model="name"></p>
      <h1>Hello {{name}}</h1>
    </div>
    
    </body>
    </html>

    效果是酱紫滴~:

    只要在文本框中输入值,在Hello后面就会出现相应的值,这也就证明了angularjs的数据绑定优势。而在这段代码之中,还有几个知识点可以拿出来单独学一下:

    ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者",也可以将它放在<body>中,这个不可以省略

    ng-model 指令把输入域的值绑定到应用程序变量 name;

    ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

    但是移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。

    3.学习模块以及控制器应用(Module、Controller

    ng-app指令定义了应用, ng-controller 定义了控制器。

    <div ng-app="myApp" ng-controller="myCtrl">
    
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);//注册myApp模块
    app.controller('myCtrl', function($scope) {//注册myCtrl控制器
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });
    </script>
  • 相关阅读:
    EasyTransaction主要源码分析
    编程哲理小故事:Tina的运动会方阵
    多维扩展点的思考与设计——解决渠道、产品增加引发的腐化问题
    分布式事务框架Seata及EasyTransaction架构的比对思考
    设计,架构,框架之间是什么关系?
    你知道如何画好一幅架构图么?
    学会分享痛苦
    建立你自己的博客
    使用正确的工具软件
    掌握主动权
  • 原文地址:https://www.cnblogs.com/zhengyeye/p/5716108.html
Copyright © 2020-2023  润新知