angular初步认识一

最近比较流行MVC前端框架开发,最近研究了一个框架AngularJS框架

不说那么多,先上例子,我是个代码控

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>capter1-angular</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/bootstrap-theme.css">
	<script src="../js/angular.min.js"></script>
	<script type="text/javascript">
		var model = {
			user:"Lifeng",
			items:[{
				action:"Buy Flowers",done:false
			},{
				action:"Get Shoes",done:false
			},{
				action:"Collect Tickets",done:true
			},{
				action:"Call Joe",done:false
			}]
		}

		var myApp = angular.module("myApp",[]);
		myApp.controller("MyCtrl",function($scope){
			$scope.todo = model;
		})
	</script>
</head>
<body ng-controller="MyCtrl">
	<div class="page-header">
		<h1>{{todo.user}}‘s To Do List
			<span class="label label-default">{{todo.items.length}}</span>
		</h1>

	</div>
	<div class="panel">
		<div class="input-group">
			<input type="text" class="form-control"/>
			<span class="input-group-btn">
				<button class="btn bth-default">Add</button>
			</span>
		</div>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Description</th>
					<th>Done</th>
					<th> </th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in todo.items">
					<td>{{item.action}}</td>
					<td><input  type="checkbox" ng-model="item.done" /></td>
					<td>{{item.done}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

 看到几个比较特殊的点

1.html标签中多一个ng-app="myApp"

2.body标签中多一个ng-controller="MyCtrl"

3.tr标签中多了ng-repeat="item in todo.items"

4.{{}}是取值表达式

5.script里面多了一些angular.module 以及myApp.controller等方法

1.根据AngularJS的解释是,一个文档中只有一个ng-app的属性,可以说是文档的唯一标识,当angular发现这个标识的时候,下面的文档树都要经过angular编译

2.ng-controller的指令就是作为前端处理业务的controller层

3.作为一个前端或者后端,看到这个就会想到是一个for遍历集合

4.不用说了,就是取元素的值

5.这个两个方法数据绑定和处理的业务逻辑。

这里还提一点,$scope是一个全局变量,还有就是数据双向绑定,里面用到了一个ng-model指令,这个自己也在学习中,希望以后学习中能够知道他们的原理。

下面可以看到$scope是全局,在对象上增加一个方法,可以在html元素上 直接使用这个方法,看标题栏,还有几个事情没有做的计数

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>angularJS学习</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/bootstrap-theme.css">
	<script src="../js/angular.min.js"></script>
	<script type="text/javascript">
		var model = {
			user:"Lifeng",
			items:[{
				action:"Buy Flowers",done:false
			},{
				action:"Get Shoes",done:false
			},{
				action:"Collect Tickets",done:true
			},{
				action:"Call Joe",done:false
			}]
		}

		var myApp = angular.module("myApp",[]);
		myApp.controller("MyCtrl",function($scope){
			$scope.todo = model;
			$scope.incompleteCount = function(){
				var _count = 0;
				angular.forEach($scope.todo.items,function(item){
					if(!item.done){
						_count++
					}
				});
				return _count;
			}
		})
	</script>
</head>
<body ng-controller="MyCtrl">
	<div class="page-header">
		<h1>{{todo.user}}‘s To Do List
			<span class="label label-default" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span>
		</h1>

	</div>
	<div class="panel">
		<div class="input-group">
			<input type="text" class="form-control"/>
			<span class="input-group-btn">
				<button class="btn bth-default">Add</button>
			</span>
		</div>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Description</th>
					<th>Done</th>
					<th> </th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in todo.items">
					<td>{{item.action}}</td>
					<td><input  type="checkbox" ng-model="item.done" /></td>
					<td>{{item.done}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

 

时间: 2024-11-10 01:10:51

angular初步认识一的相关文章

Angular.js初步认知

第一部分  Angular.js简介 Angular.js是一款基于JavaScript语言的框架,目的是为了克服HTML在构建应用上的不足. 注意这里说的Angular.js是框架而不是类库,类库和框架都是用来解决静态页面技术上构建动态应用的问题的,但是两者却不是一个概念. 类库: 指一些函数的集合,封装一些可复用的代码块,但是类库本身需要开发者主动调用各种方法才能实现功能,如jQuery等. 框架: 指一种特殊的,已经实现了的WEB应用,框架会根据开发者填充的具体业务逻辑来调用开发者写的代码

angular的初步使用

<!doctype html> <html lang="en"><head> <meta charset = "UTF-8"> <title>angularjs 进阶</title> <script type="text/javascript" src="js/angular.min.js"></script></head&g

Angular.js 的初步认识

MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控制器(controller),操作模型数据. <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

前言 表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式. 首先需要操作表单的模块引入这两个模块: import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 表单控件响应的几种状态 模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule 一般做表单校验及操作推荐用数据驱动的方式,好维护和理解.. 模板驱动 模板驱动:主要是依赖[(ngModel

angular smart-table组件如何定制化之初步研究

table表运用在后台管理用得频繁,一般bootstrap的class="table"就能满足样式需求以及分页需求,但是每个产品经理需求不一样,比如说分页:bootstrap分页实现是这样子的 但原型要求这样子的 被推荐angular相关table组件smart-table算是功能相当全的,学习官网地址http://lorenzofox3.github.io/smart-table-website/#section-intro 看了一下,上手可以,但是要深入了解内容较难.调研smart

青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,"青出于蓝而胜于蓝".今天,K就从下面几个方面来跟大家一起探讨一下,Vue.js到底在哪些方面更"胜于蓝". (一)简单的操作 这是K看来Vue.js最杰出的的方法,Vue.js致力于视图层的展现,这使它在与其他项目进行整合的时候会变得非常easy,这也使它更容易"嵌

优化Angular应用的性能

优化Angular应用的性能 MVVM框架的性能,其实就取决于几个因素: 监控的个数 数据变更检测与绑定的方式 索引的性能 数据的大小 数据的结构 我们要优化Angular项目的性能,也需要从这几个方面入手. 1. 减少监控值的个数 监控值的个数怎么减少呢? 考虑极端情况,在不引入Angular的时候,监控的个数是为0的,每当我们有需要绑定的数据项,就产生了监控值. 我们注意到,Angular里面使用了一种HTML模板语法来做绑定,开发业务项目非常方便,但考虑一下,这种所谓的“模板”,其实与我们

数据的双向绑定 Angular JS

接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> &

利用angular结合translate为项目实现国际化

前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎么接触过,这一个礼拜自己也对Angular基本的用法已经有了初步的了解以及熟悉,于是乎就有了这篇文章的产生.其实没我什么事,我也是主动请缨说交给我,因为年底了嘛,也没什么事,不急不忙的,一天也乐得清闲,还不给自己找点事做,而且还能在做的过程中能学到东西,何乐而不为呢!Angular已盛行一时,但请恕