Note04--路由 && 模块 && 依赖注入

最新推荐文章于 2022-09-14 15:53:29 发布

原创最新推荐文章于 2022-09-14 15:53:29 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#模块化 #路由

AngularJS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了AngularJS中模块化的实现方法及路由配置，包括如何通过ng-controller绑定控制器，使用ngRoute实现视图间的跳转，并对URL中的#号作用进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 一个项目的目录结构：

这里写图片描述
2. 模块化
a. 步骤：
i. 在HTML标签上绑定ng-controller
ii. 定义module，在module上绑定controller
b. e.g.
i. NgModule.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>

        ii. NgModule.js

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

3. 路由
    a. 使用ngRoute进行视图之间的路由：通过URL跳转相应的视图
    b. 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'
    })
});

4. URL中的#号
    a. 用来防止浏览器向服务器提交请求，相当于内部的一个锚点，浏览器不会提交请求；
5. 当出现多个controller.js文件
    a. 两种解决方式：
        i. 使用grunt合并成一个文件，已解决多人开发过程中controller冲突问题；
        ii. 官方推荐的方式：
            1) 定义多个module，每个module绑定controller；
            2) 再定义一个module作为启动点，将其他module绑定到这个module上；

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

这里写图片描述

6. 依赖注入

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