angularjs php 框架,AngularJS之前端框架

本文主要为大家分享一篇JAngularJS之前端框架的请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。

使用:

一、常用属性:

ng-app：可以再任何元素上使用,代表angular应用作用域,也是AngularJS的程序入口,对标签内的元素初始化.

ng-controller：控制器.

ng-model：指定当前元素与数据模型($scope)中的属性绑定,如果数据模型中没有此属性,会自定创建

ng-repeat：循环$scope中的属性.

ng-bind或{{属性名}}：进行属性取值.

二、双向绑定:

定义:更新视图会自动跟新模型,更新模型会自动更新视图.

Hello,{{name}}!!!

三、AngularJS基于模块化实现MVC:

Hello,{{name}}!!!

//初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组

var myapp = angular.module("myapp",[]);

//定义模块的控制器

/*myapp.controller("myctrl",["$scope",function($scope){

$scope.name="沃德发";

}])*/

//$scope页面与控制器的桥梁

myapp.controller("myctrl",function($scope){

$scope.name="法克鱿";

});

四、AngularJS的事件绑定:

ng-click：AngularJS的单击事件.

Hello,{{name}}!!!

//初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组

var myapp = angular.module("myapp",[]);

//$scope页面与控制器的桥梁

myapp.controller("myctrl",function($scope){

$scope.name="嗯嗯啊";

//事件绑定

$scope.clearVal = function() {

$scope.name = "";

}

});

五、AngularJS的遍历集合:

ng-repeat：AngularJS用于集合遍历，迭代.

序号	商品编号	商品名称	商品价格
{{$index+1}}	{{product.id}}	{{product.name}}	{{product.price}}

//初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组

var myapp = angular.module("myapp",[]);

myapp.controller("myctrl",function($scope){

$scope.products=[

{

id:'A001',

name:'狗子',

price:3306

},{

id:'A002',

name:'啥子哟',

price:8080

}

]

});

六、AngularJS的路由:

引入路由的js:

ng-view：显示路由调用的页面

$routeProvider：路由系统

when..when..otherwise : 类似于switch..case..case..default

HEAD

首页

*

站长推荐

FOOT

var myapp = angular.module("myapp",["ngRoute"]);

myapp.config(["$routeProvider",function($routeProvider){

$routeProvider.when("/aa",{

templateUrl:'aa.html'

}).when("/bb",{

templateUrl:'bb.html'

}).when("/cc",{

templateUrl:'5_3.html'

}).otherwise({

redirectTo:"/"

});

}]);