AngularJS tips-2 初始篇

最新推荐文章于 2025-08-18 20:17:18 发布

weixin_30338481

最新推荐文章于 2025-08-18 20:17:18 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json 数据库 ViewUI

原文链接：http://www.cnblogs.com/xiaoshan-coding/p/4598012.html

本文详细介绍了如何使用AngularJS创建自定义模块、控制器、路由和数据加载，通过示例展示了如何从外部数据库获取数据并进行排序，以及如何利用AngularJS的指令实现数据绑定和视图加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1var phonecatApp = angular.module('phonecatApp', []); //在js中创建自定义模块phonecatApp根模块，在<html lang="en" ng-app="phonecatApp">加载。

2phonecatApp.controller('PhoneListCtrl', function($scope) {} //在<body ng-controller="PhoneListCtrl">加载control模块。

3ng-app: angular.module('phonecatApp', []); //根模块

4ng-controller:phonecatApp.controller('PhoneListCtrl', function($scope) {}

5ng-repeat:<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">

6ng-model="orderProp" //orderBy:orderProp 按照orderProp的排序方式

7var ListControl=('xxxcontroller',['$scope','$http',function('$scope','$http'){

$http.get('phones/phones.json').success(function(data) {
$scope.phones = data.splice(0,3);
});

}]); //从外部数据库中获取数据，这里例举json文件,splice选取0,1,2的共三个数据

8ng-src="{{phone.imageUrl}}" //用js标记src链接

9route：

ng-view: 占位符，用来加载route引导的页面

var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);

phonecatApp.config(['$routeProvider', function($routeProvider) { //routeProvider 页面引导功能
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl' //为不同的页面加载不用的控制器
})
}]);

转载于:https://www.cnblogs.com/xiaoshan-coding/p/4598012.html