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 ...
随机推荐
- spring security之httpSecurity 专题
37.5.2 Resolving the CsrfToken Spring Security provides CsrfTokenArgumentResolver which can automati ...
- Android Studio 报错Guest isn't online after 7 seconds 解决方案
最近使用真机模拟之后,再使用虚拟机就频繁出现这个问题; 解决步骤如下: 1.打开Android虚拟设备管理器, 2.查看Actoins栏下拉图标, 3.选择冷启动模式即可, 4.重启AVD正常;
- Android音频输入通道的底层硬件和软件开发分析
Android潜在的发展音频输入通道的软硬件分析 我们都知道耳机Mic集成在一直的那种四段耳机Mic插头是Android设备上比較经常使用.可是也会有分开的情况,比較假设在普通的PC机中装Androi ...
- elasticsearch-jdbc
jprante/elasticsearch-jdbc The Java Database Connection (JDBC) importer allows to fetch data from JD ...
- 关于javascript中的深拷贝问题
一直在尝试为javascript找一个快捷可靠的对象深拷贝的方法,昨天突发奇想,把对象push到一个空数组里,然后对改数组通过concat()或slice()进行拷贝,然后取出数组的第一个元素复制给变 ...
- Codeforces 85B. Embassy Queue【段树、馋】
标题效果: 每个人都应该申请签证必须向大使馆3种程序,而这3个步骤做的顺序是固定的.通过各种形式的手续给出多少,它需要对每个过程的处理时间,有多少人会来办理手续,什么时间来.要求的是全部人分别在大使馆 ...
- 深刻认识OpenStack
OpenStack 1 OpenStack简单介绍 Openstack archite ...
- DDD实战8_1 实现对领域中连接字符串的可配置
1.在webapi的配置文件中配置连接字符串节 2.在webapi的startup类中的Configure方法中 将工具类里面AppSetting的静态Section的值 对应上webapi的配置文件 ...
- 零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页
原文:零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页 本章将用带大家熟悉Design 4并制作简易的网页版面,也会让你了 ...
- Distinct去除重复项
之前在做权限模块时,因不同角色可能拥有相同的菜单,导致呈现在浏览器上时出现重复菜单项,所以需要在获取用户拥有菜单项时需要过滤重复项, 用到了Distinct,两个重载 public static IQ ...