AngularJS简单入门教学和使用_angularjs教程

前端框架千千万，今天我们来学习简单的AngularJS的入门案例和学习，让我们快速掌握和使用

使用步骤

1. 引入js文件，前端框架首先就是引入js脚本，这里可以去官网上进行下载
   
   

<script src="../plugins/angularjs/angular.min.js"></script>

2.定义模块 ,语法如下：

//这里我暂时不使用分页插件
var app=angular.module("sun",[]);
1

3.在模块下定义控制器controller，我们的方法和变量都在这里面定义使用:

app.controller("catController",function ($scope,$http) {

      })
1
2

4.在body标签中引入模块和控制器

完成上面的操作，就可以开始书写AngularJS代码了,这里在控制器里面书写

• 实现定义变量，这里我们定义json数组和普通变量和方法

$scope.book={
"id":"1",
"name":"程序逸"
}
$scope.arr=[]
$scope.findAllBook=function(){

}

1
2
3
4
5
6
7
8
9

• 实现数据的双向绑定，就是我们在控制器中定义的变量在页面中绑定，进行修改

$scope.name="Tom"

<input type="text" ng-model="name">
1
2
3

• ng-init 初始化指令 ， 该指令中的语句（赋值语句，方法调用语句）是在body体渲染出来之前执行的。

ng-init="findAllBooks()"

• 遍历数据,使用ng-repeat

  <tr ng-repeat="book in bookList">
              
     <td>{{book.name}}</td>

 </tr>
1
2
3
4

• 为button添加点击事件

<button ng-click="findAllBooks()"> </button>
1

OK下面附上一个小练习