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. makfile

    1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的编译都是通过 Makefile 来组织的, 如果没有 Makefile, 那很多项目中各种库和代码之 ...

  2. 怎么将oracle数据库的数据迁移

    打开要导出数据的PC,进入cmd界面 先进入数据库输入sqlplus,账号system密码508956.有权限的账户密码 2. create directory dir_555 as 'd:/asd1 ...

  3. 微信小程序0.11.122100版本新功能解析

    微信小程序0.11.122100版本新功能解析   新版本就不再吐槽了,整的自己跟个愤青似的.人老了,喷不动了,把机会留给年轻人吧.下午随着新版本开放,微信居然破天荒的开放了开发者论坛.我很是担心官方 ...

  4. tomcat监控

    参考:http://www.linuxidc.com/Linux/2012-11/74003.htm #!/bin/sh monitorlog=/opt/tomcat7/logs/monitor.lo ...

  5. nopcommerce之一（结构分析）

    公司的项目,基于nopcommerce开发.接触项目至今已经快一个月了,对nopcommerce这个开源框架整个结构比较熟悉了.这个框架主要要知道三个文件夹,分别是Libraries.Plugins和 ...

  6. Spring控制反转（IOC）和依赖注入（DI），再记不住就去出家！

    每次看完spring的东西感觉都理解了,但是过了一段时间就忘,可能是不常用吧,也是没理解好,这次记下来. 拿ssh框架中的action,service,dao这三层举例: 控制反转:完成一个更新用户信 ...

  7. lua 快速排序

    function partion(arr, left, right) local tmp = arr[left] while left < right do while left < ri ...

  8. 亲测——pycharm下运行第一个scrapy项目 ©seven_clear

    最近在学习scrapy,就想着用pycharm调试,但不知道怎么弄,从网上搜了很多方法,这里总结一个我试成功了的. 首先当然是安装scrapy,安装教程什么的网上一大堆,这里推荐一个详细的:http: ...

  9. Unsupported major.minor version 51.0解决方法

    jdk1.6工程中使用外部jar包中类出现:Unsupported major.minor version 51.0 问题原因:外部jar包使用jdk1.7(jdk7)编译,而使用此jar包的工程jd ...

  10. Spring 学习笔记 8. 尚硅谷_佟刚_Spring_使用外部属性文件

    1,配置数据源 (1)添加驱动 (2)编写spring配置文件 <bean id="dataSource" class="org.springframework.j ...