AspNet技术

.Net平台 + C#语言 + Microsoft SQL Server 开发互联网之web应用!

AngularJs应用

引用angularjs文件

AngularJS 应用组成如下:
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

ng-app定义angularjs应用程序
ng-model指令把输入的元素值绑定到应用程序
ng-bind指令把应用程序变量值绑定到html元素上
ng-init指令是初始化应用程序变量的值

{{表达式}}标记是AngularJS的数据绑定,指令是内部可以是表达式,过滤器,变量等
{{expression}}表达式把数据绑定到html,这与ng-bind指令有异曲同工之妙,很像JavaScript 表达式:它们可以包含文字、运算符和变量,将在表达式书写的位置"输出"数据。

AngularJS 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-,允许你自定义指令.
AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。
使用 ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。
ng-repeat 指令会重复一个 HTML 元素,绑定数据(对象数组,数组)
AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
restrict 值可以是以下几种
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用

数据绑定:ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
双向绑定:在修改输入域的值时, AngularJS 属性的值也将修改
用户验证:Email,提示信息会在 ng-show 属性返回 true 的情况下显示。
提供状态:ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
Css类应用:ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象,有可用的方法和属性。Scope 可应用在视图和控制器上。
当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递,当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性,scope 是模型,scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

AngularJS 过滤器可用于转换数据:
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

AngularJS 内建了30 多个服务。
有个 $location 服务,它可以返回当前页面的 URL 地址
$http是请求服务器数据时可以用
$timeout
$interval
$route
$routeProvider
$injector
$rootScope
$scope
$apply
$digest
$watch
$evalAsync
$dirty
$invalid
$error
$provide
$q
$location
$log
$inject
$resource
$save
$cacheFactory

 

API 描述
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。

 

 

 

 


显著特点
? 2009年第一个开源项目版本发布,至今已过去5年,发展逐渐完善
? 更加简洁,更加接近原始的“请求-处理-响应”
? 更加提速开发、更多的新的特点、社区活跃
? 不会取代WebForm
? 底层跟WebForm都是一样的,只是管道上不同的处理而已

AngularJS
?诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。
AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。
?是一款优秀的前端JS框架,已经被用于Google的多款产品当中。
?AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
Google 正式支持,有一个全职的开发团队继续开发和维护这个库。


启动(startup) - 展示“hello world!”
执行期(runtime) - AngularJS 执行期概览
作用域(scope) - 视图和控制器的集合区
控制器(controller) - 应用的行为
模型(model) - 应用的数据
视图(view) - 用户能看到的
指令(directives) - 扩展HTML语法
过滤器(filters) - 数据本地化
注入器(injector) - 聚合你的应用
模块(module) - 配置注入器
$ - AngularJS的命名空间(namespace)

浏览器载入HTML,然后把它解析成DOM。
浏览器载入angular.js脚本。
AngularJS等到DOMContentLoaded事件触发。
AngularJS寻找ng-app指令,这个指令指示了应用的边界。
使用ng-app中指定的模块来配置注入器($injector)。
注入器($injector)是用来创建“编译服务($compile service)”和“根作用域($rootScope)”的。
编译服务($compile service)是用来编译DOM并把它链接到根作用域($rootScope)的。
ng-init指令将“World”赋给作用域里的name这个变量。
通过{{name}}的替换,整个表达式变成了“Hello World”。


下面解释了"hello world"的例子是怎么样实现“将用户输入绑定到视图上”的效果。
在编译阶段:
input上的ng-model指令给<input>输入框绑定了keydown事件;
{{name}}这个变量替换表单式建立了一个 $watch 来接受 name 变量改变的通知。
在执行期阶段:
按下任何一个键(以X键为例),都会触发一个 input 输入框的keydown事件;
input 上的指令捕捉到 input 里值得改变,然后调用 $apply("name = 'X';")来更新处于AngularJS执行上下文中的模型;
AngularJS将 name='X'应用到模型上;
$digest 循环开始;
$watch 列表检测到了name值的变化,然后通知 {{name}}变量替换的表达式,这个表达式负责将DOM进行更新;
AngularJS退出执行上下文,然后退出Javascript上下文中的keydown事件;
浏览器以更新的文本重渲染视图。

 


ng-app
ng-controller
ng-init
ng-bind
ng-repeat
ng-options
ng-model
ng-disabled
ng-show
ng-hide
ng-click
ng-app 定义应用程序的根元素。
ng-bind 绑定 HTML 元素到应用程序数据
ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符
ng-bind-template 规定要使用模板替换的文本内容
ng-blur 规定 blur 事件的行为
ng-change 规定在内容改变时要执行的表达式
ng-checked 规定元素是否被选中
ng-class 指定 HTML 元素使用的 CSS 类
ng-class-even 类似 ng-class,但只在偶数行起作用
ng-class-odd 类似 ng-class,但只在奇数行起作用
ng-click 定义元素被点击时的行为
ng-cloak 在应用正要加载时防止其闪烁
ng-controller 定义应用的控制器对象
ng-copy 规定拷贝事件的行为
ng-csp 修改内容的安全策略
ng-cut 规定剪切事件的行为
ng-dblclick 规定双击事件的行为
ng-disabled 规定一个元素是否被禁用
ng-focus 规定聚焦事件的行为
ng-form 指定 HTML 表单继承控制器表单
ng-hide 隐藏或显示 HTML 元素
ng-href 为 the <a> 元素指定链接
ng-if 如果条件为 true 移除 HTML 元素
ng-include 在应用中包含 HTML 文件
ng-init 定义应用的初始化值
ng-jq 定义应用必须使用到的库,如:jQuery
ng-keydown 规定按下按键事件的行为
ng-keypress 规定按下按键事件的行为
ng-keyup 规定松开按键事件的行为
ng-list 将文本转换为列表 (数组)
ng-model 绑定 HTML 控制器的值到应用数据
ng-model-options 规定如何更新模型
ng-mousedown 规定按下鼠标按键时的行为
ng-mouseenter 规定鼠标指针穿过元素时的行为
ng-mouseleave 规定鼠标指针离开元素时的行为
ng-mousemove 规定鼠标指针在指定的元素中移动时的行为
ng-mouseover 规定鼠标指针位于元素上方时的行为
ng-mouseup 规定当在元素上松开鼠标按钮时的行为
ng-non-bindable 规定元素或子元素不能绑定数据
ng-open 指定元素的 open 属性
ng-options 在 <select> 列表中指定 <options>
ng-paste 规定粘贴事件的行为
ng-pluralize 根据本地化规则显示信息
ng-readonly 指定元素的 readonly 属性
ng-repeat 定义集合中每项数据的模板
ng-selected 指定元素的 selected 属性
ng-show 显示或隐藏 HTML 元素
ng-src 指定 <img> 元素的 src 属性
ng-srcset 指定 <img> 元素的 srcset 属性
ng-style 指定元素的 style 属性
ng-submit 规定 onsubmit 事件发生时执行的表达式
ng-switch 规定显示或隐藏子元素的条件
ng-transclude 规定填充的目标位置
ng-value 规定 input 元素的值


ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change

 

posted on 2016-04-08 14:37  Seves2015  阅读(264)  评论(0编辑  收藏  举报

导航