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 ...
随机推荐
- TensorFlow 实现深度神经网络 —— Denoising Autoencoder
完整代码请见 models/DenoisingAutoencoder.py at master · tensorflow/models · GitHub: 1. Denoising Autoencod ...
- 设计模式<面向对象的常用七大设计原则>
面向对象设计的目标之一在于支持可维护性复用,一方面需要实现设计方案或者源码的重用,另一方面要确保系统能够易于扩展和修改,具有较好的灵活性. 常用的设计原则有七个原则: 1.单一职责原则(single ...
- java-线程-ABCABC
public class OneByOne { private Lock lock = new ReentrantLock(); private Condition conditionA = lock ...
- Windows应用程序的消息处理机制
(1)操作系统接收到应用程序的窗体消息,将消息投递到该应用程序的消息队列中. (2)应用程序在消息循环中调用GetMessage函数从消息队列中取出一条一条的消息. 取出消息后,应用程序能够对消息进行 ...
- JAVA SE回顾及思考（3）——排序算法
排序的算法是很多公司的笔试和面试题,个人感觉Java中其实无需使用这些排序方法,因为Java中已经为我们提供了很方便效率很高的sort()方法.但是不使用不能代表不需要学习这些算法,也不是仅仅为了面试 ...
- Android Studio中创建java项目
1.创建普通的android工程 2.创建一个module 3.module类型选择java library 4.填写libary和class的名字 5.生成的工程如图所示 6.然后点击Run --- ...
- VC和matlab混合开发学习
作者:朱金灿 来源:http://blog.csdn.net/clever101 第一种方式是直接调用Matlab Engine的接口.Matlab Engine 采用Client/Server的方式 ...
- Linux核心设计依据（六）该块I/O一层
块设备是能随机存取装置固定大小的数据表设备.如硬盘:字符设备(如串口和键盘)它是按照字符流进入有序进行.不同之处在于是否足够的随机存取数据--这时候,你可以随心所欲地从一个位置跳到访问设备和位置.复杂 ...
- Python 产生两个方法将不被所述多个随机数的特定范围内反复
在最近的实验中进行.通过随机切割一定比例所需要的数据这两个部分.事实上这个问题的核心是生成随机数的问题将不再重复.递归方法,首先想到的,然后我们发现Python中竟然已经提供了此方法的函数,能够直接使 ...
- VS2005 编译 Qt4.8.2库，并修正源码中的错误
从昨天开始利用VS2005对Qt4.8.2库进行编译,在编译到某个文件时,总是报错,提示VS的cl.exe和nmake.exe返回致命错误.错误罗列如下: DefaultLocalizationStr ...