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 ...
随机推荐
- SQLYog快捷键大全
Ctrl+M 创建一个新的连接 Ctrl+N 使用当前设置新建连接 Ctrl+F4 断开当前连接 对象浏览器 F5 刷新对象浏览器(默认) Ctrl+B 设置焦点于对象浏览器 SQ ...
- 新手看Mockplus
如今是一个快节奏的社会,每一天都会有无数的软件发布,每一款软件的制作过程不可避免的需要使用原型设计工具.而Mockplus就是一款原型设计软件,可以用于移动端,PC端以及WEB的原型设计.它也符合如今 ...
- Session失效之 IE iframe cookie问题(p3p)
项目中,在做门户系统时,使用了iframe嵌套展示各个子系统的页面,其中有个页面在ie8下,始终无法正常登陆. 后来项目经理分析,应该是iframe跨域导致,赶忙查看了连接地址,还真是一个跨域的页面. ...
- CS0234: 命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Html、Ajax”(是否缺少程序集引用?)
从SVN上down下来的程序,编译报了一大堆的错,发现是缺少引用,但是明明引用了,后来打开引用,发现system.web.mvc这个引用打着叹号,如图: 后来重新引用了本机的system.web.mv ...
- 封装ios静态库碰到的一些问题(三)
静态库封装好以后,就存在一个问题,静态库,模拟器的静态库何真机的静态库是分开的,那么能够合并,答案是肯定的,但是必须我们手工在终端工具下执行命令合并 lipo -create Release-ipho ...
- 【洛谷P3197】越狱
本来还想了一会dp-- 然而一看数据范围明显是数论-- 那么推一推.. 我们发现可以用总方案数减去不会越狱的方案数 那么我们考虑在长度为n的数列中填数 首先第一个位置有m种选择,后面的位置: 总方案: ...
- 利用JDBC连接MySQL并使用MySQL
driver为JDBC的驱动. url为数据库的地址. usrname和password分别为数据库的用户名和密码. Connection类用来连接MySQL. PreparedStatement类用 ...
- iOS 的文字滚动条效果的实现
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(50, 100, 300, 50)]; label.text = @"欢 ...
- 数据库中用varbinary存储二进制数据
问题描述:将图片.二进制文件内容等数据存储在数据库中,并能从数据库中取出还原为图片或文件,数据库存储二进制数据用varbinary字段. 分析:由于之前数据库中没有用过varbinary存储数据,首先 ...
- 虚拟机安装Ubuntu到U盘
这篇经验中特指系统安装到U盘,系统在U盘上,不是双系统,不会改变源系统的设置.只需在启动的时候选择启动路径,就可以从U盘启动你的系统.本文仅仅Ubuntu系统,举一反三可以按照此方法安装各种各样的系统 ...