前端相关

AngularJS学习笔记1——基础入门

angularjs 是一款前端的 MVVM 框架，目前 2.0 好像也快要发布了。
angularjs 2.0 的理念又变为了 Web 组件，与 1.x 不兼容。
于是这里就把之前 angularjs 1.x 的学习笔记整理一下，作为以后回顾吧。

相关的事例代码可以从 https://github.com/wusuopu/angularjs-practice 获取。

简单事例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <title>基本例子</title>
    <script src="/lib/angular-1.0.4.min.js"></script>
</head>
<body>
  <p>1 + 2 = {{ 1 + 2 }}</p>
  <div ng-controller="DemoController">
    <p>{{content}}</p>
  </div>
</body>
<script type="text/javascript" charset="utf-8">
  function DemoController($scope){
    $scope.content = "简单的控制器例子";
  }
</script>
</html>

以上是一个最简单的例子。

1
<html lang="en" ng-app>

html 的 ng-app 属性表明在该页面中启用 angularjs。

1
<p>1 + 2 = {{ 1 + 2 }}</p>

在页面加载完成之后 angularjs 会解析大括号内的表达式，并进行渲染。

1
2
3
<div ng-controller="DemoController">
  <p>{{content}}</p>
</div>

ng-controller 表示在该标签下定义一个控制器。一个控制器就是一个普通的 js 函数。

1
2
3
4
5
<script type="text/javascript" charset="utf-8">
  function DemoController($scope){
    $scope.content = "简单的控制器例子";
  }
</script>

这里定义 DemoController 控制器函数，并传入一个 $scope 参数，它是用于表示该控制器的上下文。