网站重构——轻量化的网站架构设计三,angular restify

浏览数：37 / 时间：2015年06月09日

有趣的是angularjs可以简化前端的开发，但是可以让我们把计算都放到桌面上，而不是服务器，在某种意义上来说可以减少系统的负担。

值得注意的是，在这里我们只需要用到的是模板(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;
	    });
	});

网站重构——轻量化的网站架构设计三,angular restify,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

网站重构——轻量化的网站架构设计三,angular restify