最近在学AngularJS的框架开发,虽说到现在还只学到一半,但是我还是想把从开始到现在对AngularJS的思路理解写下,以便更好的回顾所学的知识。当然、后续的学习我也会在后面完善这一半的结果。
以下是我自己最近所学的理解,当然理解走向有误也希望有读者能够指出,菜鸡在这里先谢谢了!
AngularJS是一个前端JS框架,核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入、等等。AngularJS可以说是一个能在HTML静态网页中呈现出动态的效果,AngularJS有自己的指令API,也有自己的基架。要想在HTML中运行识别出AngularJS框架的话,那得导入
AngularJS框架是在HTML加载完后才开始加载的,所以我们可以比较“土”的理解为,HTML解析完后,然后再解析这框架,当遇到有关AngualrJS独有的代码时就会问:“这是什么鬼”,然后AngularJS框架的领导人就会出面解释说:"这是我的人"并且还会告知这个人的作用。比如:ng-app、ng-init、ng-controller等等,让其框架元素也能运行。这是这个框架运行的大体原理。
下面是AngularJS的具体使用
个人感觉AngularJS的使用结构有点像树状图,都有根节点,导致有使用的作用域。ng-app =“”这个指令就可以理解为根节点,AngularJS就是从这个指令所在的dom元素开始执行。还能理解为命名空间,整个页面中只能有一个ng-app指令。ng-controller=“”;引号里面就是JS的方法名,让界面执行指定JS方法。在方法中要带有个参数叫$scope,这个是指向输入值(ng-model),HTML元素。$scope这个名字不能改,是已经在框架中定义好的。
ng-hide跟ng-show两个的作用都差不多 ,都是用来显示或者隐藏元素。不过最好能的话用ng-if这个可以替换前面两个指令。在界面加载时,ng-if性能会高于前面两个。ng-if=“”里面的值是布尔型。
ng-bind指令用于以JS运行的形式将结果数据显示在界面上,这个指令跟{{exception}}运行效果一样,不过建议使用ng-bind指令。
其中用途较大的是ng-repeat指令,用于遍历。用法为ng-repeat=“x in person” 其中person为数组对象。
还有就是过滤器,用法为:需要过滤的对象+管道字符(|)+过滤器名。比如,abc|uppercase 就能把abc转换成大写。还有一种过滤是filter:模型名称,比如,person|filter:name 这样的意思是,在person对象里除了name属性指定的值,其他的一律过滤掉。也就是说只显示filter:name这个name的属性。
AngularJS中的模型是:比如在JS方法中有这样的属性$scope.person={name:"zhangsan",age:28,sex:"man"};其中从$scope.后面的所有总称为模型。不知道我说得对不对!!!
后续继续完善。。。