1.引导程序

使用ng-app开始引导一个程序：标记了AngularJS应用的作用域

  1. <!doctype html>
  2. <html lang="en" ng-app>

双括号绑定表达式：

  1. <p>Nothing here {{'yet' + '!'}}</p>

2.视图和模板

其核心为MVC模式

原理：在AngularJS中，一个视图是模型通过HTML模板渲染之后的映射

HTML模板：

包含ng-controller指令，和ng-repeat指令

  1. <html ng-app>
  2. <head>
  3.   ...
  4.   <script src="lib/angular/angular.js"></script>
  5.   <script src="js/controllers.js"></script>
  6. </head>
  7. <body ng-controller="PhoneListCtrl">
  8.  
  9.   <ul>
  10.     <li ng-repeat="phone in phones">
  11.       {{phone.name}}
  12.     <p>{{phone.snippet}}</p>
  13.     </li>
  14.   </ul>
  15. </body>
  16. </html>

ng-repeat的语法：对象变量 in 对象数组

模型和控制器：

$scope是作用域，为根作用域的一个后继，这里使用的是按照名称的DI。

phones即模型。

  1. function PhoneListCtrl($scope) {
  2.   $scope.phones = [
  3.     {"name": "Nexus S",
  4.      "snippet": "Fast just got faster with Nexus S."},
  5.     {"name": "Motorola XOOM? with Wi-Fi",
  6.      "snippet": "The Next, Next Generation tablet."},
  7.     {"name": "MOTOROLA XOOM?",
  8.      "snippet": "The Next, Next Generation tablet."}
  9.   ];
  10. }

AngularJS的作用域理论非常重要：

  1. 一个作用域可以视作模板、模型和控制器协同工作的粘接器。
  2. AngularJS使用作用域，同时还有模板中的信息，数据模型和控制器。
  3. 这些可以帮助模型和视图分离，但是他们两者确实是同步的！（绑定）任何对于模型的更改都会即时反映在视图上；任何在视图上的更改都会被立刻体现在模型中。

3.过滤器

页面上的条件过滤：

Search: <input ng-model="query">

  1. <ul class="phones">
  2.         <li ng-repeat="phone in phones | filter:query">
  3.           {{phone.name}}
  4.         <p>{{phone.snippet}}</p>
  5.         </li>
  6. </ul>

解释：

  • 在这段代码中，用户在输入框中输入的数据名字称作query，会立刻作为列表迭代器（phone in phones | filter:query`）其过滤器的输入。当数据模型引起迭代器输入变化的时候，迭代器可以高效得更新DOM将数据模型最新的状态反映出来。
  • 使用filter过滤器：filter函数使用query的值来创建一个只包含匹配query记录的新数组。

    ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。

    整个过程对于开发者来说都是透明的。

4.双向绑定

使用orderProp来作为一个模型绑定，其值被应用到过滤器之后用作排序

orderBy:orderProp：按照orderProp选择的属性来排序。

  1. <select ng-model="orderProp">
  2.   <option value="name">Alphabetical</option>
  3.   <option value="age">Newest</option>
  4. </select>
  5.  
  6.  
  7. <ul class="phones">
  8.   <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
  9.     {{phone.name}}
  10.     <p>{{phone.snippet}}</p>
  11.   </li>
  12. </ul>

初始化：

$scope.orderProp = 'age';

5. XHR和依赖注入

DI：$开头的，一系列的对象。如：$scope, $http。

  1. function PhoneListCtrl($scope, $http) {
  2.   $http.get('phones/phones.json').success(function(data) {
  3.     $scope.phones = data;
  4.   });
  5.  
  6.   $scope.orderProp = 'age';
  7. }

避免压缩的DI：

  1. PhoneListCtrl.$inject = ['$scope', '$http'];

另外一种方法：

  1. var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

6.链接

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

7.路由和多视图

AngularJS中应用的路由通过$routeProvider来声明，它是$route服务的提供者。

注入器：唯一的职责是载入指定的服务模块。

当应用引导时，AngularJS会创建一个注入器，我们应用后面所有依赖注入的服务都会需要它。这个注入器自己并不知道$http和$route是干什么的，实际上除非它在模块定义的时候被配置过，否则它根本都不知道这些服务的存在。注入器唯一的职责是载入指定的服务模块，在这些模块中注册所有定义的服务提供者，并且当需要时给一个指定的函数注入依赖（服务）。这些依赖通过它们的提供者"懒惰式"（需要时才加载）实例化。

提供者是提供（创建）服务实例并且对外提供API接口的对象，它可以被用来控制一个服务的创建和运行时行为。对于$route服务来说，$routeProvider对外提供了API接口，通过API接口允许你为你的应用定义路由规则。

AngularJS模块解决了从应用中删除全局状态和提供方法来配置注入器这两个问题。和AMD或者require.js这两个模块（非AngularJS的两个库）不同的是，AngularJS模块并没有试图去解决脚本加载顺序以及懒惰式脚本加载这样的问题。这些目标和AngularJS要解决的问题毫无关联，所以这些模块完全可以共存来实现各自的目标。

模块：

  1. angular.module('phonecat', []).
  2.   config(['$routeProvider', function($routeProvider) {
  3.   $routeProvider.
  4.       when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
  5.       when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
  6.       otherwise({redirectTo: '/phones'});
  7. }]);

使用$routeParams来获取URL参数：

/phone/:phoneId

  1. function PhoneDetailCtrl($scope, $routeParams) {
  2.   $scope.phoneId = $routeParams.phoneId;
  3. }

使用nv-view来作为母版页:

<div ng-view></div>

8.事件处理器

  1. $scope.setImage = function(imageUrl) {
  2.     $scope.mainImageUrl = imageUrl;
  3. }

使用ng-click来绑定函数（事件处理）：

  1. <ul class="phone-thumbs">
  2.   <li ng-repeat="img in phone.images">
  3.     <img ng-src="{{img}}" ng-click="setImage(img)">
  4.   </li>
  5. </ul>

Angular JS笔记的更多相关文章

  1. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  2. 秒味课堂Angular js笔记------指令

    1.属性指令 angularjs样式相关指令: ng-class ng-style ng-href ng-src ng-attr-(suffix) ng-bind ng-cloak  没解析完之前标签 ...

  3. 秒味课堂Angular js笔记------过滤器

    不同过滤器的小demo. currency number uppercase json limitTo date orderBy filter <script> var filterMy ...

  4. 秒味课堂Angular js笔记------$scope.$watch和$scope.$apply

    $scope.$watch(watchFn , watchAction , deepWatch) 其中,watchFn是带有angular表达式或函数字符串: watchAction是一个函数或者表达 ...

  5. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  6. 学习angular.js的一些笔记想法(上)

    1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...

  7. [学习笔记] 七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX [转]

    这是＂AngularJS - 七步从菜鸟到专家＂系列的第三篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.第二篇我们讨论了scope和 $scope 的功能. 通过这整个系列的教程 ...

  8. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

  9. 关于Angular.js Routing 的学习笔记(实现单页应用)

    最近开始学习angular.js,发现angular.js确实很方便,也很强大.在看到 AngularJS Routing and Multiple Views 这一部分的时候,有点乱.现在通过记录一 ...

随机推荐

  1. java课后作业5

    [问题]随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 设计思路: 1.申请一个长度为10的数组 2.计算机随机生成10个数,并赋给数组 3. ...

  2. Swift - 多行文本输入框(UITextView)

    1,多行文本控件的创建 1 2 3 4 let textview = UITextView(frame:CGRect(x:10, y:100, width:200, height:100)) text ...

  3. hdu 2476 String Painter

    第一道区间dp题,感觉题意不是很好理解 题意:一次可以转换某一个位置的字符,或是一串连续的字符,举第一个例子zzzzzfzzzzz 1:aaaaaaaaaaa 2: abbbbbbbbba 3: ab ...

  4. Android Attr -- Understanding Android Custom Attributes

    原文:http://androidbook.com/item/4169

  5. 图结构练习——最小生成树（prim算法(普里姆)）

      图结构练习——最小生成树 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述  有n个城市,其中有些城市之间可以修建公路,修建不同 ...

  6. SSH入门简单搭建例子

    因为公司涉及项目使用SSH,为了解SSH搭建方式和运作原理,就自己搭建了一个. 采用尽量以最少的JAR包,搭建一个简单的struts2+spring+hibernate环境,希望像我这样的入门者都能理 ...

  7. Ajax 的 GET 和 POST 模式

    Ajax 异步请求数据的方式有两种:GET 和 POST. 如果是 GET 模式,则直接将数据放置到异步请求的 URL 地址中,而 send() 方法不发送任何数据: var queryString ...

  8. SPOJ220 Relevant Phrases of Annihilation(后缀数组)

    引用罗穗骞论文中的话: 先将n 个字符串连起来,中间用不相同的且没有出现在字符串中的字符隔开,求后缀数组.然后二分答案,再将后缀分组.判断的时候,要看是否有一组后缀在每个原来的字符串中至少出现两次,并 ...

  9. .NET Framework 4 与 .NET Framework 4 Client Profile

    今天碰到的一个问题和Client Profile相关的.问题是这样的:一个WPF工程,需要引用另外几个.NET的assembly, 在WPF工程中添加了对这几个assembly的引用,并在程序中可以添 ...

  10. 1-01Sql Sever 2008的安装

    Sql Sever 2008对计算机的配置要求: 1:处理器:最低1.4Ghz的处理器,建议使用2.0GHz或更高的处理器  . 2:内存:最小512MB, 建议使用1GB或更高的处理器. 3:磁盘容 ...