luluzero的angularJs学习之路_angularJs示例代码
最近开始自学 angularJs这个前端MVC框架,感觉在前端实现MVC很酷有木有。哈哈哈...
先说说我对前端MVC的一个基本的理解吧(刚开始学习接触得还比较浅显,理解可能会有些不到位,还请各位大神指正)。
首先MVC中M(Model)层,即数据模型层,用于处理业务中的数据信息和存储业务中的状态信息。当Model中的数据改变后,更新后的数据需要显示在View层。在传统的后端实现MVC的框架中,通常是页面提交一个表单或者是Ajax请求给后台的Action,再由Action调用业务处理模块(Service)更改后台Model层中的数据,最后把数据返回到View层并刷新页面。然而在AngularJS中,我们可以在前端实现Model,并通过AngularJs的双向数据绑定,使Model层中的数据实时显示在View层,所有这让我们可以在前端把数据处理完之后直接提交给后台,甚至可以不需要再去刷新页面。所有,这么一来可以减少许多的代码量,大大提高了web应用的开发效率。
下面是我写的第一个AngularJS的示例:
hello.html
<!doctype html> <html ng-app="hello"> <head> <title>hello</title> <script type="text/javascript" src="javascripts/angular.min.js"></script> <script type="text/javascript" src="javascripts/hello.js"></script> </head> <body> <div ng-controller="yourname"> <label>{{you.title}}:</label> <input type="text" ng-model="you.name" placeholder="Enter a Name here"> <hr/> <h1>Hello,{{you.name}}</h1> <button ng-click="you.say()">say</button> </div> </body> </html>
hello.js
var myModule = angular.module("hello",[]); myModule.controller("yourName",['$scope', function ($scope) { $scope.you = { title:'input your name', name:'', say:function(){ alert(this.name); } }; } ]);
还有我想吐槽下...AngularJS的官网大陆竟然上不去。WTF...