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

来源：互联网发布：lcd1602读取数据编辑：程序博客网时间：2024/06/03 23:43

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) {}]);

0 0