<!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>
<!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>
对比上面两个页面实现同样功能，让你开始对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>