angular.js是一个前端的MVC框架，12年的时候曾近在一个portal平台的项目中使用过。

下面给出一个angular.js的典型例子，涵盖一些基础的知识点，用以复习备忘：

<html ng-app = "myapp" >

<head>

  <script src="angular.js"></script>

</head>

<!--ng-controller 定义body内使用该控制器 -->

<body ng-controller="userlist">

<div class="container-fluid">

  <div class="row-fluid">

    <div class="span2">

      <!--ng-model 定义数据模型 -->

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

    </div>

    <div class="span10">

      <ul>

        <!--filter 实现过滤 -->

        <li ng-repeat="user in users | filter:key">

          <user name = 'fredric'></user>

        </li>

      </ul>

       </div>

  </div>

</div>

<script>

//使用模块

var app = angular.module("myapp", []);

//自定义指令

app.directive('user', function() {

   var directive = {};

   directive.restrict = 'E';

   directive.template = "name: <b>{{user.name}}</b> , password: <b>{{user.password}}</b>";

   return directive;

});

//定义服务

app.factory('encrypt', function() {

   var factory = {};

   factory.encrypt01 = function(password) {

      return '***********';

   }

   return factory;

}); 

//定义控制器

app.controller("userlist", function($scope, $http, encrypt) {

$http.get("http://localhost:3000/test")

    .success(function(response) {

    //使用服务

    for(var i = 0; i < response.length; i++){

        response[i].password = encrypt.encrypt01(response[i].password);

    } 

    $scope.users = response;

    });

});

 </script>

</body>

</html>

总结：

我认为用面向对象的工程来理解angular.js会更加容易：

　　ng-app:定义模块化，其中value和constent定义这个模块的全局变量，在module方法里描述这个模块的依赖（包含哪些服务、控制器等）；

　　ng-controller:描述这个模块中的不同的类，controller本身类似这个类的构造函数，ng-model是这个类的成员，$scope可以理解为this指针；

　　ng-directive:理解为UI widget；

　　service:不同类（controller）之间的公共方法，类似utils模块；

　　html:原本的html变为了视图，通过model即指令，呈现出模板的概念；

其他诸如filter\route等，我觉得都可以理解成为一些小的特性库，对整个angular.js的架构无伤大雅。

angular.js 例子的更多相关文章

  1. Angular JS例子 ng-repeat遍历输出

    首先要有Angular的插件:然后才开始遍历 :<!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

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

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

  4. 精通 Angular JS 第一天——Angular 之禅

    简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单 ...

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

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

  6. Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  7. activiti自定义流程之整合（二）：使用angular js整合ueditor创建表单

    注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义 ...

  8. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  9. angular js 指令的数据传递 及作用域数据绑定

    <div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...

随机推荐

  1. Core文件作用、设置及用法

    http://blog.csdn.net/lanmolei814/article/details/45201693 ====================================== 1.C ...

  2. Java 第27章 JDBC

    JDBC 模版 JDBC 的工作原理 JDBC API 提供者:Sun公司 内容:供程序员调用的接口与类,集成在java.sql 和javax.sql 包中,如: DriverManager 类 Co ...

  3. Web系统大规模并发——电商秒杀与抢购 【转】

    电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对于Web系统是一个巨大的考验.当一个Web系统,在一秒钟内收到数以万计甚至更多请求时,系统的优化和稳定至关重要.这次我们 ...

  4. Microsoft.Office.Interop.Excel 程序集引用 ，Microsoft.Office.Interop.Excel.ApplicationClass 无法嵌入互操作类型

    using Microsoft.Office.Interop.Excel   添加程序集引用 方法:在引用--程序集--扩展中,添加引用Microsoft.Office.Interop.Excel,此 ...

  5. Bootstrap 3 简介

    Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first pr ...

  6. 算法入门笔记------------Day3

    主要是复习前面的基本内容,以及函数的概念 组合数 #include<stdio.h> int f(int n) { int m=1; for(int i=1;i<=n;i++) m* ...

  7. 洛谷P1330 封锁阳光大学

    题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...

  8. javascript练习-子类调用父类的构造函数和方法

    function NonNullSet(){ Set.apply(this,arguments); } NonNullSet.prototype = inherit(Set.prototype); N ...

  9. 仿QQ列表左滑删除

    一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...

  10. Windows下Oracle安装图解----oracle-win-64-11g 详细安装步骤

    一. Oracle 下载 官方下地址 http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htm ...