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

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

David_Hernandez

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

阅读量280

点赞数

分类专栏： AngularJS 文章标签：模块化路由

本文链接：https://blog.csdn.net/kisslotus/article/details/54703877

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

David_Hernandez

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Note04--路由 && 模块 && 依赖注入

1. 一个项目的目录结构： 2. 模块化 a. 步骤： i. 在HTML标签上绑定ng-controller ii. 定义module，在module上绑定controller b. e.g. i. NgModule.html<!doctype html><html ng-
复制链接

扫一扫

专栏目录