2-4 路由、模块、依赖注入

时间 2019-12-14

标签路由模块依赖注入栏目系统网络繁體版

原文原文链接

2-4 路由、模块、依赖注入

内容简介

AngularJS的模块化实现
一个完整项目结构是什么样的？---示例演示
使用ngRoute进行视图之间的路由
一切都是从模块开始的
ng官方推荐的模块切分方式是什么？
模块之间的依赖应该怎么作？--依赖注入

1. AngularJS的模块化实现

1487147667105.jpg

MVC1.html

<!doctype html>
<html ng-app="HelloAngular">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="helloNgCtrl">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="NgModule1.js"></script>
</html>

NgModule1.jsjavascript

var helloModule=angular.module('HelloAngular', []);
helloModule.controller('helloNgCtrl', ['$scope', function($scope){
	$scope.greeting = {
        text: 'Hello'
    };
}]);

2. 一个完整的项目结构

1487147569250.jpg

app---存放源码的文件夹
framework---存放须要用到的一些组件
js---存放全部的js文件夹
tpls---模板文件

package.json 配置文件（管理使用到了那些框架、插件等）html

{
  "version": "0.0.0",
  "private": true,
  "name": "angular-recommended",
  "description": "ng官方推荐的项目结构",
  "license": "MIT",
  "devDependencies": { "http-server": "^0.6.1", "bower": "^1.3.1" },
  "scripts": { "postinstall": "bower install", "prestart": "npm install", "start": "http-server -p 8000" } }

index.htmljava

<!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>

bookList.htmlangularjs

<ul>
    <li ng-repeat="book in books">
        书名:{{book.title}}&nbsp;&nbsp;&nbsp;做者:{{book.author}}
    </li>
</ul>

hello.htmlweb

<p>{{greeting.text}},Angular</p>

app.jsnpm

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'
    })
});

controllers.jsjson

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来合并代码 */

directvies.js服务器

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

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

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

filters.js=app

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

3. 使用ngRoute进行视图之间的路由

1487149888790.jpg

路由的原理：首先分析下这个地址http://127.0.0.1:8080/app/#/hello
咱们发现这个地址中的#的做用是：内部锚点，用来进行页面内部的跳转，加上这个#后它不会像服务器进行提交请求。
那么既然是页面的内部跳转，这个AngularJS就能够捕获这个跳转从而经过定义路由规则进行页面的渲染。

4. 一切都是从模块开始的

1487150924072.jpg

5. ng官方推荐的模块切分方式

1487150571351.jpg

5. 模块之间的依赖应该怎么作？--依赖注入

1487151174860.jpg

1. Angular模块与依赖注入
2. 模块化解耦框架RxFluxArchitecture4-依赖库与依赖注入
3. 依赖注入
4. Android 依赖注入
5. Spring--依赖注入
6. 依赖注入模式与反模式
7. 依赖注入（C#）
8. yii2.0依赖注入
9. PHP 依赖注入
10. 依赖注入（IOC）
更多相关文章...
• Spring DI（依赖注入）的实现方式：属性注入和构造注入 - Spring教程
• Maven 引入外部依赖 - Maven教程
• 委托模式
• YAML 入门教程