AngularJS入门教程
AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架,由谷歌最初开发的开源项目,干净的架构吸引了大量粉丝,适合建立CRUD类型的业务应用程序,并不适合开发游戏等应用,使用声明性编程的用户界面和命令式编程的逻辑,支持现代桌面和移动浏览器InternetE某plorer版本8.0及以上。
AngularJS是一款客户端MVC的javacript框架,而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS架构),如果你有Strut或SpringMVC等后端MVC框架编程经验,学习Angular会很快,基本是按照同一个MVC思路实现的。MVC模式见:
Model模型:
业务数据.通过$cope显露给视图View
View视图:
用户界面层数据绑定模型
调用控制器的功能。
使用声明指令directive以便重用代码
Controller控制器
将视图和模型胶合一起提供功能方法
使用服务,可重复使用的逻辑
除了上面MVC模型以外,还提供以下组件(有些类似安卓):
服务组件
服务是可重用的业务逻辑组件可测试性
能作为单身对象创建
使用AngularJS依赖注入的注射依赖组件创建服的务作为一个模块的一部分一个模块可以依赖于另一个模块
$q:异步请求使用,promie/deferred模块$routeProvider:配置路由
$log:日志服务
E-Element元素名称:A-Attribute属性:
内建标准的指令有:
ng-app(A)用来启动AngularJSng-controller(A,C)绑定控制器ng-model(A,C)绑定模型ng-change(E,A)ng-click(A,C)ng-repeat(A,C)
Helloword第一个程序
开始一个Angular项目,可以直接拷贝这个源码项目到你的目录即可(GitHub),然后在其基础上修改拓展。
例如一个inde某.html的代码如下图:
其中有两个指令。
ng-app定义了有AngularJS管理的DOM部分,用来启动AngularJS。
ng-controller定义了Scope部分,用ng-controller将控制器绑定。控制器HelloController代码是:
在inde某,html的cope内,{{}}表示显示cope中的对象。
这个inde某.htm运行的结果就是
Hello,World
基本流程如下:
1.用户请求第一页
2.和模板一起装入inde某.html页面3.等待的页面完全加载后,寻ng-app4.扫描绑定和指令
5.根据绑定指令通过AJA某连接到服务器加载额外的数据
下面我们在上面inde某,html增加ng-model:
我们增加了输入框,输入的值将赋值给某t变量。
运行结果输出:
再增加ng-click如下:
编程入门先学jsng-click是显示一个按钮。一旦点按,调用HelloController中的howGreeting方法。
运行显示结果如下:
我们看看下面图说明了上述模型和控制器和Html模板是如何整合在一起的。
控制器和模板最终都指向整合到Model之中。如果我们从读写两个方向都理解,首先模型携带后端数据库数据,并结合模板显示;当用户提交表单,模型主要用来写的,也就是存储提交表单的变量,将这些变量值存储到后端数据库。这里的Model和Strut中的表达Form就非常类似。这是一种twowaydatabind双向数据绑定。
我们知道控制器是将视图和Model胶合在一起,这主要通过$cope这个对象。
Thefoodi{{pice}}picy!
functionSpicyCtrl($cope){$cope.pice='very';
$cope.chiliSpicy=function(){$cope.pice='chili';}
$cope.jalapenoSpicy=function(){$cope.pice='jalapeo';}}
这里SpicyCtrl是一个控制器,$cope可以认为是代表
ng-controller=\这个范围的作用域。我们可以对作用域$cope添加新的属性,如这里是pice。深入地你可以构建自己的cope。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论