一、MVC

<!doctype html>

<html ng-app>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <div ng-controller="HelloAngular">

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

        </div>

    </body>

    <script src="js/angular-1.3.0.js"></script>

    <script src="HelloAngular_MVC.js"></script>

</html>
function HelloAngular($scope) {

    $scope.greeting = {

        text: 'Hello'

    };

}

model （模型层）--view（视图层）--controller（控制层）

第一步我们把需要展示的数据首先在model （模型层）上绑好；

第二步我们通过controller（控制层）在模型层和视图层之间建立起一座桥梁；

第三步我们把数据结果渲染到view（视图层）；

MVC只是手段，终极目标是代码的模块化和复用！

二、模块化

在实际项目中我们会从ng-app开始，然后定义出一个总的模块名，在用这个总的模块名去定义不同的模块；需要依赖的模块会写在[ ]里面。

<!doctype html>

<html ng-app="HelloAngular">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <div ng-controller="helloCtrl">

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

        </div>

    </body>

    <script src="js/angular-1.3.0.js"></script>

    <script src="HelloAngular_Module.js"></script>

</html>
var helloModule = angular.module("HelloAngular",[]);

helloModule.controller('helloCtrl',['$scope', function($scope){

    $scope.greeting = {

        text: 'Hello'

    };

}]);

这个是官方推荐的一个模块划分方式，结合前面的事例，就可以根据不同的业务，来划分出不同的模块，以达到前面所讲的代码的模块化和复用。方便协同开发和维护。

三、依赖注入

我们在划分模块的时候，依赖注入是必不可少的，因为通过依赖注入的方式，我们可以让一个独立的模块，拆分的更细小，更加低耦合，高内聚，复用性更好。

依赖注入是一种设计模式，在需要的地方通过参数进行传递。

依赖注入会事先自动查找依赖关系，因为$injector会负责为我们查找并加载它。

依赖注入有三种声明：1.推断式注入声明；2.显示注入声明；3.行内注入声明。

一般我们使用的都是行内注入声明，要注意的就是参数的顺序要一致。

最后提一个ngMin：一款为angularJS应用设计的预压缩工具，能够减少我们定义依赖关系所需的工作量，它会遍历整个angularJS应用并帮助我们设置好依赖注入。

<!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>
var bookStoreApp = angular.module('bookStoreApp', [

    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',

    'bookStoreServices', 'bookStoreDirectives'

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

bookStoreCtrls.controller('HelloCtrl', ['$scope',

    function($scope) {

        $scope.greeting = {

            text: 'Hello'

        };

    }

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

bookStoreServices.service('bookStoreService_1', ['$scope',

    function($scope) {}

]);

bookStoreServices.service('bookStoreService_2', ['$scope',

    function($scope) {}

]);

angularjs MVC、模块化、依赖注入详解的更多相关文章

  1. Angular依赖注入详解

    Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称为DI)又是Angular内部运作的核心功能,所以要深入理解Angular有必要先理解 ...

  2. spring 之 IOC 依赖注入详解

    当我们对一个javaBean进行实例化时,在原本的情况下我们会选择新建一个接口,然后进行实例化,为了进一步降低耦合度我们还会使用工厂模式进行封装. 例: 当我们想要去造,Chinese.America ...

  3. DI：依赖注入详解

    DI(依赖注入) 依赖注入的理解: 一般写程序的时候service层都需要用到dao层,所以一般都是在service层里面new  dao ,而现在利用依赖注入的方式,直接把dao给了service层 ...

  4. 一、.Net Core 依赖注入详解及Autofac使用

    .NET中的依赖注入实际上帮助我们解耦了我们的代码,是控制反转和依赖反转原则的具体实现. .Net Core的依赖注入的好处: 1. application 更稳定,容易维护和演化: 2. 实现细节的 ...

  5. 详解AngularJS中的依赖注入

    点击查看AngularJS系列目录 依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递 ...

  6. Spring学习 6- Spring MVC (Spring MVC原理及配置详解)

    百度的面试官问:Web容器,Servlet容器,SpringMVC容器的区别: 我还写了个文章,说明web容器与servlet容器的联系,参考:servlet单实例多线程模式 这个文章有web容器与s ...

  7. MVC Castle依赖注入实现代码

    1.MVc 实现依赖注入 public class WindsorControllerFactory : DefaultControllerFactory { private readonly IKe ...

  8. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  9. WPF依赖属性详解

    WPF依赖属性详解 WPF 依赖属性 英文译为 Dependency Properties,是WPF引入的一种新类型的属性,在WPF中有着极为广泛的应用,在WPF中对于WPF Dependency P ...

随机推荐

  1. 最简单方法将项目上传到github

    准备材料: 1.首先你需要一个github账号,所有还没有的话先去注册吧!https://github.com/ 2.我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可:ht ...

  2. 最大连接数：60 iops：150 什么概念？

    最大连接数:最多允许同时多少个客户端连接到数据库  iops:每秒读写操作的次数    关于最大连接数:  假设一个时间点:00:01:00    00:01:01 -> 第一个客户端连接到数据 ...

  3. 数组的创建和各种API

    数组的创建方式: 1. 数组直接量 var arr = [] // 创建一个空数组 var arr = [1,2,3,4] // 创建同时初始化元素 2. 实例化对象 var arr=new Arra ...

  4. 自己动手搭建一个简易的SpringBoot环境

    什么是springboot? Spring Boot俗称微服务.Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特 ...

  5. 2017-07-05 (whereis which find)

    whereis whereis 命令名 作用 搜索命令所在的路径以及帮助文档所在的位置 选项 -b 搜索命令所在的位置 -m 搜索帮助文档所在的位置 例子 whereis ls  查看ls命令所在的位 ...

  6. grails项目中（DB的相关操作）

    grails项目中(DB的相关操作) save:保存Domain对象的数据到对应的库表中(可能是insert也可能是update) findBy: 动态方法,查找并返回第一条记录,方法名可以变化 eg ...

  7. jQuery的Nicescroll滚动条插件使用方法

    Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触 ...

  8. Linux三剑客之awk最佳实践

    笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 知识点: 记录与字段 模式匹配:模式与动作 基本的awk执行过程 awk常用内置变量(预定义变量) awk数组 a ...

  9. ssh密钥分发与ansible

    笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 当我们公司的服务器达到几十台或几百台或更高的时候,利用批量管理工具管理系统是我们要做的 常用的批量管理工具有ans ...

  10. MVC登出友情提示

    好奇心害死猫,话说12月30号,阳历17年末,行至小镇农户,有羊在鸣,由于好奇心泛滥,循声而至,发现一只被拴住的羊,好心喂草,不料反被舔了一口,得亏抽手及时,不然小拇指估计被咬掉,没错,是咬掉,即使如 ...