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 ...
随机推荐
- 第一章 jQuery基础方法回顾
jQuery即JavaScript,它是一个.js文件(官网下载).使用时须将jQuery库的声明写在HTML文档的head标签里. 章节内容: 1.选择DOM节点 2.延迟的JavaScript的执 ...
- AngularJs自定义指令详解（9） - terminal
例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- Web页面报错: Eval()、XPath() 和 Bind() 这类数据绑定方法只能在上下文中使用
可以使用string.formt来避免出错. 如: <%# Convert.ToInt32(DataBinder.Eval(Container.DataItem, "Status&qu ...
- php生成器的使用
按照php的文档说明 一个生成器函数看起来像一个普通的函数,不同的是普通函数返回一个值,而一个生成器可以yield生成许多它所需要的值. 当一个生成器被调用的时候,它返回一个可以被遍历的对象.当你遍历 ...
- 收藏的 500多个开源的Git源码
由dkhamsing发起的Open-Source iOS Apps收集了各种开源的iOS App,并进行了详细的分类,比如游戏.社交.健康.键盘.定位.多媒体.新闻.办公.安全以及小工具类等.截至目前 ...
- MyBatis-NET
http://www.codeproject.com/Articles/894127/MyBatis-NET https://mybatis.github.io/mybatis-3/
- mac 日式键盘反斜线\
日式键盘 没有反斜线\, 但是有快捷键可以输入:alt+¥ (英文模式下)
- crack.vbs病毒，优盘里所有文件全变成快捷方式
去了一趟学校打印店,用优盘copy打印了点东西,当时在打印店电脑里打开优盘的时候里面就变成了快捷方式,但没怎么在意.回来之后在自己电脑上居然也这样了.网上一搜是中了crack.vbs病毒了.格式化优盘 ...
- CAD 二次开发----- 块（一）
1.块定义与块参照两个概念 块定义类似于模具,而块参照类似于模具浇筑出来的模型,在图形中只需用块定义来保存块的实际几何组成,而仅用插入点和比例因子来存储块定义,因为块参照的几何形状与快参照完全一样,仅 ...
- python核心编程笔记
1.python的对象是通过引用传递的. 2.多元赋值: x, y = y, x