AngularJS如何深入学习？angularjs的入门学习心得最新篇

本篇文章全是 angularjs 的自学心得，想要学得好 ，就多看看别人学的成果，虽然不一定适合你，但多看了就一定会找到你自己的路，现在就让我们一起来看这篇文章吧

一：AngularJS入门

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

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

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

3、 第一个AngularJS web应用 ：

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

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

③常用的指令:看官方API

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

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

$scope.msg="angular";

}）

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

二：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指令覆盖了 元素的src属性

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

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

ng-selected 指令用于设置 列表中的 元素的 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、在网上找点案例实战一下；

本篇文章到这就结束了（想看更多就到PHP中文网 AngularJS使用手册 中学习），有问题的可以在下方留言提问。