AngularJS入门学习笔记一
2017-05-04 17:14 Ap不解释 阅读(361) 评论(0) 编辑 收藏 举报首先声明:
本博客源自于学习:跟我学AngularJs:AngularJs入门及第一个实例。通过学习,我自己的一些学习笔记。
1.AngularJS的一些基本特性
(1)使用双大括号{{}}语法进行数据绑定;
(2)使用DOM控制结构来实现迭代或者隐藏DOM片段;
(3)支持表单和表单的验证;
(4)能将逻辑代码关联到相关的DOM元素上;
(5)能将HTML分组成可重用的组件。
他是MVC结构的,有双向数据绑定的特点。下图是双向数据绑定的图解:
使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。---这句话我还没有理解。之后理解了,我再解释。
HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。
MVC:
以上只是一些杂乱的特性。当我深入学习了之后,会更好的分门别类的列举和写出具体的特性。
入门实例一:
<p><input type="text" ng-model = "inputValue">请输入内容</p>
<h1>您输入的内容为:{{inputValue}}</h1>
angular通过 ng-model将input输入框输入的内容,绑定到一个叫inputValue的model上。
然后再用双大括号将这个model绑定到h1上面。
入门实例二:
代码如下:
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS入门</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body ng-controller = "myController"> <p><input type="text" ng-model = "inputValue">请输入内容</p> <h1>您输入的内容为:{{inputValue}}</h1> </body> <script type="text/javascript"> var app = angular.module('myApp', []);//获得整个angularJS影响的html元素 //控制器 app.controller('myController', function($scope) { $scope.inputValue = "PeterTest"; }); </script> </html>
注意以上代码标黄的部分。这两个分别批明了AngularJS有效的范围和Controller层有效的范围。
先通过 var app = angular.module('myApp', []); 拿到整个angularJS影响的app对象。
再通过app.controller拿到myController,
然后让input的数据与注入到我们控制器函数的作用域($scope)相关联。
从而一打开页面,就自动填充好了 PeterTest。
$scope.inputValue = "PeterTest";
入门实例三
代码:
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS入门</title> <script type="text/javascript" src="../lib/angular.min.js"></script> </head> <body ng-controller = "myController"> <p><input type="text" ng-model = "inputValue">请输入内容</p> <h1>您输入的内容为:{{inputValue}}</h1> </body> <script type="text/javascript"> var app = angular.module('myApp', []);//获得整个angularJS影响的html元素 //控制器 app.controller('myController', function($scope) { $scope.inputValue = "PeterTestInitial"; }); </script> </html>
这里利用了angularJS实现模块化的方法。
首先通过获得app这个对象。
var app = angular.module('myApp', []);//获得整个angularJS影响的html元素
然后通过
app.controller('myController', function($scope) { $scope.inputValue = "PeterTestInitial"; });
是的inputValue的值为“PeterTestInitial”。就是一进来就会有初始值。最后效果如下:
angularJS实战
来自于学习慕课网 http://www.imooc.com/video/2678 angularJS实战的一些笔记。
最终实现一个bookstore应用。
一些需要记得的知识点:
数据模型都是绑定在$scope上面的。
rootScope是根作用域。如下图:
angularJS的视图是通过directive来实现的:
最后一条,调试,可以在浏览器上装相关angular的插件,就能看到相应对象的相关angular属性。
下图代码使用module实现数据处理,angular实现模块化的方法:
依赖注入:
bootstrap的核心在于页面的布局。
可以利用双向数据绑定来很快捷实现CSS样式的变化。直接操作数据实现视图的变化。
ngclass的用法:
ng-show ng-hide,显示和隐藏
ng-annimate实现动画效果
利用第三方的插件ui-router实现深层次的路由机制
四种restrict的指令形式:
使用场景:
指令的复用的例子:
指令的controller:如果想把一些方法暴露到外部去用,写在controller里面。
内部用,写在link里面。
示例代码如下:
angularUI提供了很多开源的指令
必备组件的总结:
http服务例子:
代码防抖动处理的例子:
自己定义的service,不要以$符号打头。自己的service要写在angular自带的service的后面。
filter date的示例代码:
自定义filter代码示例: