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 ...
随机推荐
- 小强的HTML5移动开发之路（36）——jQuery中的DOM操作
1.查询 利用选择器查找节点 使用 html() / text() / attr() 输出节点文本和属性值. 注意:下拉列表使用 val() <html> <head> < ...
- 【codeforces 765D】Artsem and Saunders
[题目链接]:http://codeforces.com/contest/765/problem/D [题意] 给你一个函数f(x); 要让你求2个函数g[x]和h[x],使得g[h[x]] = x对 ...
- 【noip模拟】Fancy Signal Translate (暴力 + 哈希)
题目描述 FST是一名可怜的 OIer,他很强,但是经常 fst,所以 rating 一直低迷. 但是重点在于,他真的很强!他发明了一种奇特的加密方式,这种加密方式只有OIer才能破解. 这种加密方式 ...
- SharePoint 2010/2013 隐藏的速度下拉菜单列表项
SharePoint 2010/2013 隐藏的速度下拉菜单列表项 有时为了防止一些用户编辑列表项.需要隐藏下拉菜单列表项.,仅仅须要添加一个内容编辑器控件,将css代码写入其HTML ...
- laravel routes除了默认路由，其他的都无效 解决方案
按照教程.该php升级到5.5,所有是开放的扩展,默认路由进入,证明代码错误,平时不开rewrite铅 假设你其它路由,localhost/文件夹/public/index.php/home能够进去. ...
- Android能够获取到唯一的设备ID吗?
Android是否有唯一的设备ID,如果有的话,该怎样快速有效获取? Settings.Secure#ANDROID_ID 返回Android ID ,是一个64位的16进制字符串 1 2 3 imp ...
- 获取当前div中的所有div的个数和每一个div的ID and 根据屏幕分辨率计算高度
var tabs_Count=document.getElementById("tabs-panels").getElementsByTagName("div" ...
- ssm框架插入mysql数据库中文乱码问题解决
1. 检查web.xml <!-- 编码过滤器 --> <filter> <filter-name>encodingFilter</filter-n ...
- Cache coherence protocol
A cache coherence protocol facilitates a distributed cache coherency conflict resolution in a multi- ...
- win10系统应用打不开
可能有一些用户升级Win10之后遇到了应用商店.应用打不开或闪退的问题,此时可尝试通过下面的一些方法来解决. 1.点击任务栏的搜索(Cortana小娜)图标,输入Powershell,在搜索结果中右键 ...