Blog

Blog

PHODAL

angular restify,网站重构三,angularjs前端

有趣的是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;
        });
    });

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签