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页面

posted @ 2018-05-17 00:23 云雾散人阅读(134) 评论(0) 编辑收藏举报

刷新页面返回顶部

云雾散人

拓宽技术栈，深入技术栈，永远学徒空杯心态

AngularJS 启程

公告