AngularJS自学心得

一：AngularJS入门

1、AngularJS简介：AngularJS 是一个 JavaScript 框架。

AngularJS的四个核心思想：依赖注入，模块化，双向绑定，语义化标签。

2、开发工具和调试工具：sublime/webstorm ；   用浏览器来调试。

3、第一个AngularJS  web应用：

①引入angular.js文件（js/angular.min.js），使用ng-app指令声明AngularJS管理边界。

②AngularJS双向绑定的简单使用：双大括号  {{}}

③常用的指令:看官方API

④在<script>中声明：    angular.module（'app'，[  ]）

                                               .controller（'myctrl',function($scope){

                                               $scope.msg="angular";

                                                 }）

app是ng-app=‘app’的名字，[ ]里是angularjs之前定义的其他模块,myctrl是ng-controller的名字，<h1>{{msg}}<h1>

二：AngularJS的进阶

1、AngularJS前端MVC的设计与搭建：看④的书写样式就是个简单的MVC

2、Binding指令实现数据双向绑定：ng-bind或{{ }}    （备注：了解下ng-clock指令）

3、Controller的使用：定义controller；在controller中声明变量；使用ng-bind绑定数据并显示controller作用域；

4、$scope中变量和方法的使用：

①在$scope上定义方法并在页面上进行绑定调用。

②在$scope上定义变量并在方法中使用：注意下$scope方法调用的写法。

三：AngularJS进阶--Services与指令的使用

1、自定义一个Services服务：

①在angularjs里services有多中表现形式，学会在Controller中使用Services；

②在AngularJS中services的表现形式其中包括：value，constant（常量）、factory（相当于工厂模式）、services

2、Services的应用：如何在多个controller中共享数据

3、常用指令的使用：

ng-bind数据双向绑定（等同于{{ }}）;

ng-model绑定HTML中表单元素到scope中;

ng-show在表达式为true时显示指定的HTML元素，否则隐藏指定的HTML元素；

ng-hide在表达式为ture时隐藏指定的HTML元素，

ng-if在表达式为ture时会添移除元素并显示，false时移除元素（是从DOM中移除）

ng-submit指令用于在表单提交后执行指定函数;

ng-disabled指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)若表达式返回ture，则表单字段禁用;

ng-checkde指令用于设置复选框（checkbox）或单选按钮（radio）的checkde属性，如果返回ture将被选中;

ng-src指令覆盖了<img>元素的src属性

ng-herf指令覆盖了原生的 <a> 元素 href 属性;

ng-class用于给HTML元素动态绑定一个或多个CSS类;

ng-selected指令用于设置 <select> 列表中的 <option> 元素的 selected 属性，表达式返回ture则被选中;

ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。需要搭配ng-model指令使用。

ng-change 指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。

4、常用指令ng-repeat的使用：指令用于循环输出指定次数的 HTML 元素（集合必须是数组或对象）

特有属性（$index数组的下标 , $first （如果是第一个就会返回ture）,$last）的使用

四：AngularJS内置服务--$http的使用

1、使用$http查询MySql数据：先发送一个$http请求，通过后端的开发语言将mysql的数据返回到前端。

2、$http请求带参数实现数据库的增删改：案例

3、用户角色权限实例：练习即可

五：AngularJS进阶--Directive的使用

1、使用Directive自定义HTML组件：restrict含义与应用（A：属性，E：元素，C：类名），replace的使用、template的使用

2、多个directive之间的相互调用用require；了解下link的用法

六：AngularJS之移动APP开发

1、移动前端框架lonic简介；

2、Cordova简介：一个前端平台、一套代码用它打包就可是现在Android、IOS平台；

3、在网上找点案例实战一下；