JS框架~Angularjs
无意中看到anytao的项目,工作台,使用了Angularjs框架,感觉在前端表现上用户体验比较好,于是就简单看了一下,原来使用很简单,或者说,人家把代码封装的很好,以至于开发人员调用时比较简单,呵呵,使用Angularjs必须将你的html标记进行标识一下,告诉人家,我要用Angularjs来渲染页面了,事实上,Angularjs带合我们最重要的不是页面表现上,而是数据绑定上,它使HTML标记不那么死板,下面看一个DEMO就会明白了。
下面是一个页面元素绑定的例子
<html lang="en" ng-app> <body> <div ng-controller="Ctrl"> Enter name: <input type="text" ng-model="name"><br> Hello <span ng-bind="name"></span>! </div> </body> </html> //对应的JS代码如下: function Ctrl($scope) { $scope.name = 'Whirled'; }
如果不希望改变页面的html标记,也可以手动为Angularjs初始化,代码如下:
angular.element(document).ready(function () { angular.bootstrap(document); });
而且Angularjs支持对象模型,你可以很方便的使用面向对象的特性
看下面例子,是有一个对象user,user有name和last两个属性
<div ng-controller="Ctrl3"> User name: <input type="text" name="userName" ng-model="user.name" required> Last name: <input type="text" name="lastName" ng-model="user.last"> <p> 你输入的内容为: user.name:<span ng-bind="user.name"></span> user.last:<span ng-bind="user.last"></span> </p> </div> //对应的JS代码如下: function Ctrl3($scope) { $scope.user = { name: 'zhang', last: 'zhanling' }; }
对于Angularjs的引用可以直接使用下面的地址:
URL:http://code.angularjs.org/1.2.3/angular.min.js <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
对于Angularjs的API请查看
http://docs.angularjs.org/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2012-12-04 爱上MVC3系列~当Ajax.Beform不能满足我们的要求时...
2012-12-04 将不确定变为确定~MVC3的ValidateInput属性失灵了
2011-12-04 MVC中对controller的抽象