requirejs+angular+restangular小实例

首先在页面中引入requirejs,如下代码：

<script data-main="js/main.js" src="/bower_components/requirejs/require.js"></script>

然后编辑js/main.js代码，如下：

require.config({

  baseUrl: "js/scripts",
  
  // alias libraries paths.  Must set 'angular'
  paths: {

    "angular": "/bower_components/angular/angular.min",
    "angular-route": "/bower_components/angular-route/angular-route.min",
    'angularAMD': '/bower_components/angularAMD/angularAMD.min',
    'ngload':'/bower_components/angularAMD/ngload.min',
    'restangular': '/bower_components/restangular/dist/restangular.min',
    "underscore": "/bower_components/underscore/underscore-min",
    "lodash": "/bower_components/lodash/dist/lodash.min"

  },

  // Add angular modules that does not support AMD out of the box, put it in a shim
  shim: {
    'angularAMD': ['angular'],
    'angular-route': ['angular'],
    'restangular': ['angular', 'underscore']
  },

  // kick start application
  deps: ['app']
});

由于要启动app，所以要编写一个app.js，如下：

define(['angularAMD', 'angular-route'], function (angularAMD) {
  var app = angular.module("webapp", ['ngRoute']);

  app.config(function ($routeProvider) {
    $routeProvider
    .when("/home", angularAMD.route({
        templateUrl: 'views/home.html', controller: 'HomeCtrl', controllerUrl: 'controller/home'
    }))
    .when("/view1", angularAMD.route({
        templateUrl: 'views/view1.html', controller: 'View1Ctrl', controllerUrl: 'controller/view1'
    }))
    .otherwise({redirectTo: "/home"});
  });
  
  angularAMD.bootstrap(app);
  
  return app;
});

为如上的app定义两个controller,如下：

define(['app','ngload!restangular'], function (app) {

  app.register.controller('View1Ctrl', function ($scope, Restangular, $log) {
    var data = Restangular.all("data/pictures.json");



    $scope.message = "Local JSON file called using restangular";
    data.customGET().then(function (data) {

      console.log(data);
      $scope.rows = data.items;
      $log.log("Rows: ", $scope.rows);
    });
  });

}); 

define(['app'], function (app) {
    app.register.controller('HomeCtrl', function ($scope) {
        $scope.message = "Click on View1 link below to lazy load Restangular"; 
    });
}); 

扫描二维码关注公众号，回复： 9146612 查看本文章