[AngularJS 1] Introduction to AngularJS

时间：2022-09-12 13:38:04

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!

[AngularJS 1] Introduction to AngularJS

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的更多相关文章

  1. AngularJS学习笔记二&colon;AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  2. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  3. &lbrack;angularjs&rsqb; MVC &plus; Web API &plus; AngularJs 搭建简单的 CURD 框架

    MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...

  4. AngularJS学习之旅—AngularJS 模块&lpar;十五&rpar;

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  5. AngularJS学习之旅—AngularJS 控制器&lpar;六&rpar;

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  6. AngularJS学习之旅—AngularJS 指令&lpar;三&rpar;

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  7. AngularJS学习之旅—AngularJS 表达式&lpar;二&rpar;

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  8. 【AngularJS学习笔记】AngularJS表单验证

    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...

  9. AngularJS学习笔记&lpar;1&rpar; - AngularJS入门

    什么是AngularJS? AngularJS是建立在jQuery的一个轻量级版本之上的MVC框架.MVC将业务逻辑代码和视图.模型相分离.AngularJS提供的所有功能都可以通过使用JavaScr ...

随机推荐

  1. 父类方法返回子类实例：PHP延迟静态绑定

    案例分析 先前的PHP项目中,看到类似于以下的一段代码: <?php class DBHandler { public function get() { } } class MySQLHandl ...

  2. 第一章 ： javaScript框架分类及主要功能

      从内部架构和理念划分,目前JavaScript框架可以划分为5类. 第一种是以命名空间为导向的类库或框架,如果创建一个数组用new Array(),生成一个对象用new Object(),完全的j ...

  3. netfilter

    http://jingyan.baidu.com/article/642c9d3415d2c9644a46f7c6.html http://blog.csdn.net/zhangskd/article ...

  4. jsp简易文件上传（common&period;fileupload）

    昨天开始重新架构我的V&View(维视),之前写文章使用的是一个kindediter的插件,挺好用的.最近不知道咋了,出现了些小问题.早在写V&View的时候就想用以下两种方法实现文章 ...

  5. 记一次SQL联合查询注入工具的编写

    这是一个ASP网站的简单SQL注入检测和利用的工具,主要的功能是简单的检测出SQL注入漏洞,可以使用该id存在的SQL注入来获取数据库中的网站管理员的表名和字段名,猜解数据库中该表的字段数,最后通过联 ...

  6. Lua Development Tools &lpar;LDT&rpar;

    http://www.eclipse.org/ldt/ Lua Development Tools (LDT) is about providing Lua developers with an ID ...

  7. ssh的public key的使用

    1.在客户端Xftp的工具栏tools->Key Generation Parameters 弹出会话窗口,在key type中选择RSA

  8. Codeforces Round &num;350 &lpar;Div&period; 2&rpar;&lowbar;D2 - Magic Powder - 2

    D2. Magic Powder - 2 time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. 20172328《程序设计与数据结构》实验三 敏捷开发与XP实践报告

    20172328<程序设计与数据结构>实验三 敏捷开发与XP实践报告 课程:<程序设计与数据结构> 班级: 1723 姓名: 李馨雨 学号:20172328 实验教师:王志强 ...

  10. 给WebAPI的REST接口添加测试页面（二）

    在上篇文章中,我对Swagger-UI的基本功能进行了一些介绍,今天在这里介绍一下如何在WebAPI中集成Swagger-UI.这里以一个简单的CRUD的REST服务为例. /// <summa ...

相关文章