AngularJS（二、如何用AngularJS建立前端代码框架）

首先，我们来看一下工程结构目录：

创新互联专注于河源网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供河源营销型网站建设，河源网站制作、河源网页设计、河源网站官网定制、小程序制作服务，打造河源网络公司原创品牌,更为您提供河源网站排名全网营销落地服务。

我们可以看到scripts中分列了一下几个文件夹：controllers、services、directives、filters、vendor，以及两个文件app.js和main.js。

controllers里面主要就是控制器

services里面是服务，为控制器提供数据服务支持，与后台交互的代码就在其中

directives是指令，用于生成自定义标签的html模板

filters是过滤器，用于处理显示数据的形式

vendor文件夹中存放的是引用的第三方js插件

跟scripts同级的是styles和views文件夹，styles存放css样式文件，view存放html文件。

我们先来看一下index.html中的主要代码：


 

  My AngularJS App
  

  
  
  





    ……

// the app/scripts/main.js file, which defines our RequireJS config require.config({ paths:{ angular:'vendor/angular.min', jquery:'vendor/jquery', bootstrap:'vendor/bootstrap.min', domReady:'vendor/domReady', ngGrid:'vendor/ng-grid.debug' }, shim:{ angular:{ deps:[ 'jquery'], exports:'angular' }, ngGrid:{ deps:[ 'jquery'] }, bootstrap:{ deps:[ 'jquery'] } } });

require([ 'angular', 'app', 'domReady', 'bootstrap', 'services/userService', 'controllers/rootController', 'directives/ngbkFocus', 'controllers/user/listController', 'controllers/user/editController', 'controllers/user/newController', 'ngGrid' // Any individual controller, service, directive or filter file // that you add will need to be pulled in here. ], function (angular, app, domReady) { 'use strict'; app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/', { templateUrl:'views/user/list.html',//当跳转到该路径时，将此html嵌入到ng-view属性的dom中 controller:'ListCtrl'//当前templateUrl的controller为ListCtrl }) .when('/edit/:name/:allowance', { templateUrl:'views/user/form.html', controller:'EditCtrl' }) .when('/new', { templateUrl:'views/user/form.html', controller:'NewCtrl' }) .when('/root', { templateUrl:'views/root.html', controller:'RootCtrl' }); } ]); domReady(function () { angular.bootstrap(document, ['MyApp']);//app名为MyApp // The following is required if you want AngularJS Scenario tests to work $('html').addClass('ng-app: MyApp');//给html添加ng-app属性 }); } );

define(['controllers/controllers', 'services/userService'], function (controllers) { controllers.controller('ListCtrl', ['$scope', '$http', '$location', 'UserService',//此处数组中的参数依次对应下面回调方法中的参数 function ($scope, $http, $location, UserService) { $scope.mySelections = []; $scope.filterOptions = { filterText:"", useExternalFilter:true }; $scope.totalServerItems = 0; $scope.pagingOptions = { pageSizes:[250, 500, 1000], pageSize:250, currentPage:1 }; $scope.setPagingData = function (data, page, pageSize) { var pagedData = data.slice((page - 1) * pageSize, page * pageSize); $scope.myData = pagedData; $scope.totalServerItems = data.length; if (!$scope.$$phase) { $scope.$apply(); } }; $scope.getPagedDataAsync = function (pageSize, page, searchText) { setTimeout(function () { var data; if (searchText) { var ft = searchText.toLowerCase(); UserService.getServerData(function (largeLoad) { data = largeLoad.filter(function (item) { return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; }); $scope.setPagingData(data, page, pageSize); }); } else { UserService.getServerData(function (largeLoad) { $scope.setPagingData(largeLoad, page, pageSize); }); } }, 100); }; $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); $scope.$watch('pagingOptions', function (newVal, oldVal) { if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) { $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); } }, true); $scope.$watch('filterOptions', function (newVal, oldVal) { if (newVal !== oldVal) { $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); } }, true); $scope.clickme = function (v) { $location.path('/edit/' + v.name + "/" + v.allowance); } $scope.gridOptions = { data:'myData', enablePaging:true, showFooter:true, totalServerItems:'totalServerItems', pagingOptions:$scope.pagingOptions, filterOptions:$scope.filterOptions, selectedItems:$scope.mySelections, showSelectionCheckbox:true, columnDefs:[ { field:"name", pinned:true } , { field:"allowance", cellTemplate:'

{{COL_FIELD | currency}}'} , { field:"entity", pinned:true, cellTemplate:'

{{$parent.row.entity | myfilter}}' } , { field:"name", width:100, cellTemplate:'

'} ]/*, multiSelect:false*/ }; }]); });

define(['services/services'], function (services) { services.factory('UserService', ['$http', function ($http) { return { getData:function () { return [ { name:"Moroni", age:50, birthday:"Oct 28, 1970", salary:"60,000" }, { name:"Tiancum", age:43, birthday:"Feb 12, 1985", salary:"70,000" }, { name:"Jacob", age:27, birthday:"Aug 23, 1983", salary:"50,000" }, { name:"Nephi", age:29, birthday:"May 31, 2010", salary:"40,000" }, { name:"Enos", age:34, birthday:"Aug 3, 2008", salary:"30,000" }, { name:"Moroni", age:50, birthday:"Oct 28, 1970", salary:"60,000" }, { name:"Tiancum", age:43, birthday:"Feb 12, 1985", salary:"70,000" }, { name:"Jacob", age:27, birthday:"Aug 23, 1983", salary:"40,000" }, { name:"Nephi", age:29, birthday:"May 31, 2010", salary:"50,000" }, { name:"Enos", age:34, birthday:"Aug 3, 2008", salary:"30,000" }, { name:"Moroni", age:50, birthday:"Oct 28, 1970", salary:"60,000" }, { name:"Tiancum", age:43, birthday:"Feb 12, 1985", salary:"70,000" }, { name:"Jacob", age:27, birthday:"Aug 23, 1983", salary:"40,000" }, { name:"Nephi", age:29, birthday:"May 31, 2010", salary:"50,000" }, { name:"Enos", age:34, birthday:"Aug 3, 2008", salary:"30,000" } ]; }, getOptions:function () { return { data:'myData', enablePinning:true, columnDefs:[ { field:"name", width:120, pinned:true }, { field:"age", width:120 }, { field:"birthday", width:120 }, { field:"salary", width:120 } ] } }, getServerData:function (success) { $http.get('jsonFiles/largeLoad.json').success(success); }, saveData:function (data, success) { $http.post('/users/save', data).success(success); } }; }]); });

重庆分公司，新征程启航

AngularJS（二、如何用AngularJS建立前端代码框架）

其他资讯