• AngularJS 启程


    <!DOCTYPE html>
    <html lang="en" ng-app>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <title>Title</title>
        <script type="text/javascript" src="./angular.js"></script>
    </head>
    <body>
     <input type="text" ng-model="userName"/>
     <div>您输入的内容是:<span>{{userName}}</span></div>
    </body>
    </html>
    没有js代码的第一个helloworld
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <title>Title</title>
        <script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
        <script type="text/javascript">
         $(function(){
             $("input:text").keyup(function(){
               $("span").html($(this).val());
             });
         });
          
        </script>
    </head>
    <body>
     <input type="text"/>
     <div>您输入的内容是:<span></span></div>
    </body>
    </html>
    用jq写的话

    对比上面两个页面实现同样功能,让你开始对angularjs产生兴趣。。。。。。

    一个例子入门 ng-app ,ng-controller , ng-model 指令

    var myApp = angular.module("myApp", []);
    
    (function(app){
        "use strict";
        app.controller("MyController", function($scope, $http){
            $scope.firstName='kobe';
            $scope.lastName='bryant';
            $scope.getName=function(){
                return this.firstName+'-'+this.lastName;
            }
        });
    })(myApp);
    自定义模块绑定普通作用域对象
    <html>
    <head>
        <title>angular 演示</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style>
            span{
                display:block;
            }
        </style>
    </head>
    <body ng-app="myApp">
      <div ng-controller="MyController">
       <input type="text" ng-model="firstName"/>
          <span>firstName: {{firstName}}</span>
       <input type="text" ng-model="lastName"/>
          <span>lastName:{{lastName}}</span>
          <span>{{getName()}}</span>
      </div>
    
    <script type="text/javascript" src="/statics/js/angular.js"></script>
    <script type="text/javascript" src="/statics/js/angularcontroller.js"></script>
    </body>
    </html>
    演示html页面
    如果有来生,一个人去远行,看不同的风景,感受生命的活力。。。
  • 相关阅读:
    HDU多校第六场——HDU6638 Snowy Smile(线段树区间合并)
    java
    java
    java
    java
    java
    python
    appium
    python
    python
  • 原文地址:https://www.cnblogs.com/Frank99/p/9048938.html
Copyright © 2020-2023  润新知