开始系统学习一下angular!首先是hello world。根据官网给出的例子，我们一下做出下面这个东西：

  1. <!DOCTYPE html>
  2. <html ng-app>
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <script src="angular.js"></script>
  7.         <script>
  8.             function aaaCtrl($scope) {
  9.                 $scope.name = "World"
  10.             }
  11.         </script>
  12.     </head>
  13.     <body ng-controller="aaaCtrl">
  14.         <h1>Hello {{name}}!</h1>
  15.     </body>
  16. </html>

这里要注意三个地方：

  • 必须指定ng-app，如果页面上只有一个应用，可以匿名
  • 根据ng-controller划分ＶＭ的作用域范围
  • 如果应用是匿名的，那么可以直接在全局作用域下定义控制器。控制器为一个函数，用于生成VM, 要求函数名必须以Ctrl结束，并且它的第一个参数必须叫做$scope，否则报错，因为它是基于静态编译，取其toString()来注入各种服务与处理依赖关系。

但上面这种方式基本不可能用于生产环境，我们看下面的例子：

  1. <!DOCTYPE html>
  2. <html ng-app="test">
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <script src="angular.js"></script>
  7.           <script>
  8.             angular.module("test",[]).controller("aaaCtrl",function($scope){
  9.                 $scope.name = "World"
  10.             })
  11.         </script>
  12.     </head>
  13.     <body ng-controller="aaaCtrl">
  14.          <h1>Hello {{name}}!</h1>
  15.     </body>
  16. </html>

这时控制器可以随便命名，但第一个参数还是要叫$scope

这是输出结果，其中最重要的是{{}}插值表达式。

{{}}插值表达式相当于knockout的text绑定或avalon的ms-text绑定，当然avalon也可以直接用{{}}插值表达式。它是用于填空文本，当我们要填空HTML时，就要用到另一种绑定了，这在knockout可以用html绑定，avalon可以用{{xxx|html}}或ms-html绑定。在angular, ng-bind-html好像不能用了(看评论，是出ＢＵＧ了，但至今还没有修复好，此绑定会删提所有内联事件与script标签)，但可以用ng-bind-html-unsafe。此外还有一个ng-bind, 它的效果同{{}} 插值表达式。但对于HTML绑定，它都依赖于某一个元素节点，不能做到avalon的{{xxx|html}}的效果。我们可以在这里看实时运行效果，点我

pw:ruby

  1. <!DOCTYPE html>
  2. <html ng-app="test">
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <script src="angular.js"></script>
  7.         <script>
  8.             angular.module("test", []).controller("aaaCtrl", function($scope) {
  9.                 $scope.xxx = "<strong>dddd</strong>"
  10.             })
  11.         </script>
  12.     </head>
  13.     <body ng-controller="aaaCtrl">
  14.         1<p>{{xxx}}</p>
  15.         2<p ng-bind-html-unsafe="xxx"></p>
  16.         3<p ng-bind-html="xxx"></p>
  17.         4<p ng-bind="xxx"></p>
  18.         <hr/>
  19.     </body>
  20. </html>

循环渲染一组数组

  1. <!DOCTYPE html>
  2. <html ng-app="test">
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <script src="angular.js"></script>
  7.         <script>
  8.         //angular会对函数进行静态编译，但那些参数可能被压缩掉，
  9.         //因此我们需要在函数前添加相关的服务名,这里不能直接用setTimeout，要用$timeout服务，
  10.         //总之angular这样的隐性知识非常多，是目前最难上手的框架，自己制头造了许多概念
  11.             angular.module("test", []).controller("aaaCtrl", ["$scope", "$timeout", function($scope, $timeout) {
  12.                     $scope.friends = [{name: 'John', age: 25}, {name: 'Mary', age: 28}, {name: "Nasami", age: 30}]
  13.                     $timeout(function() {
  14.                         $scope.friends.push({name: "add", age: 10})
  15.                     }, 1000)
  16.             }])
  17.             //如果不担心被压缩可以这样
  18.             //angular.module("test", []).controller("aaaCtrl", function($scope, $timeout) {
  19.             //    $scope.friends = [{name: 'John', age: 25}, {name: 'Mary', age: 28}, {name: "Nasami", age: 30}]
  20.             //    $timeout(function() {
  21.             //        $scope.friends.push({name: "add", age: 10})
  22.             //    }, 1000)
  23.             //})
  24.  
  25.         </script>
  26.     </head>
  27.     <body ng-controller="aaaCtrl">
  28.         I have {{friends.length}} friends. They are:
  29.         <ul>
  30.             <li ng-repeat="friend in friends">
  31.                 [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
  32.             </li>
  33.         </ul>
  34.     </body>
  35. </html>

如果不想用$timeout服务，可以这样写

  1.  
  2. <!DOCTYPE html>
  3. <html ng-app="test">
  4.     <head>
  5.         <title></title>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.         <script src="angular.js"></script>
  8.         <script>
  9.             var a
  10.             angular.module("test", []).controller("aaaCtrl", ["$scope", "$timeout", function($scope, $timeout) {
  11.                     $scope.friends = [{name: 'John', age: 25}, {name: 'Mary', age: 28}, {name: "Nasami", age: 30}]
  12.                     a = $scope
  13.                 }])
  14.             setTimeout(function() {
  15.                 a.friends.push({name: "dsfs", age: 44})
  16.                 a.$digest()//这个不能漏
  17.             }, 1000)
  18.  
  19.         </script>
  20.     </head>
  21.     <body ng-controller="aaaCtrl">
  22.         I have {{friends.length}} friends. They are:
  23.         <ul>
  24.             <li ng-repeat="friend in friends">
  25.                 [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
  26.             </li>
  27.         </ul>
  28.     </body>
  29. </html>

如果用avalon是这样实现的 

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <title></title>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.         <script src="avalon.js"></script>
  8.         <script>
  9.             var a = avalon.define("aaa", function(vm) {
  10.                 vm.friends = [{name: 'John', age: 25}, {name: 'Mary', age: 28}, {name: "Nasami", age: 30}]
  11.             })
  12.             setTimeout(function() {
  13.                 a.friends.push({name: "dsfs", age: 44})
  14.             }, 1000)
  15.  
  16.         </script>
  17.     </head>
  18.     <body ms-controller="aaa">
  19.         I have {{friends.length}} friends. They are:
  20.         <ul ms-each-friend="friends">
  21.             <li >
  22.                 [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
  23.             </li>
  24.         </ul>
  25.     </body>
  26. </html>

事件绑定

  1. <!DOCTYPE html>
  2. <html ng-app="test">
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <script src="angular.js"></script>
  7.         <script>
  8.             angular.module("test", []).controller("SpicyCtrl", function($scope) {
  9.                 $scope.spice = 'very';
  10.                 $scope.chiliSpicy = function() {
  11.                     $scope.spice = 'chili';
  12.                 }
  13.                 $scope.jalapenoSpicy = function() {
  14.                     $scope.spice = 'jalape?o';
  15.                 }
  16.             })
  17.         </script>
  18.     </head>
  19.  
  20.     <body ng-controller="SpicyCtrl">
  21.         <button ng-click="chiliSpicy()">Chili</button>
  22.         <button ng-click="jalapenoSpicy()">Jalape?o</button>
  23.         <p>The food is {{spice}} spicy!</p>
  24.     </body>
  25. </html>

avalon的实现与它大同小异

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <title></title>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.         <script src="avalon.js"></script>
  8.         <script>
  9.             avalon.define("SpicyCtrl", function($scope) {
  10.                 $scope.spice = 'very';
  11.                 $scope.chiliSpicy = function() {
  12.                     $scope.spice = 'chili';
  13.                 }
  14.                 $scope.jalapenoSpicy = function() {
  15.                     $scope.spice = 'jalape?o';
  16.                 }
  17.             })
  18.         </script>
  19.     </head>
  20.  
  21.     <body ms-controller="SpicyCtrl">
  22.         <button ms-click="chiliSpicy">Chili</button>
  23.         <button ms-click="jalapenoSpicy">Jalape?o</button>
  24.         <p>The food is {{spice}} spicy!</p>
  25.     </body>
  26. </html>

创建一个服务

所谓“服务”者，其实类似于jQuery插件这样的东西，但angular需要以“注入”方式来调用的这些功能（说句不好听的，因此害怕压缩让其静态编译失败，才用到这么绕的方式）

我们看如何创建一个应用。有两种方式，都需要调用angular.module实例的一些方法生成。

  1. var myModule = angular.module(‘app’,[]);
  2. //使用实例的factory方法
  3. myModule.factory(‘serviceName’,function() {
  4.        var someService;
  5.        //工厂方法体，构建someService
  6.        return someService;
  7.  
  8. });
  1. angular.module(‘app’,[],function($provide) {
  2. //使用$provide服务的factory方法
  3.        $provide.factory(‘serviceId’,function() {
  4.               var someService;
  5.               //工厂方法体，构建someService
  6.               return someService;
  7.         });
  8. });

示例：

  1.  
  2. <!DOCTYPE HTML>
  3. <html lang="zh-cn" ng-app="MainApp">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>services</title>
  7.     </head>
  8.     <body>
  9.         <div ng-controller="MyController">
  10.             <input type="text" ng-model="msg"/>
  11.             <button ng-click="saveMsg()">保存信息</button>
  12.             <ul>
  13.                 <li ng-repeat="msg in msgs">{{msg}}</li>
  14.             </ul>
  15.         </div>
  16.         <script src="angular.js" ></script>
  17.         <script type="text/javascript">
  18.             var app = angular.module("MainApp", [])
  19.             app.factory("$notify", ["$window", "$timeout", function(win, timeout) {
  20.                     var msgs = [];
  21.                     return function(msg) {
  22.                         msgs.push(msg);
  23.                         //只有等到消息条数到达３条时，才一起弹出来
  24.                         if (msgs.length == 3) {
  25.                             timeout(function() {
  26.                                 win.alert(msgs.join("\n"));
  27.                                 msgs = [];
  28.                             }, 10);
  29.                         }
  30.                     }
  31.                 }])
  32.  
  33.             app.controller("MyController",["$scope", "$notify", function($scope, $notify) {
  34.                 $scope.msgs = [];
  35.                 $scope.msg = ""
  36.                 $scope.saveMsg = function() {
  37.                     $scope.msgs.push($scope.msg);//这里的$scope可改成this
  38.                     $notify($scope.msg);
  39.                     $scope.msg = "";
  40.                 };
  41.             }]);
  42.         </script>
  43.     </body>
  44. </html>

websocket服务

  1. <!DOCTYPE HTML>
  2. <html lang="zh-cn" ng-app="MainApp">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>services</title>
  6.     </head>
  7.     <body>
  8.         <div ng-controller="MyController">
  9.             <input type="text" ng-model="msg"/>
  10.             <button ng-click="saveMsg()">保存信息</button>
  11.             <ul>
  12.                 <li ng-repeat="msg in msgs">{{msg}}</li>
  13.             </ul>
  14.         </div>
  15.         <script src="angular.js" ></script>
  16.         <script src="jquery2.02.js" ></script>
  17.         <script type="text/javascript">
  18.             var app = angular.module("MainApp", [])
  19.             app.factory("$socket", ["$window", "$timeout", function($window, $timeout) {
  20.                     return function(obj) {
  21.                         obj.open = obj.open || function() {
  22.                             console.log("open websocket")
  23.                         }
  24.                         obj.close = obj.close || function() {
  25.                             console.log("close websocket")
  26.                         }
  27.                         obj.timeout = obj.timeout || 1000
  28.                         obj.maxTime = obj.maxTime || 10
  29.                         var flag = false;
  30.                         if (flag && $window.WebSocket) {
  31.                             var wsServer = 'ws://' + document.domain + "/" + obj.url.replace(/^\//, "")
  32.                             var websocket = new WebSocket(wsServer)
  33.                             websocket.onopen = obj.open
  34.                             websocket.onclose = obj.close
  35.                             websocket.onmessage = function(e) {
  36.                                 obj.success(e.data)
  37.                             }
  38.                             websocket.onerror = function(e) {
  39.                                 obj.error(e)
  40.                             }
  41.                         }
  42.                         else {
  43.                             var success = obj.success
  44.                             delete obj.success
  45.                             var error = obj.error
  46.                             delete obj.error
  47.                             var errorTime = 0
  48.                             function callback() {
  49.                                 $.ajax(obj).done(function() {
  50.                                     success.apply(this, arguments)
  51.                                     promise = $timeout(callback, obj.timeout);
  52.                                 }).fail(function(a, b) {
  53.                                     errorTime++
  54.                                     if (errorTime > obj.maxTime) {
  55.                                         arguments[1] = "unconnect"
  56.                                     }
  57.                                     error.apply(this, arguments)
  58.                                     if (errorTime > obj.maxTime || b == "timeout") {
  59.                                         $timeout.cancel(promise)
  60.                                         obj.close()
  61.                                     } else {
  62.                                         promise = $timeout(callback, obj.timeout);
  63.                                     }
  64.                                 })
  65.                             }
  66.                             var promise = $timeout(callback, obj.timeout);
  67.                             obj.open()
  68.                         }
  69.                     }
  70.                 }])
  71.  
  72.             app.controller("MyController", ["$scope", "$socket", function($scope, $socket) {
  73.                     $scope.msgs = [];
  74.                     $scope.msg = ""
  75.                     $scope.saveMsg = function() {
  76.                         $socket({url: "/resource/region/list", success: function() {
  77.                                 console.log(arguments)
  78.                             }, error: function() {
  79.                                 console.log(arguments)
  80.                             }})
  81.                     };
  82.                 }]);
  83.         </script>
  84.     </body>
  85. </html>

更多关于websocket的东西

hello, angular的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  3. TypeScript: Angular 2 的秘密武器（译）

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

  4. angular实现统一的消息服务

    后台API返回的消息怎么显示更优雅,怎么处理才更简洁?看看这个效果怎么样? 自定义指令和服务实现 自定义指令和服务实现消息自动显示在页面的顶部,3秒之后消失 1. 显示消息 这种显示消息的方式是不是有 ...

  5. div实现自适应高度的textarea，实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  6. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  7. Angular企业级开发(4)-ngResource和REST介绍

    一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...

  8. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  9. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

  10. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

随机推荐

  1. java中四种操作（dom、sax、jdom、dom4j）xml方式详解与比较

    1)DOM(JAXP Crimson解析器)     DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特 ...

  2. 【设计模式】—— 单例模式Singleton

    前言:[模式总览]——————————by xingoo 模式意图 保证类仅有一个实例,并且可以供应用程序全局使用.为了保证这一点,就需要这个类自己创建自己的对象,并且对外有公开的调用方法. 模式结构 ...

  3. [POJ3177]Redundant Paths（双连通图，割边，桥，重边）

    题目链接:http://poj.org/problem?id=3177 和上一题一样,只是有重边. 如何解决重边的问题? 1.  构造图G时把重边也考虑进来,然后在划分边双连通分量时先把桥删去,再划分 ...

  4. JAVA的核心概念：接口（interface）

    JAVA的核心概念:接口(interface) 接口与类属于同一层次,实际上,接口是一种特殊的抽象类. 如:    interface IA{ }  public interface: 公开接口  与 ...

  5. Codeforces Round #206 (Div. 1)B(记忆化）

    这题刚开始理解错题意了 以为只能往右和下走 这题挺好的 看题解看了N久啊 二维的DP 第一维表示走到第几步 可以画一个正方形 以左上角斜着划线 第i步走的点只能是第i条线上的点 而dp的第二维 就表示 ...

  6. #include<unistd.h>头文件的理解

    1.百度百科定义 unistd.h 是 C 和 C++ 程序设计语言中提供对 POSIX 操作系统 API 的访问功能的头文件的名称.该头文件由 POSIX.1 标准(单一UNIX规范的基础)提出,故 ...

  7. H.264学习笔记之一（层次结构，NAL，SPS）

    一 H.264句法 1.1元素分层结构 H.264编码器输出的Bit流中,每个Bit都隶属于某个句法元素.句法元素被组织成有层次的结构,分别描述各个层次的信息. 图1 H.264分层结构由五层组成,分 ...

  8. HDU 5876 Sparse Graph

    Sparse Graph Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)To ...

  9. Cadence关闭StartPage的方法

    Cadence 16.5开始,打开原理图工具 Orcad Capture 时,总是会弹出startpage 页面,关闭它的方法: 解决方法如下: (1) View---Toolbar----Comma ...

  10. 关于【bootstrap】中，【tooltip】的不算bug的bug的个人看法

    先说下遇到这个问题的背景吧. 就是在页面中有个div,这个div右上角(或者其他位置)有个 × 的图标(这个图标添加tooltip工具提示),光标移到这个图标时,触发tooltip,提示“点击移除”这 ...