码迷,mamicode.com
首页 > Web开发 > 详细

requirejs与anjularjs框架

时间:2015-12-18 13:01:22      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:

1.目录省略

2.首页index.html如下:

<!doctype html>
<htmls>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
</head>
 
<body>
<!--其他html内容-->
<script type=‘text/javascript‘ src=‘../scripts/lib/require.js‘ data-main=‘../scripts/main.js‘></script>
</body>
</html>

     首先需要引入requirejs,指明入口函数(data-main中设定),平时我们自动加载会在html元素上用(ng-app),这里我们采用手动加载的方式。

3.main.js(主要配置下所需的js文件)

require.config({
    baseUrl: ‘/js/lib‘,
    paths: {
        ‘angular‘: ‘/angular/angular‘,
        ‘angular-cookies‘: ‘/angular/angular-cookies‘,
        ‘angular-route‘: ‘/angular/angular-route‘
    } ,
    shim: {
        ‘angular‘: {
            exports: ‘angular‘
        },
        ‘angular-cookies‘: {
            deps: [‘angular‘]
        },
        ‘angular-route‘: {
            deps: [‘angular‘]
        }
    },
    deps:[‘bootstrap‘]
});

  这里主要是需要requirejs异步载入,而deps:[‘bootstrap‘]主要是让我先加载这个文件。

4.配置手动加载的文件bootstrap.js

require([‘angular‘, ‘angular-cookies‘,‘angular-route‘], function (angular) {
    ‘use strict‘;
    //手动启动
    angular.bootstrap(document, [‘indexmodule‘]);
});

5.indexmodule(主要是路由的设置)

define([‘angular‘], function (angular) {
    ‘use strict‘;

    var app = ng.module(‘indexmodule‘, [‘ngCookies‘, ‘ngRoute‘, ‘ngMessages‘);

    app.config([‘$routeProvider‘, function ($routeProvider) {
        $routeProvider
            .when("/", { controller: ‘index-controller‘, templateUrl:  ‘../index.html‘ })
             .otherwise({ redirectTo: ‘/‘ });
    }]);

    return app;
});

6.index-controller(控制器)

define([‘indexmodule‘,‘indexservice‘],function(app,indexservice){
         app.controller(‘index-controller‘,[‘$scope‘],function($scope,indexservice){
             //这里是对界面控制器的一些操作
             //也可以调用服务
         $scope.aa=indexservice.getindex().success(function(response){
}); }) });

7.indexservice(调用的服务)

define([‘indexmodule‘], function (app) {
	‘use strict‘;
	
	app.service(‘indexservice‘, [‘$http‘, function ($http) {

		this.getindex= function (xx,xx) {

			var callback_success = function () {
				console.info(‘调用成功。‘);
			};

			var callback_error = function () {
				console.error(‘调用失败。‘);
			};

			var indexservice= $http({ url:  ‘服务地址‘, method: ‘POST‘, params: null, data: {xx,xx} }).success(callback_success).error(callback_error);

			return indexservice;
		};
	}]);
});

 

requirejs与anjularjs框架

标签:

原文地址:http://www.cnblogs.com/bobo-show/p/5056608.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!