Angular.js定义以及指令学习
AngularJS 是一款以前后端分离为优势的前端 JavaScript 框架,也有人将其称为MVC(model、view、controller)框架,AngularJS 通过 指令 扩展了 HTML.且通过 表达式 实现页面与js数据的双向绑定,采用路由(route)模式实现单页面跳转,AngularJS有着诸多特性,最为核心的是:MVC、模块化、双向数据绑定、语义化标签、依赖注入等等。
详情请查阅:https://baike.baidu.com/item/AngularJS/7140293?fr=aladdin
angular.js 版本下载: https://github.com/angular/angular.js/releases
2.基本指令的学习
ng-app指的是定义一个angularJS应用程序,位于应用程序的根元素下;
ng-model 指令把元素值(比如输入域的值)绑定到应用程序;
ng-bind 指令把应用程序数据绑定到 HTML 视图;
ng-controller 指令定义了应用程序控制器,一个应用可以有很多控制器;
angularJS中很多自带指定都是以ng开头,比如ng-show用于修改显示样式;ng-form作用于表单;ng-click用于监听事件等。
注意:在JavaScript中,语法不允许变量名使用连字符,所以使用了诸如ngApp,ngClass的驼峰命名,而在html中多以连字符形式书写。
3.AngularJS 路由以及模块配置
基本架构的组成
代码分以下个部分,index.html为视图文件,index.js为应用程序模块文件,angular.js和angular-route.js为angularJS框架文件。
4.配置路由
$routeProvider 用来定义路由表,我们会用到里面的when和otherwise两个方法。
$routeParams 用来保存地址栏中的参数,也提供了通配某类地址的能力。
$location 用来分析处理url。
$ng-view 用来指定加载模板视图的区域,相当于提供了页面模板的挂载点,不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射,路由功能是由 routeProvider服务 和 ng-view 搭配实现。
5.when及otherwise详解
when方法能够接收两个参数,第一个参数是路由路径,这个路径会与$location.path()的值进行匹配,如果没有任何一个when方法匹配到,那么将会执行otherwise方法。第二个参数是配置对象,它的六个属性分别是controller,template,templateUrl,resolve,redirectTo,reloadOnSearch。
一般主要通过两个方法:
when():配置路径和参数;
otherwise:配置其他的路径跳转,可以想成default。
when的第二个参数:
controller:对应路径的控制器函数,或者名称
controllerAs:给控制器起个别名
template:对应路径的页面模板,会出现在ng-view处,比如"<div>xxxx</div>"
templateUrl:对应模板的路径,比如"src/xxx.html"
redirectTo:重定向地址
reloadOnSearch:设置是否在只有地址改变时,才加载对应的模板;search和params改变都不会加载模板
路由有几个常用的事件:
$routeChangeStart:这个事件会在路由跳转前触发
$routeChangeSuccess:这个事件在路由跳转成功后触发
$routeChangeError:这个事件在路由跳转失败后触发
由于时间有限,暂且搁笔,写的不深,还望朋友们提出宝贵意见,一起进步,谢谢!