现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它。之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+vordova,没有用bootstrap,主要做的是ios+安卓的app界面,ionic这个框架也不太了解,也需要花时间好好熟悉下。angularjs学习小白一枚,欢迎大神指正。
AngularJs是什么?
简单来说,即javascript的一个框架,通过script标签添加到网页中。即我们使用angularjs时,需要引入下面的代码。
<script src="https://code.angularjs.org/angular-1.0.1.min.js"></script>
通常建议把脚本放在<body>元素的底部,作用是:提高网页加载速度。因为html加载不受制于脚本加载。
AngularJs的作用?
AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。
•AngularJS 把应用程序数据绑定到 HTML 元素。
•AngularJS 可以克隆和重复 HTML 元素。
•AngularJS 可以隐藏和显示 HTML 元素。
•AngularJS 可以在 HTML 元素"背后"添加代码。
•AngularJS 支持输入验证。
像现在移动端基本上使用单页面的比较,就是利用angular的路由转换进行的。像我们现在这个项目也是使用的单页面。即在主页面里面,即跳转的页面都在主页面里面进行。截图如下:
AngularJs表达式
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
<!doctype html> <!-- 标记angularjs处理整个html页并引导应用 --> <html ng-app> <head> <meta charset="utf-8"> <script src="https://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <p>name:{{"ting"+"feng"}}</p> <p>number:{{5+5}}</p> <div ng-init="person={name:'tingfeng',age:'13'}"> <p>name:{{person.name}} age:{{person.age}}</p> </div> </body> </html>
AngularJs在html中的应用
主要通过ng-directive扩展html,angularjs指令是以ng作为前缀的html属性,包含有四大特性:mvc,模块化,指令系统(directive),databinding
ng-init:该指令初始化angularjs应用程序变量。比如下面的列子:
<!doctype html> <!-- 标记angularjs处理整个html页并引导应用 --> <html ng-app> <head> <meta charset="utf-8"> <script src="https://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-init="name='tingfeng'"> <p>name is:<span ng-bind="name"></span></p> </div> </body> </html>
ng-app:该指令表示定义一个angularjs应用程序。通常放在html后面,也可以在局部使用ng-app指令,比如<div ng-app>则angularjs脚本仅在该div中运行,即表明从此处开始,所有内容均为angularjs进行管理。
ng-model:该指令是指把元素值(比如输入框的值)绑定到应用程序中。
ng-bind:该指令是把应用程序数据绑定到html视图中。使用相应的指令,即可利用angularjs操作html页面。具体怎么使用,我们来看看代码。
此时利用ng-model绑定到setname模型变量上,当在输入框中输入值时,相应的setname也会变化。可自行贴码测试。
关于$scope解释
$scope是什么?有什么作用?如何使用它?
简单来说,scope是一个pojo(plainoldjavascriptobject),类似于一个对象,有属性和方法, scope是一个pojo(plainoldjavascriptobject),类似于一个对象,有属性和方法,scope提供了watch()和 watch()和apply()工具方法。angularjs的mvc全部借助于$scope进行的。
特性:1.是表达式的执行环境(或者作用域)
2.scope是一个树型结构,与dom标签平行,其上含有一个 scope是一个树型结构,与dom标签平行,其上含有一个rootscope处于最顶层。
3.scope会继承父 scope会继承父rootscope的属性和方法。
4.$scope可以传播事件,类似于dom,可以向上传播也可以向下。
5.$scope不仅是mvc的基础,也是后面实现双向绑定的基础。
AngularJs的组成部分