web(三)--angularjs

下面的文件在同一目录下.

myTodoApp.js
myTodoCtrl.js
index.py
angularjs_test.html

index.py中内容:

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.write("Hello, world, this is tornado test!")

class StoryHandler(tornado.web.RequestHandler):
    def get(self, story_id):
        self.write("You requested the story " + story_id)

class TemplateHandler(tornado.web.RequestHandler):
    def get(self):
        items = ["Item 1", "Item 2", "Item 3"]
        self.render("template.html", title="My title", items=items)

class AngularjsTestHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("angularjs_test.html")

application = tornado.web.Application([
    (r"/", MainHandler),
    (r"/index.py", MainHandler),
    #(r"/story/([0-9]+)", StoryHandler),
    (r"/template", TemplateHandler),
    (r"/index.py/template", TemplateHandler),
    (r"/index.py/angularjs_test", AngularjsTestHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

  

angularjs_test.html中内容:

<!DOCTYPE html>
<html>
<body>

<div ng-app="myTodoApp" ng-controller="myTodoCtrl">

<h2>我的笔记</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>

<p>剩下的字符数: <span ng-bind="left()"></span></p>

</div>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<script src="myTodoApp.js"></script>
<script src="myTodoCtrl.js"></script>

</body>
</html>
myTodoApp.js中内容
var app = angular.module("myTodoApp", []);

  

myTodoCtrl.js中内容

app.controller("myTodoCtrl", function($scope) {
    $scope.message = "";
    $scope.left  = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message="";};
    $scope.save  = function() {$scope.message="";};
});

  

通过http://localhost/angularjs_test访问即可

时间: 2024-08-08 16:02:37

web(三)--angularjs的相关文章

快速搭建Web环境 Angularjs + Express3 + Bootstrap3

快速搭建Web环境 Angularjs + Express3 + Bootstrap3 AngularJS体验式编程系列文章, 将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多 的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后 台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代

[angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage 布局页的引用 <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script&g

web三种跨域请求数据方法

web三种跨域请求数据方法 以下测试代码使用php,浏览器测试使用IE9,chrome,firefox,safari <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.

Java Web(三) 会话机制,Cookie和Session详解

一.会话机制 Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份. 由于HTTP协议是无状态的,而出于种种考虑也不希望使之成为有状态的,因此,后面两种方案就成为现实的选择.具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案.同时我们也看到,由于采用服务器端保持状态的方案在客户端也需要保存一个标识,所

篇章三:[AngularJS] 使用AngularCSS動態載入CSS

前言 使用AngularAMD動態載入Controller 使用AngularAMD動態載入Service 上列兩篇文章裡,介紹了如何如何使用AngularAMD來動態載入Controller與Service.本篇文章以此為基礎,介紹如何使用AngularCSS來動態載入CSS,讓專案功能更加模組化,增加開發與維護的工作效率.主要為自己留個紀錄,也希望能幫助到有需要的開發人員. AngularCSS 安裝 本篇文章以「使用AngularAMD動態載入Service」的範例程式為基礎,為其附加動態

Java Web(三) Servlet详解

什么是Servlet? servlet 是运行在 Web 服务器中的Java 程序.servlet 通常通过 HTTP(超文本传输协议)接收和响应来自 Web 客户端的请求.Java Web应用程序中所有的请求-响应都是由Servlet完成. Servlet的工作流程 浏览器与服务器之间的请求和响应都是遵循HTTP协议的(上一篇有介绍HTTP).Tomcat会接受并解析HTTP请求文本,然后封装成HttpServletRequest对象,所有的HTTP头数据都可以通过request相应的方法查询

ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework(官方教程翻译版 版本3.2.5)含学习资料

本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/  谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三.zero 模块 四.其他(中文翻译资源) 本篇是第一部分的第一篇. 第一部分分三篇 1-1 手把手引进门 1-2 进阶 1-3 杂项 (相关理论知识) 第一篇含两个步骤. 1-1-1 ASP.NET Core & Entity Framework Core 后端(内核)含两篇 ( 第一篇链接    

AngularJS开发指南16:AngularJS构建大型Web应用详解

AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇blog,分享了如何使用AngularJS构建大型Web应用的经验.这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义. 这篇blog特别关注的是大型应用程序,作者首先给出的建议是,尽量不要让应用变得太巨大.而应该编写小型.功能专注的.模块化的部分,然后逐渐把它们组合起来,变得越来越大,

15 Highly Useful Angularjs Tools for Web Developers (转)

15 Highly Useful Angularjs Tools for Web Developers Angularjs is a new kid on coding block.This angularjs tools is especially well-suited for building one-page web apps, although certainly not limited to that. Angularjs is relatively new JavaScript f