angular.js 例子
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 例子的更多相关文章
- Angular JS例子 ng-repeat遍历输出
首先要有Angular的插件:然后才开始遍历 :<!DOCTYPE html> <html lang="en"> <head> <meta ...
- (翻译)Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- 学习angular.js的一些笔记想法(上)
1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...
- 精通 Angular JS 第一天——Angular 之禅
简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单 ...
- [学习笔记] 七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX [转]
这是＂AngularJS - 七步从菜鸟到专家＂系列的第三篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.第二篇我们讨论了scope和 $scope 的功能. 通过这整个系列的教程 ...
- Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- activiti自定义流程之整合（二）：使用angular js整合ueditor创建表单
注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义 ...
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- angular js 指令的数据传递 及作用域数据绑定
<div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...
随机推荐
- 在windows下面配置redis集群遇到的一些坑
最近工作不忙,就决定学习一下redis.因为一直在windows下工作,不会linux,没办法就选择在windows下配置redis. windows下配置redis集群的文章有很多,比如:http: ...
- SQL Server 集合处理
UNION ALL 返回两个结果集中所有的行,返回结果集中会存在重复行 UNION 返回两个结果集中去重的行,返回结果集中无重复行 INTERSECT 返回两个结果集都有的行,返回结果集中无重复行 E ...
- DOCTYPE的详细图解
之前有一次写代码的时候忘记写了<!DOCTYPE html> 导致样式的效果一直有点问题,查了很久才发现时候这个的锅.之后自己详细的来查找了DOCTYPE的作用. 在目前,基本上都是采用浏 ...
- Forwards on Weibo (30)
BFS,题意比较难懂,是求离query L层的总共人数 #include <stdio.h> #include <string.h> #include <iostream ...
- java访问ftp的一些操作
通过java代码来访问ftp服务器,进行下载操作
- [django]在virtualenv下安装的第三方库的使用方法
在virtualenv下安装的第三方库,例如south, requests等,如果想在django中使用,需要先将库添加到settings.py的INSTALLED_APPS中, 以south, re ...
- Ubuntu MYSQL和Windows MYSQL （非C盘安装）
1.Ubuntu 默认安装 Mysql 5.6版本以上: 1.查看系统是否安装mysql 数据库: sudo netstat -tap | grep mysql 如果安装了,就查看一下版本命令: my ...
- 《uml大战需求分析》阅读笔记05
<uml大战需求分析>阅读笔记05 这次我主要阅读了这本书的第九十章,通过看这章的知识了解了不少的知识开发某系统的重要前提是:这个系统有谁在用?这些人通过这个系统能做什么事? 一般搞清楚这 ...
- js原生实现选项卡功能
选项卡在js中是一个重要的知识点.他没有那么难,但在工作中却有重要的位置.几乎在每一个网站都能看到选项卡的实例.所以今天写一下选项卡的实现. 我们设想有三个按钮分别来控制三个盒子当我们点击当前的按钮的 ...
- 【分块打表】bzoj1026 [SCOI2009]windy数
#include<cstdio> using namespace std; #define BN 380000 const int table[]={0,79595,158824,2021 ...