AngularJS 基础

March 20, 2014

坑了,要看的人小心了,先看下最后面.

ng-app

ng-app 标记了 AngularJS 的作用域,含有 ng-app 的元素包住的 html 内, AngularJS 的代码才生效.

这其实不过是 google 的自我谦虚罢了,谁还会这么有病把 AngularJS 和其的框架一起用? 直接在 html 里加入

<html lang='en' ng-app>

就ok了.

另外这段代码的作用等同于在 html 加入 ng-app

<script>
    angular.element(document).ready(function() {
    angular.bootstrap(document);
    });
</script>

除非你有特殊的需求,不然搞那么罗罗嗦嗦没必要

双括号

没什么多说的,和 jinja 一样,把{{}}内的内容,当代码来执行.我还得解决AngularJS和jinja2冲突的问题 以后采用靜态页面加restful的方试,不再用jinja2返回html,就没有必要解决AngularJS和jinja2冲突的问题

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

ng 里叫模板语法.

ng-controller

逻辑放在这里.

和 ng-app 有些类似,ng-app 用来初始化,ng-controller则是指定了一个函数名,这个函数会在其作用域内,预先被执行.

ng-controller 不能嵌套,一个页面一般也就一个 C,所以可以放在 html 里

<html ng-app ng-controller="PhoneListCtrl">

扩充的html属性

AngularJS 扩充了 html 元素的属性,用来精简其代码.

ng-app 和 ng-controller 都是其扩充的属性,标准的 html 是不认识这个东西的,是非法的属性,不过 html 容许非法的属性,这就给了 AngularJS 发挥的空间.

加个属性就知道要干什么了,省得要罗嗦的写好多js代码.

ng-repeat

用来循环

<li ng-repeat="phone in phones">
      {{phone.name}}
    <p>{{phone.snippet}}</p>
</li>

和 jinja2 不同,没法用类python代码:

{%for bigzhu in bigzhus %}
...
{%endfor%}

不过确实还是 AngularJS 要更精简.

ng-model

ng-model 主要用来作VV间的数据绑定

<input ng-model="query">

实现了html的input元素value的值和ng变量的绑定,变量名就是赋值给 ng-model 的那个名字.比如这里就建立了一个 query 变量,其值与 input 的 value 保持一致

数据绑定

VC间的数据绑定

ng-controller 指定的函数有一个参数:$scope

这个参数就是 ng-controller 的 作用域,通过这个 $scope,可以实现 js 和 ng-controller 双括号代码里的数据绑定.

function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];
}

ng-repeat 里哪来的 phones ,就是用 $scope 传过去的.

VV间的数据绑定

参看 ng-model

管道

AngularJS 真BT,貌似还一定程度上借鉴了管道

<li ng-repeat="phone in phones | filter:query">

看到了没.

filter 是一个ng的内置函数过滤器,在ng模板语法里,用:来传递参数.

这一小段,就能实现根据 query 的值来过滤哪些 phones 要显示.

query 再和 input 一绑定. 有些牛了,太精简了.

再看这个:

<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">

orderBy 也是一个ng的内置函数过滤器

orderProp 是在这里定的

 <select ng-model="orderProp">
  <option value="name">Alphabetical</option>
  <option value="age">Newest</option>
</select>

ng-controller 的参数

逻辑函数 PhoneListCtrl 里的数据,改为从后台来获取时,注意其依赖注入

ng 的依赖注入,为了遵从迪米特法则,想了不少办法.

function PhoneListCtrl($scope, $http)
......

可以看到 PhoneListCtrl 增加了一个参数$http,这个就是 依赖注入.

注入器是根据参数名字来决定要注入的内容(服务),所以名字很重要.因而不能随意用压缩js的工具,因为会改变名字.(解决AngularJS依赖注入与JS压缩冲突的问题)

$http注入的内容是用来发起一个 HTTP 请求的工具,不用太纠结于这个.

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = 'age';
}

这样就从后台把数据取过来显示到前台了,ng会处理好js的运行次序和导步及显示问题.

06

ng-src

一个新的 ng 属性,看来以后会不停的学很多ng属性.

......
<img ng-src="{{phone.imageUrl}}">
......

用ng变量来给img赋值的时候用到,为什么不像 jinja2 那样,直接对 src 赋值呢?

因为html是先加载,js后加载,ng是用js来赋值,和jinja那样在后台什么都弄好了,再扔给浏览器不同.

如果这样做,对浏览器来说,先收到的就是这样

......
<img src="{{phone.imageUrl}}">
......

根据 src="{{phone.imageUrl}}"来找图片,必定会向http://localhost:8000/app/{{phone.imageUrl}}发起请求,程现给用户一个报错.ng-src实现到后面再来给 src 赋值就ok了.

07

路由

前6章看下来,还比较顺,怎么第7章开始反人类了,这是人的思维么?

java 的味道太重了,我不想学了.

暂停!!!!!!!味道不对,我去看看 CoffeeScript 和 spine.js 如何.


comments powered by Disqus