angular入门

 AngularJS快速入门

AngularJS简介

AngularJS是一个基于MVC处理模式,实现了MVVM数据双向绑定的用于开发动态Web项目的框架,以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市场,是前端敏捷开发使用的主流的必须掌握的框架之一。
注:
库:封装原生JavaScript实现的大量函数的集合,是提供了各种特定功能的函数库,通过引入的库中的函数,可以快捷实现一些特定的处理过程,如截取字符串等等...
框架:一种封装了原声JavaScript实现的函数、功能、组件、处理流程的特殊实现,通过引入框架中的配置,可以实现一定的逻辑处理功能,如Bootstrap中的轮播图等等...

AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。例如:
1、使用双大括号{{}}语法进行数据双向绑定
2、使用DOM控制结构来实现迭代或者隐藏DOM片段
3、支持表单的表单的验证
4、能将逻辑代码相关联到相关的DOM元素上
5、能将HTML分组成可重用的组件

AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。其中在前端开发常用的有:数据双向绑定、基本模板指令、自定义指令、表单验证、路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块。

实例:

html代码:




   
    AngularJS Hello World!
   


   
   

       
       

       
        {{hello}}
   



js代码:


上面例子中改变表单input中的值,页面中的值也会改变,这就是AngularJS数据的双向绑定。
AngularJS中的标识符:
ng-app="myApp":是AngularJS应用程序运行的入口,当AngularJS程序要运行时,找到了ng-app开始运行,加载主要模块myApp模块。
ng-controller="myCtrl":是Angular讲标签与控制器进行绑定。

AngularJS的表达式:
AngularJS 表达式写在双大括号内: {{ expression }}
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind指令有异曲同工之妙
AngularJS 将在表达式书写的位置"输出"数据
AngularJS 表达式很像 JavaScript 表达式:它们可以包含文字、运算符和变量
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS的社区:

http://docs.angularjs.org

http://www.angularjs.net.cn/tutorial/1.html

https://github.com/aztack/AngularJS-translation

https://github.com/dolymood/learning-angular

http://www.angularjs.cn/

https://www.zouyesheng.com/angular.html

http://blog.darkthread.net/blogs/darkthreadtw/archive/tags/AngularJS/default.aspx

http://blog.jobbole.com/52857/

http://blog.jobbole.com/62999/

AngularJS的官方网站:

http://angularjs.org

AngularJS1.x代码下载:

http://code.angularjs.org

AngularJS1.x官方教程:

https://code.angularjs.org/1.6.4/docs/tutorial

AngularJS1.x官方开发向导:

https://code.angularjs.org/1.6.4/docs/guide

AngularJS1.x官方API:

https://code.angularjs.org/1.6.4/docs/api




你可能感兴趣的:(前端,框架)