[AngularJS 1] Introduction to AngularJS
introduction:this article is going to introduce AngularJS in generally. I will write it through five points.Number one is what is AngularJS.Number two is why use Angular.Number three
is how angularJS works.Number four is about modules.Number five is my own summery.
Number one_what is it
Front -end javascript framework for creating web applications;
Open source maintained by Google;
MVC pattern
Handles common(and ofter trying tasks) such as DOM manipulation,updating UI based on data or input, registering callbacks;
Decarative programming
Number two_why use it
Good for dynamic web sites/web apps(VRUD based);
Framework imposes a structure that is good for organizetion;
Helps create responsive(fast) websites;
Easy to test-to create software that is easily maintained;
Number three_how it works
AngularJS will initialize when the DOM content is loaded;
Looks for the ng-app directive-if its found,that is the root of the app;
Directives can be declared a variety of ways:typically with the ng-prefix,but you can use data-ng;
It will load the module associated with the directive if specified;
PS: what is the difference between ng-prefix and data-ng? ok, when your brower's version is old, maybe you should use data-ng!
Number four_modules
what are modules?
It's containers for the various parts of your application(controllers,services etc). It's declarative-easy to understand. It's maintainable,readable,testable. It defines dependencies for our app.
Modules setup: A module is comprised of configuration and run blocks. Configuration blocks-executed during configuration and registration. Only peoviders and constants can be passed. Run blocks-happen
after the injector is created. Only instances and constants can be passed in and is like a main method-it kickstarts the application.
PS:Modules can depend on other modules and they are only loaded once.
Number five_summery
first of all, let me show some code:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
My name:<input type="text" ng-model="MyName" placeholder="please write down your name !">
<hr>
Hello, My name is {{MyName||''}}
</body>
</html></span>
please run the code in your brower, then there is surprise for you.
I gonna publish my blog in english, Maybe it's not good at the beginning, but it's okay . the next blog is about Angular Controllers!
[AngularJS 1] Introduction to AngularJS的更多相关文章
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架
MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- AngularJS学习之旅—AngularJS 控制器(六)
1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...
- AngularJS学习之旅—AngularJS 指令(三)
1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...
- AngularJS学习之旅—AngularJS 表达式(二)
1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- AngularJS学习笔记(1) - AngularJS入门
什么是AngularJS? AngularJS是建立在jQuery的一个轻量级版本之上的MVC框架.MVC将业务逻辑代码和视图.模型相分离.AngularJS提供的所有功能都可以通过使用JavaScr ...
随机推荐
- 黄聪:PHP 防护XSS,SQL,代码执行,文件包含等多种高危漏洞
版本:v1.1更新时间:2013-05-25更新内容:优化性能功能说明: 可以有效防护XSS,sql注射,代码执行,文件包含等多种高危漏洞. 使用方法: 将waf.php传到要包含的文件的目录 在页面 ...
- linux命令(4):top 命令(性能分析工具)
linux 的top命令详解 简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个 ...
- 关于Rotation和Quaternion的一些问题
当我们使用unity的时候,面对一个物体,一个不可避免的问题就是:控制物体的旋转. unity的Transform组件的第二个属性Rotation为我们提供控制物体旋转的功能.在一个物体的Inspec ...
- bug_ _fragment的1
========= 2 fragment小结 ???? ======== 1 fragment:java.lang.IllegalStateException: Can not perf ...
- tuple解包给类的构造函数
首先我们的第一步当然是将tuple解包.tuple提供了一个get函数来获取第N个元素.例如: get<1>(make_tuple(...)); 要将一个tuple全部拆解,就可以使用通过 ...
- linux下安装easy_install的方法
python中的easy_install工具,类似于Php中的pear,或者Ruby中的gem,或者Perl中的cpan,那是相当的爽歪歪了如果想使用 如果想使用easy_install工具,可能需要 ...
- iOS获取电量方法
ios简单的方法: [UIDevice currentDevice].batteryMonitoringEnabled = YES; double deviceLevel = [UIDevice cu ...
- linux内核hash list
源码: #ifndef _LINUX_HLIST_H #define _LINUX_HLIST_H /* * Double linked lists with a single pointer lis ...
- 为什么选择centos,而不是Dibian、Ubuntu【转】
我们运行着一些全球最大的互联网的营运,因此我们对可靠性和稳定性非常重视,是我们的第一要务.为此,我们只使用Linux来支撑顾客的系统.但是,我们应该使用哪一个Linux的发行版?答案是,CentOS. ...
- Python 之字节转换
# coding: utf-8 def bytes2human(n): """ >>> bytes2human(10000) 9K >>&g ...