2016 年 3 月 – 微风的网络日志

基本示例

index.html

<!-- 本段示例代码来自 AngularJS 官方站点 angularjs.org -->
<!doctype html>
<!-- ng-app 表示在当前区域内启用 AngularJS -->
<html ng-app>
  <head>
    <!-- 载入 AngularJS 文件 -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <!-- ng-model 表示当前控件与指定 model 关联。控件变更时，model 也会改变，反之亦然 -->
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <!-- {{ }} 用于绑定 model。当 model 的值改变，此处的显示也会改变  -->
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

<!doctype html>

<head>

</head>

<body>

<div>

<hr>

<h1>Hello {{yourName}}!</h1>

</div>

</body>

</html>

使用控件

index.html

<!doctype html>
<html ng-app="todoApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <!-- 业务逻辑依然通过 JavaScript 实现 -->
    <script src="todo.js"></script>
    <link rel="stylesheet" href="todo.css">
  </head>
  <body>
    <h2>Todo</h2>
    <!-- 该 div 的行为将通过 TodoListController 类控制 -->
    <div ng-controller="TodoListController as todoList">
      <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
      <!-- ng-click 定义了点击时将调用哪个方法 -->
      [ <a href="" ng-click="todoList.archive()">archive</a> ]
      <ul class="unstyled">
        <!-- ng-repeat 可自动遍历并向 DOM 添加元素 -->
        <li ng-repeat="todo in todoList.todos">
          <label class="checkbox">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
          </label>
        </li>
      </ul>
      <!-- 点击按钮时将调用 addTodo() -->
      <form ng-submit="todoList.addTodo()">
        <input type="text" ng-model="todoList.todoText"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
    </div>
  </body>
</html>

<!doctype html>

<head>

</head>

<body>

<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>

[ <a href="" ng-click="todoList.archive()">archive</a> ]

</label>

</li>

</ul>

<input type="text" ng-model="todoList.todoText" size="30"

placeholder="add new todo here">

</form>

</div>

</body>

</html>

todo.js

angular.module('todoApp', [])
  .controller('TodoListController', function() {
    var todoList = this;
    // 默认添加两条条目
    todoList.todos = [
      {text:'learn angular', done:true},
      {text:'build an angular app', done:false}];
 
    todoList.addTodo = function() {
      // 借助 Array.push() 插入条目
      todoList.todos.push({text:todoList.todoText, done:false});
      todoList.todoText = '';
    };
 
    todoList.remaining = function() {
      var count = 0;
      angular.forEach(todoList.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };
 
    todoList.archive = function() {
      var oldTodos = todoList.todos;
      todoList.todos = [];
      angular.forEach(oldTodos, function(todo) {
        if (!todo.done) todoList.todos.push(todo);
      });
    };
  });

angular.module('todoApp', [])

.controller('TodoListController', function() {

var todoList = this;

// 默认添加两条条目

todoList.todos = [

{text:'learn angular', done:true},

{text:'build an angular app', done:false}];

todoList.addTodo = function() {

// 借助 Array.push() 插入条目

todoList.todos.push({text:todoList.todoText, done:false});

todoList.todoText = '';

};

todoList.remaining = function() {

var count = 0;

angular.forEach(todoList.todos, function(todo) {

count += todo.done ? 0 : 1;

});

return count;

};

todoList.archive = function() {

var oldTodos = todoList.todos;

todoList.todos = [];

angular.forEach(oldTodos, function(todo) {

if (!todo.done) todoList.todos.push(todo);

});

};

});

todo.css

.done-true {
  text-decoration: line-through;
  color: grey;
}

.done-true {

text-decoration: line-through;

color: grey;

}

未完待续

说明：
XML 1.0 的合法字符如下：

Char::= #x9 | #xA | #xD | [#x20-#xD7FF] | [#xE000-#xFFFD] | [#x10000-#x10FFFF] /* any Unicode character, excluding the surrogate blocks, FFFE, And FFFF. */

例如，.NET 框架中的 SQLDataAdapter.Fill() 将自动将 XML 1.0 不支持的 Unicode 字符转换为 HTML 字符（如 #xB 等），因此，在这类场景中，应当首先过滤非法字符，否则 XSL 等可能会无法正确处理由 XmlDocument.LoadXml() 得到的 XML。
另，改用 XML 1.1 也是一种解决方案，XML 1.1 的非法字符仅有 NUL (x00)、xFFFE 与 xFFFF 这三个。

用于匹配 XML 1.0 非法字符的正则表达式模式如下：

(([0-8|B|C|E-Z])|([0-1][0-9A-Z])|(D[8-9|A-F]..)|(FFFE|FFFF)|([1-9A-F][1-9|A-F]....)|(.{7,}));

1	(([0-8\|B\|C\|E-Z])\|([0-1][0-9A-Z])\|(D[8-9\|A-F]..)\|(FFFE\|FFFF)\|([1-9A-F][1-9\|A-F]....)\|(.{7,}));

VB.NET 代码示例：

Public Function RemoveInvalidXmlChars(ByVal xmlString As String) As String
    If Not xmlString Is Nothing Then
        Return Regex.Replace(xmlString, "(([0-8|B|C|E-Z])|([0-1][0-9A-Z])|(D[8-9|A-F]..)|(FFFE|FFFF)|([1-9A-F][1-9|A-F]....)|(.{7,}));", String.Empty)
    Else
        Return xmlString
    End If
End Function

Public Function RemoveInvalidXmlChars(ByVal xmlString As String) As String

If Not xmlString Is Nothing Then

Return Regex.Replace(xmlString, "(([0-8|B|C|E-Z])|([0-1][0-9A-Z])|(D[8-9|A-F]..)|(FFFE|FFFF)|([1-9A-F][1-9|A-F]....)|(.{7,}));", String.Empty)

Else

Return xmlString

End If

End Function

月度归档： 2016 年 3 月

写给程序员的 AngularJS 语法快速入门

基本示例

使用控件

通过正则表达式过滤/去除 XML 1.0 的非法字符