AngularJS的简单使用(入门级)
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
-----------百度百科
下面做入门介绍，本篇主要以代码的形式解析。
1.在web页面引入angularJS的js文件。
可以通过官网下载，也可以在百度上搜索，建议从官网上下载。
http://www.angularjs.net.cn/这个中文网地址。上面也有相关教程。
2.代码分析
下面是copy来的例子：
<!DOCTYPE html>
<html lang="en" ng-app="todoApp"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="angular.min.js"></script> <script>
angular.module('todoApp', []) //定义模块
.controller('TodoListController', function() { //定义控制器
var todoList = this;
todoList.todos = [ //定义一些初始化的属性
{ text: 'learn AngularJS', done: true },
{ text: 'build an AngularJS app', done: false }
]; todoList.addTodo = function() { //定义方法
todoList.todos.push({ text: todoList.todoText, done: false });
todoList.todoText = '';
}; todoList.remaining = function() { //定义方法
var count = 0;
angular.forEach(todoList.todos, function(todo) { //遍历todos
count += todo.done ? 0 : 1;
});
return count;
}; todoList.archive = function() { //定义方法
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) todoList.todos.push(todo);
});
};
});
</script>
</head> <body>
<div ng-controller="TodoListController as todoList"> <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> [
<a href="" ng-click="todoList.archive"></a>
] <ul>
<li ng-repeat="todo in todoList.todos">
<lable>
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</lable>
</li>
</ul> <form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText" size="30" placeholder="请输入新的项目">
<input type="submit" value="add">
</form> </div> <div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
</body> </html>
其中ng-app是指定一个angularJS应用。
对应js代码为：angular.module("todoApp",[]);定义一个module模块
ng-controller指定一个控制器，指明该标签下所有的子元素都归该控制器管理。
对应js代码为： .controller('TodoListController', function() {});定义一个控制器
一个ng-app可以定义多个控制器。
本例是通过var todoList=this;让todoList代替了这个控制器。
通过定义todoList的属性和方法向外暴露这个控制器的可用属性和方法。
可以看见在html中是通过todoList属性的名字对其进行引用的。
其中{{}}代表数据绑定。
ng-model：表示把前台是数据绑定到控制器中，当然后台初始化有数据，也会显示在前台。
ng-submit：定义在form标签中，代码提交表单，也可以在button标签添加ng-click达到同样的效果。
ng-repeat：重复属性，会对需要遍历的元素生成对应个数的标签。
上述例子中就会生成对应todoList数目的span标签。
属性应用直接是todoList.todos。
AngularJS的简单使用(入门级)的更多相关文章
- AngularJs最简单解决跨域问题案例
AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报 分类: javascript(1) 作者:白狼 出处:http://www.mank ...
- [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架
MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...
- 对AngularJs的简单了解
一.简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得 ...
- AngularJS的简单使用
官网下载:AngularJS 路由视图需要:Angular-Route.js 基于zepto的轻量级的 JavaScript UI 库: App.js 用于开发跨平台的移动Web应用 <!DO ...
- 使用AngularJS实现简单:全选和取消全选功能
这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...
- angularjs的简单应用（一）
AngularJS是为了克服html在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. AngularJS使用了不同的方法,它尝试去 ...
- AngularJS作出简单聊天机器人
简单聊天机器人 很初级的对话框形式.以前做对话框使用js,今天尝试使用AngularJS做出来 这里直接使用自己写的JSON数据. <!DOCTYPE html> <html lan ...
- AngularJS 实现简单购物车
使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...
- Angularjs实现简单分页
一个后台中总需要一款分页,那我为了自己方便使用,实现如下效果 我把这个组件命名为tm.pagination,原因是因为起名真的太难起了.而且我网名也叫天名, TM就这样了吧.github地址https ...
随机推荐
- Tricks（四十八）—— 注释一段代码
为 if 的条件判断表达式,传一个永假的语句,来注释一段代码: # Python if False: ... ... ... # C/C++ if (false) { ... ... } 永远不要直接 ...
- Mochiweb的设计分析
http://blog.csdn.net/dp0304/article/details/6994435 Web服务器的基本工作大致分3步: 接收HTTP请求: 处理HTTP请求,生成响应内容: 发送响 ...
- BZOJ 2330 - 差分约束系统
传送门 题目分析 差分约束 这里做个简单介绍:形如\(x_i - x_j >= d\)的不等式,可以联想到我们求最短路时\(d_v <= d_u + len\),则上式可以变形为\(x_i ...
- 一起学Python：列表介绍
列表介绍 想一想: 前面学习的字符串可以用来存储一串信息,那么想一想,怎样存储咱们班所有同学的名字呢? 定义100个变量,每个变量存放一个学生的姓名可行吗?有更好的办法吗? 答: 列表 <1&g ...
- 【t006】三角形分形描绘问题
Time Limit: 1 second Memory Limit: 50 MB [问题描述] 分形是以多种概念和方法相互冲击融合为特征的图形.分形所呈现的无穷玄机和美感引发人们去探索.分形使人们觉悟 ...
- SQLite做为本地缓存的应用需要注意的地方
原文:SQLite做为本地缓存的应用需要注意的地方 今天看到了园友陆敏计的一篇文章<<C#数据本地存储方案之SQLite>>, 写到了SQLite的诸多优点,尤其适应于本地数据 ...
- gradle命令学习
概述 命令学习比较枯燥,全部是例子~ gradle版本 假设你的本地gradle已经安装配置完成.没有安装配置的,可以参考 gradle安装 C:\Users\yueling.DANGDANG> ...
- nginx 和 tomcat 生产环境配置 建议和方法
参考 以下内容: http://blog.csdn.net/lifetragedy/article/details/7708724 一. nginx参数调优 worker_processes 3; ...
- linux 网卡配置文件详解
配置文件位置:/etc/sysconfig/network-scripts/ifcfg-eth0 1. DEVICE=eth0 网卡的名字 2. HWADDR=00:0c:29:90:89:d9 HW ...
- 【33.00%】【vijos P1002】过河
描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数轴上 ...