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就能夠捕獲這個跳轉從而經過定義路由規則進行頁面的渲染。