• 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访问即可

  • 相关阅读:
    修改浏览器滚动条样式
    js实现无缝轮播
    JS (canvas) 两个小球碰撞
    js里div随着鼠标一起移动
    js的动态加载、缓存、更新以及复用
    js阻止事件冒泡的两种方法
    核心DOM和html DOM的区别
    JavaScript 事件流、事件处理程序及事件对象总结
    css3 实现飞入由小变大
    简单手写js轮播
  • 原文地址:https://www.cnblogs.com/helloweworld/p/4123741.html
Copyright © 2020-2023  润新知