网站重构——轻量化的网站架构设计三,angular restify
2014-03-18 09:04
239 查看
有趣的是angularjs可以简化前端的开发,但是可以让我们把计算都放到桌面上,而不是服务器,在某种意义上来说可以减少系统的负担。
值得注意的是,在这里我们只需要用到的是模板(Template)。
在DOMContentLoaded事件触发时执行angular.js脚本,运行后将会寻找含有ng-app指令的标签,该标签即定义了AngularJS应用的作用域。在html中添加ng-app属性即说明整个html都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令,如在div上添加ng-app,则AngularJS脚本仅在该div中运行。
angular json
这里用的是官网的示例,加以需要的功能。
值得注意的是,在这里我们只需要用到的是模板(Template)。
Angular JS
AngularJS是一款开源 JavaScript函式库,由Google维护,用来协助单一页面应用程式运行的。它的目标是透过MVC模式 (MVC) 功能增强基于浏览器的应用,使开发和测试变得更加容易。函式库读取包含附加自定义(标签属性)的HTML, 遵从这些自定义属性中的指令,并将页面中的输入或输出与由JavaScript变量表示的模型绑定起来。这些JavaScript变量的值可以手工设置,或者从静态或动态JSON资源中获取。安装Angularjs
这里还没有整合到nodejs中,所以还是用这个<script src="js/angular.min.js"></script>
ng-app
使用ng-app指令告诉Angular应该管理DOM中的哪一部分,使用ng-app申明Angular的边界在DOMContentLoaded事件触发时执行angular.js脚本,运行后将会寻找含有ng-app指令的标签,该标签即定义了AngularJS应用的作用域。在html中添加ng-app属性即说明整个html都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令,如在div上添加ng-app,则AngularJS脚本仅在该div中运行。
ng-controller
申明控制器,把对象或基本数据设置到$scope对象上angular json
<!doctype html> <html lang="en" ng-app="blogposts"> <head> <meta charset="utf-8"> <title>Phodal's New Homepage</title> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> </head> <body ng-controller="postlistCtrl"> <div class="container-fluid"> <div class="row-fluid"> <div class="span10"> <ul class="posts"> {{lengths}} <article ng-repeat="post in posts"> <h1>{{post.title}}</h1> <p>{{post.description}}</p> </article> </ul> </div> </div> </div> </body> </html>
这里用的是官网的示例,加以需要的功能。
var blogposts = angular.module('blogposts', []); blogposts.controller('postlistCtrl', function($scope, $http) { $http.get('data/posts.json').success(function(data) { $scope.posts = data; }); });
相关文章推荐
- 网站重构——轻量化的网站架构设计四markdown angular
- 网站重构——轻量化的网站架构设计一,使用nodejs sqlite3查询数据
- 网站重构——轻量化的网站架构设计一,使用nodejs sqlite3查询数据
- 网站重构——轻量化的网站架构设计二,使用restify生成RESTful接口
- 转:做大的艺术 - 大型网站的架构设计
- 高并发大型网站架构设计
- 可扩展、高可用、负载均衡网站架构设计方案
- 大型网站架构设计
- 高性能网站架构设计之缓存篇(4)- Redis 集群(上)
- 可扩展、高可用、负载均衡网站架构设计方案
- 高性能网站架构设计之缓存篇(1)- Redis的安装与使用
- 网站架构设计
- Web网站架构设计考虑的因素
- 1.4 Web标准的好处 - 网站重构与Web标准设计 - 学习笔记
- Web网站架构设计考虑的因素
- 高性能网站架构设计之缓存篇(6)- Redis 集群(中)
- 这几个问题解决了,怎么设计大型网站架构不再是困难
- 如果你是12306网站架构师,你会如何设计网站的软件架构和硬件系统架构?
- Redis架构之防雪崩设计:网站不宕机背后的兵法