AngularJs路由、模块、依赖注入案例

最新推荐文章于 2022-07-29 14:06:48 发布

xyphf_和派孔明

最新推荐文章于 2022-07-29 14:06:48 发布

阅读量1.1k

点赞数

分类专栏： angular.js入门文章标签： angularjs

本文链接：https://blog.csdn.net/xyphf/article/details/53043761

版权

angular.js入门专栏收录该内容

34 篇文章 1 订阅

订阅专栏

index.html

<!doctype html>
<html ng-app="bookStoreApp">

<head>
    <meta charset="UTF-8">
    <title>BookStore</title>
    <script src="framework/1.3.0.14/angular.js"></script>
    <script src="framework/1.3.0.14/angular-route.js"></script>
    <script src="framework/1.3.0.14/angular-animate.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>
</head>

<body>
    <div ng-view>
    </div>
</body>

</html>

//app.js 依赖、路由

var bookStoreApp = angular.module('bookStoreApp', [
    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
    'bookStoreServices', 'bookStoreDirectives'
]);

bookStoreApp.config(function($routeProvider) {
    $routeProvider.when('/hello', {
        templateUrl: 'tpls/hello.html',
        controller: 'HelloCtrl'
    }).when('/list',{
        templateUrl:'tpls/bookList.html',
        controller:'BookListCtrl'
    }).otherwise({
        redirectTo: '/hello'
    })
});

//控制器

var bookStoreCtrls = angular.module('bookStoreCtrls', []);

bookStoreCtrls.controller('HelloCtrl', ['$scope',
    function($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
    }
]);

bookStoreCtrls.controller('BookListCtrl', ['$scope',
    function($scope) {
        $scope.books =[
            {title:"《Ext江湖》",author:"大漠穷秋"},
            {title:"《ActionScript游戏设计基础（第二版）》",author:"大漠穷秋"},
            {title:"《用AngularJS开发下一代WEB应用》",author:"大漠穷秋"}
        ]
    }
]);

/**
 * 这里接着往下写，如果控制器的数量非常多，需要分给多个开发者，可以借助于grunt来合并代码
 */

//directives.js

var bookStoreDirectives = angular.module('bookStoreDirectives', []);

bookStoreDirectives.directive('bookStoreDirective_1', ['$scope',
    function($scope) {}
]);

bookStoreDirectives.directive('bookStoreDirective_2', ['$scope',
    function($scope) {}
]);

filters.js

var bookStoreFilters = angular.module('bookStoreFilters', []);

bookStoreFilters.filter('bookStoreFilter_1', ['$scope',
    function($scope) {}
]);

bookStoreFilters.filter('bookStoreFilter_2', ['$scope',
    function($scope) {}
]);

services.js

var bookStoreServices = angular.module('bookStoreServices', []);

bookStoreServices.service('bookStoreService_1', ['$scope',
    function($scope) {}
]);

bookStoreServices.service('bookStoreService_2', ['$scope',
    function($scope) {}
]);

xyphf_和派孔明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJs路由、模块、依赖注入案例

index.html<!doctype html><html ng-app="bookStoreApp"><head> <meta charset="UTF-8"> <title>BookStore</title> <script src="framework/1.3.0.14/angular.js"></script> <script src="framework
复制链接

扫一扫